Click to view a topic or simply scroll down the page
Creating the Template
Creating Your First Web Page
Editing Your Page
The Four Most Important Tags
The Four Tags in Detail
Welcome to what we hope will be an exciting six weeks exploring web page making and related issues! The really good news is that despite the fact that HTML stands for HyperText Markup Language, it really is not a "language" at all. HTML consists of just surrounding certain words and letters with angle brackets. This action creates HTML "tags" which then tell the browser how to display the text in between the tags to those viewing the page.
If you ever have or have had the opportunity to use a word processing program, such as Word Perfect or Word, you probably know that you can highlight a word or words and click on an icon on the task bar of the program in order to cause that word or those words to appear in bold or bold and centered. HTML does much the same thing, except when learning HTML in this class you will actually type in the codes which cause the words to become bold.
It's EASY to learn HTML! In fact, during this first lesson, you will actually CREATE your first web page. It will be extremely basic and plain and it will serve as a stepping stone to a bigger and better web page that you will design in stages over the remaining weeks of the class.
The class has a Bulletin Board where you can post questions and "meet" students with whom to study and enhance your learning experience. The HTML Team will be monitoring the Bulletin Board to answer your questions and we encourage those students who have some HTML experience to assist your classmates who are just starting out in any way you can. You may access the Class Bulletin Board from the Navigation Menu for the VU HTML Classroom and the MENU at the top left of the lesson files. Visit the Class Bulletin Board frequently as updates and information we need to add at the last minute will often be posted on the Bulletin Board to assure the class has "instant" access to anything we feel is important. Occasionally we may also post additional information as a new file on the Classroom Index.
If you have any questions about the lessons that are not answered on the Bulletin Board or perhaps comments or suggestions about the class, please feel free to send email to the HTML Team at firstname.lastname@example.org
As class begins, you will want to visit and bookmark some informative web sites created by the HTML Team members:
We will start by reviewing a few key terms that we will be using in this class. The terms here are defined in a very limited and simple manner and are not intended to represent the fullest or technical explanation of the terms.
For those of you who would like more extensive definitions of Web Terminology, visit whatis.com -- An Online Internet Dictionary. http://whatis.techtarget.com/ It gives a more comprehensive set of definitions for common Internet/web terms than the small, simple list presented above.Creating the Template
A TEMPLATE is a file which serves as a pre-made "pattern". In the case of our web pages, it is a file into which the four basic HTML tags and some text have been entered which will eventually become your HTML document.
Following the instructions below will take you through the steps for creating a reusable template and turning that template into an HTML document and your very first web page.
Step 1: Create a new folder or directory on your computer and name it "HTML" or "html":
Step 2: Start a new (blank) file in your "text editor" -- (Notepad for Windows users, SimpleText for MAC users). Notepad that comes on a MacIntosh is "not" the same program as that for Windows and should not be used. SimpleText is the program used for writing HTML with a MAC. MAC users see the Mac Supplement in part 5 of this lesson for instructions on finding SimpleText on your computer. For Windows users, click on Start/Programs/Accessories/Notepad to start Notpad. "Untitled" will show on the top bar or select File/New.
This basic "template" can be used for creating all of your web pages in this class. Type the series of HTML tags below into the blank document which you will create in your text editor. Be sure they are in the exact order shown below. You may choose to "copy and paste" the tags into your blank document.
Note that each tag set has an "opening" tag, created by surrounding the word/letter(s) which comprise the HTML command by angle brackets and a "closing" tag created by surrounding the words or letter(s) which comprise the HTML command by angle brackets AND placing a forward slash "/" in front of the word/letter(s).
OPENING TAGS: (i.e. <HTML> , <HEAD>, <TITLE> and <BODY> ) are placed directly before the area which is to be altered/formatted, to instruct the browser to begin displaying the text in the manner indicated in the tag.
CLOSING TAGS: (i.e.</TITLE>, </HEAD>, </BODY> and </HTML> ) are placed at the end of the area which is being altered/formatted, to instruct the browser to STOP displaying text in the manner indicated in the tag.
When you begin writing HTML it is going to be helpful to think of tags as being "containers" with each set enclosing a particular part of the HTML document. It is essential to remember to type both the opening and closing parts of each HTML tag unless it is specified that the tag has no closing half. (There are some tags which do not have second halves.) If you leave a tag "open", it will continue to alter or format the text which comes after it even though that was not your intention and can give some very bizarre results! It is also important not to forget to type one of the angle brackets on either half of the tag set. Leaving a bracket off can prevent the intended effect from occurring or can also cause odd results.
What you have just created might be thought of as the "inside" of an HTML document. The tags shown here are the "basic tags" which allow the browser to read the page as HTML. If you are in Notepad, you will see the tags you typed and "Untitled" at the top as you have not yet given your file a name.
Step 4: Now, save this file as "template.txt" into the HTML folder/directory which you just created in Step 1. The .txt extension is the normal extension for a plain text file such as the one just created in Notepad or SimpleText. DO NOT include the quotes as part of the filenames used in the lesson. You will be able to use this template as a starting point for all of your web pages since it holds the basic information for an HTML document. You will never upload this template.txt file or any .txt file to your server (more on that later).
The Mac Supplement of this lesson gives the steps for Macintosh users to create a new folder and start the template using SimpleText for Creating A First Web Page.Creating Your First Web Page
Now that you have a template.txt file, we will use that same file for you to start your Virtual Notebook. As in a regular classroom, your "Virtual Notebook" will hold your notes, assignments, thoughts about your web page, etc. Each week, you will add a new page to display your practice assignments.
Step 5: Open the template file, (template.txt), usually clicking on the file in Windows Explorer will open it. Remember that you are opening your file in your text editor.
When you open your file, you will again see your tags typed out.
(In the event your tags all appear on the same line, space them out manually, leaving a line between each. It's a harmless but sometimes annoying circumstance that occasionally occurs.
Step 6: Between the opening <TITLE> tag and the closing </TITLE> tag type a "title" for your web page. (We will discuss how to pick a good title later in the lesson, for now, we'll name it Otter's Virtual Notebook (replacing "Otter" with your name or nickname). Then between the opening <BODY> tag and the closing </BODY> tag type some text to view on the web page.
Now you will save the template.txt file as an HTML file and create a page which can be read in the browser. Since this is the first page of your Virtual Notebook, call it: notebook1.html
Go to the text menu on your text editor and select: FILE, then SAVE AS or the equivalent. (It may vary somewhat on different programs or operating systems.) A prompt box should appear. You will need to make sure that the file is going to be saved into the " HTML" directory which you created earlier. This is the same directory in which you
saved the original template.txt file. If that directory is not indicated, navigate through your directories until it is open
and is indicated as the place the document will be saved. Once you have done this, look near the bottom of
the prompt box. In the box there is a space for a "File Name" and another which says "Save as type" . In the "File Name" type "notebook1.html" and in "Save as type" select the " All files" option. Now click the SAVE button on the box. The file should save as a HTML document.
Tip: When editing a web page on your PC, remember to "save it often" in case your computer freezes, crashes or the power goes out. If you have "saved" the new information, it will still be there when you are able to open Notepad again! It also makes it easier to find errors if you have them!
NOTE: Again, the procedure for saving files is different on different systems. If the procedure does not work, follow the procedure you would normally follow to save a file. Just remember to save the file with the extension .html or if you are limited to 3 character extensions like those using Window 3.x use the extension .htm instead.
Now, look in your HTML directory using the program on your computer to manage your files (Windows Explorer or My Computer for WIN 95/98). You should now see TWO files there. One named "template.txt" and one named "notebook1.html". If you double click on template.txt and open the file, the only thing that you should see is the basic original "tag set" with nothing else added. This is because after you added information for your web page, you saved it by another name -- "notebook1.html" which is an HTML file and is read by a browser. A .txt file will usually be read by Notepad (there are exceptions which we won't get into now!)
Open the file named "notebook1.html". It should appear with a version of the symbol for Netscape (or Internet Explorer) on the icon. (Note that Win 3.11 users will not have this symbol for a browser but rather will see the icon for a text file and the file by name as notebook1.html in File Manager.)
Double clicking on "notebook1.html" in Windows Explorer (do not confuse this program with Internet Explorer, the browser) should open your web browser and display the file as a web page (the HTML tags should not show) with a line of plain black text that you typed between the <BODY> </BODY> tags on a gray or white background (the "REAL" default background color for web pages is gray, if you have not altered the background color with the information you will learn later! The difference here, is caused by a setting in the BROWSER which allows you to see the background as white.) You will also see the template "title" that you placed between the <TITLE> </TITLE> tags at the top of the browser window (not in the browser window). The location/address of the file on your computer will be in the "Location" bar -- this will show your URL after you upload your web page to the Internet.
Look at the screen capture illustration below and see where the placement of the different tags and objects appear on your browser window:
The FAQ in part 3 of this lesson describes another way to view your HTML file as a web page by launching your browser first. Select the File options from the browser menu to Open your File or Page; browse to choose your file in your HTML folder on your computer and open it. Eagle's directions explain this method more clearly.
You have now created your first web page. Simple as it may be, it is capable of being read by any web browser and could theoretically be uploaded to a web server!
Even worse, some browsers will not even be able to locate a page or graphic with spaces in the filename. The filename in this example should be notebook1.html and NOT as two words notebook 1.html which Win95 or Mac users might be tempted to try.Editing Your Page Once it is Created
Well, it's probably not hard to guess that once your "first page" is complete, you will want to get back into it and edit. That is, to add things and change things. In fact, you will need to do that to complete the assignment and quiz later in the lesson!
As with many things in computing, the exact ways to accomplish this differ from computer to computer. You may have to adapt these suggestions slightly to have it work for you. You will use your TEXT EDITING program -- either NotePad or SimpleText for MAC.
Method 1: One way to edit your page will work the same way through all operating systems. You may recall from the description of saving the text document as an HTML page, that when you save the document with the .html extension you are left with TWO files in your directory. One of these is the text document and the other the web page. It is possible to continue to use the text document itself to continue the additions to the page. Open the text document and make your updates and additions, then save it as a text document. NEXT, use the "SAVE AS" procedure described above to save the document as "notebook1.html" Each time you save the text document as "notebook1.html", you will be warned by the computer that there is already a file with that name and requested to decide if you want to overwrite (update) it. By indicating "Yes" or "Okay to Overwrite", you will update your web page.
The disadvantage to this method is that it requires you to keep two different documents for each web page you have. If your web site contains five different pages, you will have to keep five different documents and even though text documents take up little space on your computer, hassling with multiple files can be annoying.
Method 2: The better alternative is to open up the .html document and edit the code inside. This is the preferred method as it only requires keeping track of one file per page. Opening the file so that it can be edited can be achieved in more than one way. Both of the ways described here work for Windows 95. You may have to experiment to determine how you find it easiest to open .html files for editing.
The simplest way to open a file is open the text editing application in which you created the original page --such as Windows Notepad. Under the first text menu option at the top is FILE, select file and when the drop down menu opens select the OPEN option. Look for your HTML directory and your HTML file. You might need to click on a drop down box for the list of files to select all files *.*. It will open in NOTEPAD and can then be edited. Just remember to follow the same procedure for saving the template to HTML.
Method 3: In Windows 95/98, locate and highlight your file using Windows Explorer. Right click your mouse at the same time as hitting the "Shift" key. This will open up a drop down menu on which one of the options is "Open With". When you select this option, you will see a list of applications from which to choose. Scroll down the list and select Notepad from the list. Do your editing or additions and save the document.
Note: When you open this box to scroll, there is a checkbox which offers the option to "always open files of this type with this application". You should be sure the box is NOT checked, otherwise it might cause your web pages to be opened by Notepad.
Once your changes are made, you should be able to click on the icon for the web page and view them in your browser -- if your browser is already opened, click on the Refresh or Reload button in the top task bar to see your changes.
Looking back at your template and the examples above you can see that HTML, for the most part, is written using SETS of what are called TAGS:
<HTML>Each of these "tag sets" are used only once per web page! It is a very good idea to recognize these four tag sets and to be able to set up a page on your own with these basic tags since they represent the backbone of all HTML pages.
The Four Tags in Detail
Let's take a closer look at what each of these tags does and why they need to be included on the web page.
The first tag which we will cover is the:<HTML> </HTML> tag set --
This tag's function is to let the browser know that the document it is looking at is written in HTML so that it can display it properly.Directly after the opening <HTML> tag you will most often find
</HEAD> tag set:
The <TITLE> </TITLE> tag set:
The <TITLE> </TITLE> tag set is one which often confuses those unfamiliar with HTML. Its name sounds as though you would expect to see it at the beginning of the web page in big bold letters! After all that's where you would find a BOOK title.The final tag set which is part of the "big four" is the:
Continue on to:
Lesson 1 Part 2: Creating Your First Web Page (2)
Lesson 1 Part 3: Frequently Asked Questions About This Class
Lesson 1 Part 4: Online Resources, Books, Free Web Space
Lesson 1 Part 5: MAC Supplement -- Creating a First Web Page
Introduction and Class Syllabus
Copyright ©2002 Virtual University. All Rights Reserved