LESSON TWO - GETTING STARTED

You may read the following sections in their entirety or use these choices to go directly to a section. | What do I need to get started? | Placing the NotePad icon on your desktop | | Naming your web page (your HTML document) | | Saving your web page (your HTML document) | | Server requirements for naming home pages | | Loading your web page into your browser | | Getting your web page on the internet | | Getting a counter for your web page |

WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE?

YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or directory to hold only your HTML files (also called documents) for the web pages you are designing. Work in that folder only. If you are doing all these lessons, you may also wish to set up a separate folder to hold all my examples for testing in your browser. The best way to learn is by doing so when I give you an example or a problem for you to work on, be sure to try it out to see what it would look like on the web through your browser. You can then alter the example to experiment with different effects. In any event, you need some place to put your work. If you do not know how to create a folder, be sure to call someone who does know and can tell you how to do it. YOU DO NOT NEED TO BE CONNECTED TO THE INTERNET You can write and design your HTML pages (that is, your web pages) off-line. If all you are doing is designing and creating web pages, you do not need to go on the internet. If you have a regular telephone dial up connection, and there is only one telephone line in your house, there is no need to tie up the line. YOU NEED A BROWSER Netscape Navigator (also called Netscape Communicator) and Internet Explorer are among today's most popular browsers for viewing web pages and for surfing the internet. There are other browsers also but they are not nearly as popular as Netscape and Explorer. YOU NEED A WORD PROCESSOR You need a simple word processor such as NotePad or WordPad. These simple word processors are also called text editors and are ideal for creating web pages. Now you can also use word processors such as WordPerfect or Microsoft Word or Works but they are not simple text editors. They include a lot of formatting which we do not want. For these

and other reasons, many webmasters like using NotePad which can be found in the Accessories folder (also known as the Accessories "Group"). In Windows, for example, NotePad is found by clicking on "Start", then choosing "Programs" (or All Programs), then choosing "Accessories" and finally choosing NotePad. That is: Start --> Programs --> Accessories --> NotePad As we will see later in this lesson, there are good reasons for using a text editor such as NotePad for creating web pages. Sometimes the coding for a web page can become so big that it will no longer fit into NotePad. In this case, you will need to switch to another text editor to complete the page. When you are faced with this situation, WordPad is the answer. It allows for much larger files and is also located in the Accessories folder. You may wish to try WordPad sometime. It has a few more features than NotePad and so you may prefer to use WordPad instead of NotePad. From here on in I will be referring to NotePad as the text editor of choice. Of course if you wish, you can use any text editor or word processor. In summary, you basically: 1. 2. 3. 4. create your web page in a text editor such as NotePad (typing in all the text and tags) save your web page as an HTML file using any appropriate name load the HTML file into the browser to see how your web page looks and works switch back to NotePad to make any corrections, changes, etc.

YOU NEED TO HAVE BOTH YOUR BROWSER AND NOTEPAD ACTIVELY RUNNING
To design a web page, you need to have BOTH your browser AND NotePad active at the same time. In other words, while you are working with one, the other is sitting there in the background. This way you can quickly SWITCH back and forth between them. If you do not know how to have both your browser and NotePad running at the same time, be sure to ask someone who does know.

PLACING THE NOTEPAD ICON ON YOUR DESKTOP

You can have the NotePad icon placed directly on your desktop. This way you can click on the icon and instantly load NotePad without having to locate it through the Start menu. If you do not know how to do this, here are the steps.

1. First make sure that you can see the desktop or at least part of it. When you turn on the computer, the desktop is the first thing you see after the computer finishes booting. If you have another program covering up the desktop, then minimize or close it so that you can see the desktop. 2. Choose Start --> Programs --> Accessories. You will now see NotePad in the folder list. 3. Click with your right mouse button on the name NotePad. That is, right-click on NotePad. This will bring up another menu list. 4. From this menu list, choose Create Shortcut. 5. Go back to the Accessories folder and you will now see Notepad(2) in the list, likely at the bottom of the list. This time move the cursor over the name NotePad(2). Now click and hold down the left mouse button (do not release the button). Now drag the name Notepad(2) onto the desktop. That is, drag the shortcut Notepad(2) from the Accessories list onto the desktop. 6. You now have an icon on your desktop with Notepad(2) written below it. If you double click on this icon, NotePad immediately opens up. 7. You can now rename the icon to simply NotePad or Notepad by right-clicking on the icon and from the pop-up menu, choose Rename. You can then type in the name you want. 8. The above procedure can be used to place a shortcut on the desktop for any application.

