Introduction

Basic Terminology

Creating the Template

Creating Your First Web Page

Editing Your Page

The Four Most Important Tags

The Four Tags in Detail

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 html@VU.org

As class begins, you will want to visit and bookmark some informative web sites created by the HTML Team members:

• Otter's Place For FAQs
  http://www.geocities.com/CollegePark/Campus/4642/otter_faqs.html
  A collection of helpful HTML, Graphics and Web Design Tutorials written by VU Instructors and students.
  
  
• Anne's World and Web Page Resources
  http://www.wwnet.net/~ahartman
  Anne reviews and collects all of the best HTML resources on the Internet.
  
  
• HTML Bits & Pieces
  http://vu.org/htmlzone/bp/
  Eagle collects and posts helpful information from the HTML class bulletin board.
  
  
• Meet the HTML Team
  http://www.geocities.com/Heartland/Hills/3111/teachers.html
  Granny-Wicked introduces the current and past instructors from the VU HTML Class.
  
  
• Class and Study Group Meeting Times
  http://www.zoniez.com/mIRC/times.html
  Zonie will post information about VU class and study group meeting times. Participation in a study group or online chat is strictly voluntary and not a requirement for this class.

Back to Lesson Table of Contents

HTML:

This stands for HyperText Markup Language. It is the basic "language" in which web pages are written. (There are others ways to write pages for the web that come into play in web page design but, for our purposes, HTML is the main attraction.) In its "standardized" form it is designed so that it can be read by all web browsers.

ANGLE BRACKETS:

These two characters < and > are formed by typing on the keyboard 'shift key comma' to produce the "less than" sign < and 'shift key period' to produce the "greater than" sign > . In HTML, they are called ANGLE BRACKETS and are used to set HTML tags off from the rest of the text on the page. All HTML tags are surrounded by these two symbols.

HTML TAGS / TAG SETS:

Tags are the way ordinary text becomes HTML. This is accomplished by placing the appropriate ANGLE BRACKET on each side of the word or letter(s) which tell the browser what to do. For example, the tag set <P> </P> is used to surround text and sets apart that text as a separate paragraph in HTML.

ATTRIBUTES:

ATTRIBUTES are words which are used within HTML tags to modify the tag in some way. Attributes are "additional instructions" for the specific HTML tag and can be used, for example, to add color or change a size in certain tags.

Attributes are placed "within" the brackets of an opening tag. For example, you will be introduced to the <BODY></BODY> tag set in this lesson. There are a number of ATTRIBUTES which can be added to this tag to alter the appearance of the web page. One of these is the ATTRIBUTE called BGCOLOR. Adding this ATTRIBUTE to the opening <BODY> tag along with a color name or number will change the background color of the page. Not all HTML tags will have ATTRIBUTES. As tags are covered in the class, appropriate ATTRIBUTES will be covered as well in many cases.

VALUES:

ATTRIBUTES are followed by VALUES. These can be words or numbers and they are used to tell the browser how to "read" the ATTRIBUTE. Surround ALL values for your attributes with "quotation" marks.

An example of the use of TAG, ATTRIBUTE and VALUE would be:

<BODY Main tag  ATTRIBUTE="Tells tag a change is coming"  VALUE="Tells attribute what the change is" >

In this example, the Attribute and Value are included within the brackets of the opening <BODY> tag -- they are not enclosed in brackets of their own.

EXAMPLE:
<BODY BGCOLOR="red">

In the example above:  
• BODY is your main tag
• BGCOLOR is the attribute saying a change in the body is coming
• ="red" (surrounded with "quotation marks") is the value that tells how the attribute is changing -- in this case, the TAG, ATTRIBUTE, and VALUE tell the browser that the background color of the web page is going to be red.

NOTE:
The ATTRIBUTE and VALUE are both within the brackets <  > of the opening <BODY> tag.

More about that later when we discuss individual HTML tags!

WEB SERVER:

For our purposes this is the computer on which your web pages will reside. WEB SERVERS can be located anywhere in the world and when connected to the Internet can be accessed by anyone with a WEB BROWSER and the URL for the specific WEB PAGE.

WEB BROWSER:

Software installed on a computer and used in conjunction with a connection to the Internet to access and view the WEB PAGES on the World Wide Web. Some of the more common browser's are: Netscape Navigator, Microsoft Internet Explorer, Mosaic and Lynx. Browsers are all able to read basic HTML but vary in other abilities such as the ability to display graphics or JavaScript.

SOFTWARE / HARDWARE:

A quick and easy definition -- Hardware includes any of the "physical aspects of computers and related devices" used to operate your computer including but not limited to "the monitor, keyboard, speakers, etc.".   Software includes many "program categories" that have been uploaded to make your computer perform in a specific way -- system software, application software, utility software, etc.  For more information, visit:
searchWebServices.com
http://searchwebservices.techtarget.com/sDefinition/0,,
sid26_gci213024,00.html

