Go to Virtual University Campus Menu

MENU
Lesson Index
Bulletin Board
Your Desk

 

1 Creating Your First Web Page
(Part 2)

Click to view a topic or simply scroll down the page
Welcome to Lesson 1 Part 2
Ten Tips for Foolproof HTML
Lesson 1 Assignment


Welcome to Lesson 1 Part 2
It's easy:   You now have the key to creating a web page with just four basic tags! As noted in Lesson 1 Part 1, typing in the four tag sets below in the proper order or copying and pasting these tags will allow you to create a web page.

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

Save this file with the tags as "template.txt" using your text editor (Notepad for Window's users or SimpleText for MAC users). Now open your "template.txt" file and add in your title and text and save the page as an HTML file. Be sure to use a file name that is one word followed by .html --- oneword.html
To view your work, simply find your HTML folder in your directory, open it and click on oneword.html to open the page in your browser.

If there is anything that is unclear and/or you cannot get your page created, please copy and paste your HTML code and post your question on the class Bulletin Board or send email to the instructors at html@VU.org.

Note:  If something is not working, you will get help more quickly by copying the lines with the HTML tags you are using and then pasting them into the bulletin board or email message. Please do not send attachments with your email, the VU server will delete them.

Back to Lesson Table of Contents

Ten Tips for Foolproof HTML
Note:  While some of these concepts are regarding areas to be covered later in the class, it's a good idea to keep these in mind and to utilize these tips from the outset so that your HTML writing experiences will be trouble free! The meaning and significance of some of these will become clearer as more material is covered during class.

  1. The single MOST important HTML tip or trick you will ever get is "BE CONSISTENT."   Establishing consistent HTML writing habits and sticking with them from the very beginning will help you write HTML that rarely goes wrong and is far easier to debug if a problem occurs. As your HTML skills progress and your pages become more complicated, the more consistency you are able to maintain, the less you will find yourself scratching your head over some odd result!

  2. Place all information which you want displayed on the page BETWEEN the opening <BODY> and closing </BODY> tags. While some browsers MAY display the text if placed elsewhere, it is incorrect and the results are wildly erratic!
    Remember:
    • Each of these "tag sets" are used only once per web page!
    • The <HTML> must always open the page and the </HTML> tag must ALWAYS always close the page.
    • The information in the TITLE tag set "cannot" be modified by other HTML tags.
    • The <BODY> </BODY> tag set is used only once on each web page!

  3. Avoid overlapping HTML tags. The tag that was used last should be the first one closed.   If the tags are closed out of order, it can cause certain browsers to display the results incorrectly. Most commonly, the result of overlapping tags will be the continuation of one of the style effects, even "after" the closing tag -- such as an entire page displayed in BOLD text when only a few words in bold were intended!

    EXAMPLE:

    To create both bold and italicized text, both the <B> and the <I> tag sets are used:

    • Using the <B></B> tag set creates BOLD text.

    • The <I></I> tag set creates italicized text.

    In this example, in order to assure the correct style is applied, since the opening <I> tag is the last tag typed, the closing half of the tag set </I> is the first to be used to stop the effect.

    Correct Usage:
    <B><I> Bold, Italicized Text</I></B>

    Incorrect Usage:
    <B><I> Bold, Italicized Text</B></I>

  4. Write your HTML tags in either all lowercase letters or ALL UPPERCASE LETTERS. Some style mavens prefer the all uppercase convention, but since browsers read either, what really matters is that you stick to one or the other. This will also make it easier to find errors when editing.

  5. Make sure you use both the "opening" and "closing" tags for each element, unless you know for sure that no closing tag is needed. Remember to think of HTML tags as containers.

  6. Place each MAIN tag, such as the four basic tags, and any tags which format the page on a line of its own.

    These tags include those which begin paragraphs, set apart headings, place an image on a page, start tables etc. Doing this makes it easier to edit your HTML documents. Some designers also prefer to space down a line between these tags to further ease editing. Be aware that these "empty space lines" add more bytes to your page and may slow the download time! It is not necessary to place tags which add style to the text on separate lines (for example the tag which makes text bold or the one for italics).

  7. Establish a precedent of always using the ALT attribute and the HEIGHT and WIDTH attributes in your image tags. The ALT attribute gives the viewer the description of the graphic in the alternative text if the image is not displayed by the browser. This can be important if the person viewing your page is using speech recognition software to read the page or if the browser has images turned off. Using the HEIGHT and WIDTH attributes, helps the images load faster, allowing your viewers to get the effect you intended in a more reasonable amount of time. More about this in Week 4 when we discuss graphics.

  8. Surround ALL values for your attributes with "quotation marks".   While technically only values with characters other than letters and numbers REQUIRE the quotation marks around them, if you ALWAYS use them you can never go wrong!

  9. Don't create multiple instances of tags which have multiple attributes. A tag which frequently confuses new web page makers is the opening <BODY> tag. This tag can be altered in several ways by adding multiple attributes, but you only need to use the opening <BODY> tag once to display ALL the attributes. The <BODY> tag, for example, can contain attributes for background color (BGCOLOR) and for text color (TEXT). In order to create a page with a black background and white text, you need only create a "single opening" <BODY> tag and include the BGCOLOR and the TEXT attributes within the opening <BODY> tag.

    EXAMPLE:
    <BODY BGCOLOR="#000000" TEXT="#FFFFFF">

  10. Don't carry style tags over paragraph changes. For example: If you wish to create bold text and want that bold text to carry over several paragraphs, open and close the tags which create bold text with every paragraph.

    A BONUS TIP!

  11. View the SOURCE...   Depending on which browser you are using, on the text menu at the top of your browser look under the EDIT or VIEW selection and you will see a selection called "View Document Source", "Document Source" "Page Source" or "Source" to select. If you do not find this in your menu, it may also be possible to right-click on a page with your mouse (Mac users click and hold) and then select this option from the pop-up menu. Clicking on this allows you to look at the HTML code used to create ANY web page. You can use this technique to see exactly how the page designer created a particular effect. This way you can teach yourself almost anything you find on the web by carefully examining the code. Due to copyright laws, it is illegal for you to "copy and use" any part of the HTML information that you find when viewing the source without specific permission from the author.

Back to Lesson Table of Contents

Lesson 1 Assignment
Assignment   --   Part 1:
The first assignment of the class will be to create the first page of your "Virtual Notebook" for this class. For now, you will be keeping this "Notebook" on your own computer and use it to practice your lessons, assignments and other class related notes. Think of it as a notebook that you would keep in a regular class room -- keep notes in it, develop ideas, practice new projects, etc.   As you develop your notebook and experiment with tags and effects, you will become familiar with what is possible and how a web page can look when you use your browser to view it.

Modify the template or create a new file with the four basic tags and save the file as .html using the procedure described in the lesson:  name the new file notebook1.html . Be sure to give your page a title. Store your new "Notebook" in the HTML folder.

Write a few lines in your new "Notebook". These lines go after your opening <BODY> and before your closing </BODY> tag.

Begin developing your ideas for your personal web page. Do you have a topic? How do you want it to look? Record your beginning ideas in your HTML Notebook.

Look at web pages that others have made. Find and record the URL of one page which you like a lot in your notebook. Indicate WHY you like the page.

Assignment   --   Part 2:
Perform the following exercises in your Virtual Notebook. You should be able to add these tags to give your page a little style. The tags will be covered in more detail in upcoming lessons. After adding new tags or making changes to your file in your text editor, remember to save them as the .html name that you gave your file (  notebook1.html  )

NOTE:
You will need to RELOAD or REFRESH your page, if it is already opened in your browser, to view the changes on your web page.

  1. Change the color of the background of your virtual notebook page by adding the BGCOLOR attribute to the opening BODY tag.

    EXAMPLE:
    To create a light aqua blue background color, the BODY tag should look like this:

    <BODY BGCOLOR="#CCFFFF">

    Notice the BGCOLOR attribute is inside of the opening <BODY> tag. There is a space between the <BODY> tag and the BGCOLOR attribute. Then the BGCOLOR attribute is followed by a = (equals sign) and the color begins with a # sign followed by 6 letters and enclosed in "quotes".

    Once you have accomplished this, you might decide to change the background to a different color after viewing the lesson material next week.

  2. Use the <BR> (LINE BREAK) tag to separate at least one line in your notebook. This tag and the ones following should "only" be used after the opening <BODY> tag.

    The <BR> tag creates a new line, just like hitting return on a word processor.

    EXAMPLE:

    This is the first line.
    This is the second line divided by the line break caused by inserting the <BR> tag.
    No closing tag is needed with the <BR> tag.

  3. Use the <P> </P> (PARAGRAPH) tags to separate two paragraphs in your notebook.

    This tag creates a line break with an extra line between the two lines -- equivalent to double spacing on your word processor.

    EXAMPLE:

    This is the first paragraph. Type your text after the opening <P>. Use the closing </P> after the text of your paragraph.

    This second paragraph was created by inserting the <P> </P> tag set. Compare the space between the lines to the <BR> tag example above. While the closing tag (</P>) is not specifically required, it is best to use it in most cases at the end text for your paragraph -- especially important when you get to more advanced HTML.

  4. Use the <CENTER> </CENTER> tag set to center some text in your notebook.

    EXAMPLE:

    The effect of the <CENTER> </CENTER> tag set is demonstrated here.

  5. Use the <H1> </H1> tag set in your notebook to create a heading on your page.

    This example creates the largest heading. Place some text between it at the top of your page for a headline effect. It goes "after" the opening <BODY> tag and frequently will have the same words that you use for the title of your page in the TITLE tag. The difference is that the words will be viewed in the "contents" of your page while the words in the <TITLE> </TITLE> display at the top of your browser and are what is bookmarked.

    Do not make the mistake many do when learning HTML, that because the tag is for creating a "heading" that it belongs within the <HEAD> tag set:
    It should not be placed there! It goes after the opening <BODY> tag!

    EXAMPLE:

    This is a level 1 <H1> heading



Now that I have completed my assignments, how do I get "graded"?
At this time, the assignments presented in the lessons are for you to practice in your "Virtual Notebook" and do not need to be submitted to the Instructor for review. But on the final exam, you may be asked to demonstrate the ability to do some of these tasks. The main object of this class is to create a web page. In future lessons you may encounter similar assignments and quizzes as well as the more traditional variety of quizzes with questions which require answers and perhaps assignments which require research on the WWW.

Unless otherwise noted, the assignments are "self-grading" and do not need to be turned in. You may discuss the assignments on the classroom Bulletin Board and compare notes.

If at any time you would like your work reviewed, copy and paste your HTML code (or URL) to the class Bulletin Board so we can see your work and give suggestions for improvement.

Back to Lesson Table of Contents


Continue on to:
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

Return to:
Introduction and Class Syllabus
Lesson 1 Part 1:  Creating Your First Web Page

GO TO Top of Page
Lesson Index
Your Desk

Copyright ©2002 Virtual University. All Rights Reserved