| top | | bottom |

NAMING YOUR WEB PAGE

When you save your web page for the first time, you need to give it a name. You not only have to give it a name but you also need to add a suffix (an extension) to the name. THE NAME: If you are not running at least Windows 95, your file name is limited to a maximum of 8 characters. Otherwise the name can be longer. Since most people today are using at least Windows 95, this is not an issue. It is strongly recommended that you do not use spaces in the file name. Browsers will replace the space with a coding such as %20 so that the name "my web page" will look like "my%20web%20page" which is confusing and does not look good. We do not want strange symbols in our file names and so it is best to avoid spaces in the name. THE SUFFIX: The suffix is an extension to the name and declares the kind of document that it is. In HTML, the suffix is either ".htm" or ".html". "Htm" or "html" tells the browser you are working with HTML files - that is, an HTML document. You must use ".htm" if you are not running Windows 95 or higher. Again, this is no longer an issue and so you can use either .htm or .html for the file extension. So if "homepage" is the name of the HTML document (your web page), you can have either

homepage.htm OR homepage.html | top | | bottom |

SAVING YOUR WEB PAGE (YOUR HTML FILE OR DOCUMENT)

This section may be better understood when we do an actual example in the next lesson, but here is a summary on saving a web page.

IF YOU ARE USING ONLY NOTEPAD, WORDPAD or a similar text editor: o Choose File from the menu bar, then from the drop down menu, choose Save As. o In the Save As dialog window, make sure in NotePad that the Save as type box reads All Files. In the case of WordPad, it should be Text Document. o In the File name box, type in a suitable file name along with an extension (either .htm or .html). o Click on OK and the file (the web page) is saved. In the case of WordPad you may be told that saving the file will remove all formatting. That is okay because we do not want any formatting saved with the file. IF YOU ARE USING WORDPERFECT, WORD, WORKS (or any popular word processor): In lesson one, I gave an example in WordPerfect of what happens when you chose REVEAL CODES. In the lower half of the screen, you see your text all marked up with WordPerfect tags. If you need to review this, just click here on Lesson One. Well, it doesn't matter which word processor you use, it will have its own set of tags or codes which lets it know what the margins are, what is bolded, underlined, when the ENTER key has been pressed, and so on. If you save your HTML web page as a normal document file, all these little tags or codes are saved as well. In HTML, we don't want that. You must save your work as TEXT ONLY files. HTML browsers can read only text. If you don't save as TEXT ONLY, you will be saving a lot more than text. You will also be saving margin settings, bold, italics, indents, etc. When you are ready to save your HTML document or file, you must first choose SAVE AS ... from the FILE menu. Then, besides choosing a suitable file name, you must make sure to also choose TEXT ONLY, ASCII TEXT DOS, MSDOS TEXT, PLAIN TEXT, or just TEXT - your processor will have one of these options or a similar option. You can then click on "OK" to save your HTML file.

| top | | bottom |

SERVER REQUIREMENTS FOR NAMING HOME PAGES