FTP:

This is short for FILE TRANSFER PROTOCOL and is one of the ways to send files from one place to another on the Internet. Again, for our purposes, it will mainly be used to refer to the way that files which make up your web page(s) are sent to the server so that they can be viewed on the web. It is similar in many ways to moving files from one folder or directory on your computer to another folder or directory. In the case of FTP, the files are transferred between TWO computers not usually located nearby.

URL:

An abbreviation of UNIFORM RESOURCE LOCATOR. Think of the URL as the "address" of a web page. Using the URL, you can locate and view a web page stored on a WEB SERVER anywhere in the world. An example is: http://vu.org. This is the URL for VU's main page.

HYPERLINKS/LINKS:

These are HTML coded locations, usually set apart by a different text color and underlining that lead you to other places on the web. Most often, links are coded so that you are taken to another URL or another portion of a large web page when they are activated by action of clicking on the words.

EXAMPLE:

This is a "link" to VU's main page: http://vu.org.

HOME PAGE:

For our purposes, the first page that is seen when you visit a particular URL or the first/main page of your web pages. Your homepage may actually consist of several different web pages all connected by LINKS!

TEXT EDITOR:

In this class we refer to a simple, basic text editing program such as NOTEPAD in the Windows environment and Simple Text on a Mac as a TEXT EDITOR.   A TEXT EDITOR is what is used in this class to write web pages. The basic TEXT EDITOR contains less pre-programmed internal "formatting" and is therefore required over more fully-featured "word processors" such as Word or Word Perfect and software specifically designed for HTML Editing.

HTML EDITING PROGRAMS/HTML EDITORS:

HTML EDITING PROGRAMS/HTML EDITORS are a type of software designed to assist in web page creation. These programs can be loosely divided into two categories:   Those which claim to allow for web page creation without knowing or even seeing any HTML tags, sometimes called WYSIWYG (What You See Is What You Get) or Graphical Editors, and those which allow the designer of the page to see and edit the HTML code directly, usually referred to as "text-based" HTML editors. Many HTML editors are available as shareware on the web and often commercial HTML editing products offer demo versions.

We will not be using any HTML editors in this class and will not answer questions regarding them as they are all different in the way they work. This class is to teach you to hand code your HTML so that you will understand what your HTML Editor is doing if you decide to use one at a later date.

WEB PAGE DIRECTORY:

A special directory or folder created on your home computer/work computer for the purpose of organizing your web page work. All of your HTML pages and images and other associated files should be stored there for easy access. The importance of storing everything in the same folder will become apparent later in the lessons as you begin to work with your web page files. For convenience purposes we are calling the directory created for this class "HTML".

DOWNLOAD:

DOWNLOADING refers to the procedure of transferring a file or files from a web server or another computer to your computer.

EXAMPLE: 
You may DOWNLOAD a program for editing graphics to use in this class.

UPLOAD:

UPLOADING means sending a file to a remote web server or to another computer from your computer.

EXAMPLE:
You will UPLOAD your web pages to a WEB SERVER.

GRAPHICS EDITOR/GRAPHICS EDITING PROGRAM:

In the instance of this class, this is software used to prepare images for use on a web page. Features of a graphics editor may include the ability to crop or trim the picture, add text, change colors etc.

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.

Back to Lesson Table of Contents

***Keeping a copy of the "reusable template" in your HTML file directory will simplify the creation of future web pages as "all of your basic tags" will be on the page. All you have to do is insert the <TITLE></TITLE> of the page and the information in the <BODY></BODY> area, then save it with a new  .html name! Since you are saving it as a  .html document, it automatically deletes the information from your "template.txt" so that you can use it over again. At a later date, if you find that you are always adding the "same" information to every web page, such as your "E-mail address", you might consider adding it to your "reusable template" so you don't have to re-type it all the time!

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":

Help With Creating Folders: 

• Folders http://vu.org/htmlzone/folder.html
  Check Zonie's directions on how to create folders in Windows Explorer for Win95/98 if you are not sure how to do this.
  Here is a mirror site of the one above in case you have trouble connecting:
  Folders: http://www.zoniez.com/Newbie/folder/folder.html
  
  
• The Mac Supplement of this lesson for Creating A First Web Page gives the instructions in step 1 to make a "new folder" on a Macintosh.

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.

 Step 3: Making Your Own Template:

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.

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

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.

Back to Lesson Table of Contents

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.

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.

Example:

<HTML>
<HEAD>
<TITLE>Otter's Virtual Notebook </TITLE>
</HEAD>
<BODY>
This will be my Virtual Notebook for "Web Page Design For Beginners"
</BODY>
</HTML>

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.

An example of the steps to save your file in Notepad is graphically illustrated by HTML Team member Eagle:   Using Basic HTML for Coding and Saving Page  http://vu.org/htmlzone/htmlbasic.html

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.

