Free Website | free host | Free Web Page | BlueHost Review  

  Free Website | free host | Free Web Page | BlueHost Review  

Sharol's Virtual Notebook

This is my Virtual Notebook for "Web Page Design For Beginners"
I am going to record very usefull note from class that I feel are important.
All lessons are the original work of Jean Engel (Ghatten). They are her exact words and not my creation.

(If you are interested in learning more about what the Virtual University has to offer you Click here )

      Use of the HEAD tag also creates a line break with an extra line above and below the heading, similar to the paragraph tag. It goes between the HTML and BODY tags. Even though you have an extra blank line after your heading, you should still use the paragraph tag set for a paragraph that you start underneath your heading.

      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. For the same reason, do not use any spaces in the names for subdirectories.

TEN TIPS TO FOOL-PROOF HTML:

  1. The single MOST important HTML tip or trick you will ever get is BE CONSISTENT.
  2. Place all information which you want displayed on the page BETWEEN the opening BODY and closing /BODY tags.
  3. Avoid overlapping HTML tags. The tag that was used last should be the first one closed.
  4. Write your HTML tags in either all lowercase letters or ALL UPPERCASE LETTERS.
  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.
  7. Establish a precedent of always using the ALT attribute and the HEIGHT and WIDTH attributes in your image tags.
  8. Surround ALL values for your attributes with "quotation" marks.
  9. Don't create multiple instances of tags which have multiple attributes.
  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.

WEEK 2 BEGINS NOW


      Because ALIGN= is an attribute, it cannot be used alone and must be used in conjunction with a tag. Remember, if you use the P tag this way, the "closing" /P tag must be used to "reset" the alignment of text on the rest of the page! If you don't use an ALIGN= attribute with the P tag, the paragraph will automatically "default" to the left margin.

      Be sure to leave a "space" between the FONT tag and the COLOR attribute. The COLOR is made up of 6 numbers/letters and should begin with a # sign and be enclosed within "quotes": This is blue.

      Font sizes range from 1-7 with size 3 being default and 7 being the largest. This is color blue, size 3.

      Following are two lists of fonts that can be used with relative assurance for viewing on Windows and on Mac operating systems: Mac Fonts: Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol, Times, Zapf Dingbats. Windows Fonts: Arial, Comic Sans MS, Courier New, Modern, MS Sans Serif, Symbol, Times New Roman, Wingdings. This list does not contain any identical fonts for MACs and PCs -- these are only "similar" fonts -- keep that in mind when designing your page.

      When changing the "value" of more than one "attribute", all of the changes should be added to the SAME BODY tag and a space should be left before each attribute.

      This attribute specifies the color of the text on the entire page and can only be used in the opening body tag. This is an overall change and "can only be done once" on a page when using the TEXT attribute. BODY BGCOLOR="#FFFFFF" BACKGROUND="imagename.gif" TEXT="#FFFFFF" -- will create white text on the page.

      LINK Changes the color of the links you have on your page BEFORE a visitor to your page "clicks" on them. ALINK Changes the color of an Active Link, or how a link looks when it is being clicked on. VLINK Changes the color of a Visited Link, or how a link looks to the guest if they have already been to that site.

The values for some commonly used colors are below. Remember to include the "#" before the color value and to enclose the entire section in "quotation" marks. It is ALWAYS a number '0' zero and NEVER a capital 'O' for hexadecimal code.

      Also most of the newer browsers support the use of a selection of "color names" rather than the RGB values! It is still a good idea to surround the name with "quotation" marks but you need not use the "#" sign. (Example: "BLACK"). These colors include "BLACK", "WHITE", "GREEN", "MAROON", OLIVE", "NAVY", "PURPLE", "GRAY", "RED", "YELLOW", "BLUE", "TEAL", "LIME", "AQUA", "FUSHIA", and "SILVER".

      A good size image for an all-over wallpaper background is usually around "100" x "100" or less for a quick download -- the maximum would be approximately "200" x "200", although the image doesn't have to be a perfect square to create a smooth background. Border Background images as "graphics" are mostly "1280" in width, (wider than most browser windows and the best minimum width for Border Backgrounds). To create an easy Border Background using a graphics program, make a blank rectangle the same height as the graphic you are using for the border and make the width approximately "1280" or longer -- keep the height as small as possible to speed the download time. Give it a name and using the *.gif or *.jpg format.

      Hyperlinks: Use this formula to add links to your page - A HREF="http://add the URL here" Clickable text goes here /A. Links to Other Pages of Your Own: Use this formula to add clickable pages on your own site A HREF="name.html" My Second Page /A.

      Lets face it. Learning html can be a little boring at times if you’ve spent a few too many hours at it in one sitting. Some times it seems html is like NO HABLO ENGLISH. If you need a rest and want to see some pictures (©) of birds that I raised Click Me. It is my hopes to learn enough html to get those guys up on their own web page.

Please click This Link to navigate to week 2’s lesson assignment.
And click This Link to navigate to week 3’s lesson assignment.
And click This Link to navigate to week 4’s lesson assignment.

More Class Notes Soon To Come! Stay Tuned.....