When you design a website, generally you have a "home page" plus other pages that are linked to this home page. A home page is then your main page that contains information about you, your business or organization, plus a menu of choices for linking to your other pages or to other websites. For this section, I will use the Brant FreeNet as an example. What I say here is true for most, if not all, companies that provide internet services. One of my connections to the internet is through the Brant FreeNet, a non-profit organization. Now, anyone with Brant FreeNet who wants to set up a Home Page is strongly encouraged to name it index.htm. If you plan to have other pages connected to your home page, you can give it any name you like and with either the .htm or .html extension. But for the home page, it should be index.htm. The reason for this is that index.htm is the default name for any home page on line with the Brant FreeNet. This means that if someone is visiting one of your other pages, and would like to see your home page, all they have to do is erase the file name in the address location line, press the ENTER key, and your home page will be displayed. If you don't name your home page index.htm, the browser will not be able to locate your home page and the viewer will receive an error message. The same is true if you are visiting another web page anywhere on the World Wide Web (WWW). If you want to see a home page, just erase the name and you should be connected to the home page. For example, let's suppose one address from a web page is: http://www.bfree.on.ca/comdir/retire/buchanan/Lifelease.htm If you were to erase the file name in the address location line so that it looks like: http://www.bfree.on.ca/comdir/retire/buchanan/ you will be connected to their home page which is: http://www.bfree.on.ca/comdir/retire/buchanan/index.htm Each internet service provider or host has its own default file name for home pages. Some may state that it is to be index.htm. Others may state that it must be index.html and still others will allow it to be either index.htm or index.html. There may also be a few providers that have another name instead of index. If you do not know what you should name your home page, ask the internet company who is going to host your website. Also, the next time you are surfing the WWW, try the above method to see if you can connect to someone's home page. | top | | bottom |

LOADING YOUR WEB PAGE INTO YOUR BROWSER

Once you have saved your web page (your HTML file or document), you need to SWITCH over to your browser which is running in the background. Once you activate your browser, choose File from the menu bar, and then choose Open or Open File or Open File in Browser (one of

them should be in the File menu). You will then need to locate your web page, click on the file name and then click the OK button. Your HTML file will appear in the browser. You can only observe your file in the browser - you can not edit in the browser. Once you have seen how your web page looks in the browser, you can then SWITCH back to NotePad to continue working and editing. NOTE: (1) If you want to LOAD an HTML file for the first time into NotePad, and the name does not show up in the correct folder in the dialog window, choose All Files (*.*) in the Files of type box and the name should then appear. In the case of WordPad, it must be All Documents (*.*). Click on the name and then on the Open button. (2) If you use a word processor other than NotePad or WordPad, you may first need to CLOSE the HTML file before it can be loaded into your browser. With NotePad and WordPad this is not necessary. If some of this sounds confusing, don't worry, you will get a chance to practice saving and loading in Lesson Three.

Now here are some questions to answer. The answers are given at the end of this lesson. 1. What does HTML stand for? 2. Assuming that we have the proper computer platforms, which of the following are legal names for web pages? a) contents.htm b) ordering.html c) homepage.txt d) faq.htl e) ThankYou505.htm f) products-warehouse.html 3. Answer True or False: HTML web pages are always saved as text only files. 4. What web page will display if the URL is www.htmltutorials.ca? | Click here to see the answers |

| top | | bottom |

GETTING YOUR WEB PAGE ON THE INTERNET

When you finish creating your website, you may wish to place it on the World Wide Web (that is, on the internet). To place your website on the internet, you need a host. That is, you need to find an internet company to host your website. You may have an internet business and willing to

pay a monthly fee to have your website hosted. There are hundred of companies willing to host your website for under $10 per month with your own domain name. You will of course be required to purchase your domain name which today is relatively cheap. If you go to your favorite search engines and do a search on "web page hosting" or "web page providers" or "web hosting service", etc., there will be no shortage of search results to check out. On the other hand, you may only have a small internet business or a personal web page, and you do not want to pay any money to have your website hosted. In other words, you want a free web page hosting service. There are many internet companies willing to host your website for free. Many of these companies are good companies giving away lots of free web space - more than you will likely ever need. Some of these hosting companies also offer unlimited E-mail addresses, message boards, guestbooks, personalized domain names, counters and site stats. Some will even provide sponsors that will pay for visitors you send from your free website. Most have easy to learn instructions on how to transfer your website to the internet through their hosting service. If these companies are willing to host your website for free, then what is the catch? The catch is that you will be required to display some form of advertising - such as advertising their services to all your visitors. If you would like a free website I would suggest that you click here to visit http://www.thefreesite.com where you will find a listing of several internet companies that offer free hosting services plus a host of other free things. The actual page that lists these companies is located at http://www.thefreesite.com/Free_Web_Space/index.html. TheFreeSite.com checks out each internet company before advertising their free services on TheFreeSite.com website, and then includes a description or comment on each listing. So TheFreeSite.com is a good place to start if you are looking for something free. Checking out all these internet companies offering free web pages can be confusing so here are two suggestions on what to avoid: 1. Try to avoid a hosting company that places their advertisements in a pop-up window. What happens here is that every time a visitor displays a page from your website, a window pops up which the visitor then has to close. Many people find these pop-up windows very annoying and it tends to turn them off. These pop-up windows are also a sure sign that your web page is being hosted for free. If you want a professional looking website then I would suggest that you avoid hosts with pop-up advertising windows. Look for a host that will require you to display a banner instead of pop-up windows. 2. Try to avoid an internet company that will place your website in a frame and their advertising in another frame. Frames are not studied until Lesson 13 but if you want to see what a frames page looks like now, just click here to see my Lesson 13. It is a frames page with the title ("Lesson 13 - Frames") in one horizontal frame that never moves, and the lesson itself in another frame with a scroll bar so that you can scroll through the lesson. The setup for a host that places your website in a frame is about the same. They will place their advertisements in a horizontal frame that never moves (either at the top of the page or at the bottom of the page) and your web page will be placed in a second frame with a scroll bar.