Example:

Look at the screen capture illustration below and see where the placement of the different tags and objects appear on your browser window:

1. The   <TITLE> </TITLE> tag is a bit confusing. It is not the TITLE that appears on your web page. It actually appears at the top left corner of the browser window -- in this case the <TITLE> is "Otter's Virtual Notebook". If someone bookmarks your site to visit later, this is what will show in their bookmark -- so it should be descriptive of what is on your page.
   
   
2. The URL of your page will appear in the white Location/Address bar. Currently, it shows where your file is located on your computer:  
   
   -- file:///C|/html/notebook1.html
   • The Drive -- file:///C|
   • The Folder you created -- /html/
   • The Name of your File -- notebook1.html
   
   After you upload your page to the Internet, it will give the "address"   (URL)  of where your page is located on the Internet:   http:/www.dot.com/your_page.html
   
   -- http:/www.dot.com/your_page.html
   • The Internet -- http:/www.
   • The Server where your page resides -- dot.com/
   • Your Web Site -- your_page.html
   
   
3. The   <BODY> </BODY> contains all of the information that will appear on your web page.

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.

NOTE: HTML Instructor Team Member Eagle has created "illustrated directions" which many will find is the easiest way to view your .html notebook files in your browser and help to clear up any confusion: How to Open and View Files in Internet Explorer http://vu.org/htmlzone/openingfiles.html How to Open and View Files in Netscape http://vu.org/htmlzone/openingfilesns.html

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!

Note:   It is very important to know that you should never include spaces to separate words in the "filenames" of web pages that you create as this will create problems when you upload them later.

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.

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.

Remember you may have the same file opened in two different programs: notebook1.html in your text editor where you type and save your changes and the other is notebook1.html opened and viewed in your browser.

Back to Lesson Table of Contents

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

The first tag which we will cover is the:

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.

The <HTML></HTML> tag set must ALWAYS be included! The opening <HTML> tag may NOT always be the first tag on the page, however we will cover what may come before it in a future lesson.

Between the opening <HTML> and closing </HTML> tags, is contained the entire web page -- including all the other HTML tags which make up the formatting of the page, all of the text you have written, any images included and information relating to other elements such as JavaScript, VBScript, etc.

The closing </HTML> tag is always  placed at the very end of the web page.

This completes the page and lets the web browser know that its job is complete when it has read what comes before this closing tag.

The <HEAD> portion of the HTML page is used to hold special information about the web page itself. The information contained in between the opening and closing tags of this set is not  seen on the web page. Examples of what might be contained here are META information, JavaScript information, HTML Comments and most importantly, 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 tag set <TITLE> </TITLE> works a bit differently. Though it is not seen in the "body" of the web page it is very useful for identifying your page to other browsers.

The <TITLE> </TITLE> appears at the "very top" of the web browser and is what will appear in a person's "bookmarks" or "favorites" file if they select your page as one of these while browsing and wish to return to it. If you look at the VERY top of your web browser now, you will see the TITLE of this lesson is 1.1 ~ Week 1: Creating Your First Web Page (Part 1)

If you bookmark this lesson, then look in your bookmark file, you will see this TITLE there. It's a good idea to make the titles of your web pages brief and descriptive. If someone bookmarks your page, what you have put there should describe the "content" of your page well enough that they would remember what is on it a month later!

Example :
"My Cooking Page" would be a poor title for a web page. The person who had bookmarked my page would know the page was about cooking but not much more and the person might not return to my page. However, if I titled my page "Ten Great Italian Recipes", chances are they would say "Ah yes, now I remember!" and return to the page to grab my recipe for Four Cheese Lasagna!

The information in the TITLE tag set "cannot" be modified by other HTML tags. What this means is that you cannot format the text in the title. Only basic text is allowed. If you try to add other HTML tags to a title, you will actually SEE the HTML tags in it and not  the desired effect!!. The example below shows what you do not want to do.

The contents of the TITLE tag are the only information which is contained within the HEAD tag set of the document which can be seen when someone views your web site!

<BODY>
</BODY>   --
In HTML, when we refer to the contents of the BODY of the web page, we are referring to EVERYTHING  you see on the web page itself when it is displayed in the browser. The BODY also contains any HTML tags that are used to format that text and any images or other additions such as HTML which will allow sound to play on the page. If you want to give your page a HEADING which will be seen on the web page it will go between the <BODY> </BODY> tag set. If you want to place the HTML code to display a picture of your granddaughter or of your favorite movie star, it goes in between the opening and closing BODY tags. The information placed between these tags can be said to actually constitute the web page itself!!

NOTE:
The <BODY> </BODY> tag set is used only once on each web page!

GO TO

Top of Page

Lesson Index

Your Desk

Copyright ©2002 Virtual University. All Rights Reserved