There are a number of people do not care for frames and also many of the top search engines are not equipped to properly index web pages with frames. Thus if you intend to place your web page with the search engines, there is a good chance you will not get very good placements. TheFreeSite.com does include hosts that do not require the displaying of pop-up windows and frames. If I had to choose between (1) and (2), I would go with (2). However, you should try to find a host that avoids both (1) and (2). | top | | bottom |

GETTING A COUNTER FOR YOUR WEB PAGE

You may wish to place a counter on your home page before placing your website on the internet. A counter will tell you how many visitors visit your website. That is, a counter keeps track of the number of hits to your website. A counter cannot be created with HTML. It requires a scripting language to make a counter (such as a JavaScript or a CGI Script). For this reason, almost everyone gets a free counter and free counters are plentiful. If you would like to check out some free counters for your website, click here to visit http://www.thefreesite.com where you will find a listing of several internet companies that offer free counters. The actual page that lists these companies is located at http://www.thefreesite.com/Webmaster_Freebies/Free_counters_and_trackers/index.html. These free counters come complete with all the necessary coding to place on your website. Just cut & paste the coding that they provide and you have a counter on your website. Counters are usually placed at the bottom of a web page. There are all kinds of counters that you can choose from. You can get a simple counter that only keeps a record of hits to your website or you can get a counter that gives a lot more information. Many counters not only keep a running total of hits to your website, but they can also tell you where a visitor comes from, what their computer screen resolution is, what browser they are using, and even how long they spent browsing your site. Many counters also give you information such as hits by the hour, day, week, month and year. You can get a counter that gives data in colorful 3D graphs, or styles that you can customize by text color, background color, size, font, etc. One company offers a counter that will even tell you what keywords your visitors used to locate you. How do you access all this other information about your visitors? Well, with the counter comes your own personal access page located at the company's website that will give you all this information about your visitors. Thus the company giving you the free counter will also provide everything you need along with complete instructions. While you are visiting TheFreeSite.com, you may wish to subscribe to their free newsletter. It is a great newsletter giving you the latest in freebies. TheFreeSite.com claims to offer the web's

largest collection of freebies and that their free stuff listings are the most complete on the internet. I tend to agree with them. | top | | bottom |

ANSWERS
1. HTML stands for HyperText Markup Language. 2. a) contents.htm is a legal web page name. b) ordering.html is a legal name. c) homepage.txt is not a legal name. Even though web pages are saved as text only files, the extension (or suffix) must be .htm or .html. d) faq.htl is not a legal name. The extension must be .htm or .html. e) ThankYou505.htm is a legal name as numbers are allowed in the file name. f) products-warehouse.html is a legal name as dashes (and underscores) are allowed. However, you should not start a name with a dash or underscore. 3. True 4. You are only given the domain name (htmltutorials.ca). There is no web page filename given. Therefore the default web page will be displayed which is the home page. In other words, the browser will display http://www.htmltutorials.ca/.

| Back to the top of the page | | Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Three |

The information contained in these 21 free lessons is Copyright , Brantford Educational Services, 1997 2007 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to htmltutorials@bfree.on.ca