Questy's Learning Area, tutorials and lessons

Building a better web site ...

Questy's, Web Page Layout

Green & Purple line, Questy's Colors!

Before you start, let's look at some final considerations...

Avoid Overlapping Tags... Absolutely the most common HTML mistake....

<tag1>This is an example <tag2> sentence</tag1> of HTML tags.</tag2>
The word overlapping is contained within both the <tag1> and <tag2> tags. A browser might be confused by this coding and might not display it the way you intend.

In general, avoid overlapping tags. Look at your tags and try pairing them up. Tags should be paired without an intervening tag in between. Look again at the example, but now corrected:
<tag1>This is an example <tag2> sentence</tag2> of HTML tags.</tag1>

Remember that browsers can be forgiving when displaying improperly coded files. But that forgiveness may not last to the next version of the software! When in doubt, code your files according to the HTML specifications

Validate Your Code / Browsers Differ

Web browsers display HTML elements differently. Remember that not all codes used in HTML files are interpreted by all browsers. Any code a browser does not understand is usually ignored though.

You could spend a lot of time making your file "look perfect" using your current browser. If you check that file using another browser, it will likely display (a little or a lot) differently. Hence these words of advice: code your files using correct HTML. Leave the interpreting to the browsers and hope for the best.

You can run your coded files through an HTML validation service that will tell you if your code conforms to accepted HTML. If you are not sure your coding conforms to HTML specifications, this can be a useful teaching tool. Fortunately the service lets you select the level of conformance you want for your files (i.e., strict, level 2, level 3). If you want to use some codes that are not officially part of the HTML specifications, this latitude is helpful.

Now that you've had a look at the basics, it's time to start playing....

For your first assignment, Keep it simple. DON'T use tags we haven't covered or over do background or text colors, images, or tables.

Practice the process for "creating from scratch", and create your templates

Open up notepad. The reason we use note pad is we want a "text only" file, (or ASCII). Type in the above text, (the minimal HTML document from the above section) exactly as it appears. Save the file (make sure it's text only) as sample.htm Open your browser Open the file "yourname.htm" in your browser

To view the actual HTML of a page from your browser, click VIEW and then click SOURCE

Helpful hint: save the basic template. With each addition or revision from the basic template do a "save as" from note pad or your editor. Such as file1.htm, then file2.htm. Any time you are experimenting, save versions with different file names so you can back track, just in case you don't like what you've changed.

The inverted pyramid style presents concise information upfront and provides a link for the user to learn more detailed information. This page layout style is common in newspapers, but also lends itself to Web page development because it allows the user to see many pieces of information in a limited viewing area. The user decides which piece of information they would like to learn more about, which keeps the user from having to view unnecessary Web pages.

Web page layouts can by classified by the placement of navigational components. Navigation that is placed along the left- and top-hand side of a window is known as a distributed left- and top-margin layout. This layout is the most commonly used layout.

While in our classes we usually design for a standard of 800 x 600, many cerifications still suggest that web designers should design for a screen resolution of 640 X 480. Designing for this screen resolution means that users will not have to do as much scrolling as a higher resolution could require. Users are unlikely to scroll either down or to the right, which means they could miss some of the contents of the Web page. Designing for a low screen resolution is a precautionary measure to safeguard against unnecessary scrolling.

The maximum file size guideline is 34 KB for a 10 second download time using a modem connection. Following this guideline means that modem users should be able to download a file within 10 seconds. Files that are larger in size risk taking longer to download, which could mean losing the user's attention. Ideally, Web designers should create pages that do not take longer than 10 seconds to load.

HTML Tables vs. Frames

I personally do not use frames. You will not see many websites using frame, that should be some indication that the risks of using them outweight the benefits. The main reason for using frames is you can keep one section static, for example, Contact Information that you would like to keep constantly visible

While frames are useful, below are some points to consider before using them:

1.Inexperienced users find them confusing.
2.Browser space, which is already limited, feels even more confined
3.Accessibility options need to be coded to make the site accessible to disabled users.
4.Tables can be easily bookmarked. Frames cannot. Bookmarks often get set to the wrong frame.
5.For the same reason that frames confuse bookmarks, they also tend to confuse webbots and spiders, the cyber-gizmos that collect data for search engines, and cause pages not to get indexed. (This reason alone is enough for me not to want to use frames!)

To continue your studies on HTML and web page building the next section is this series is the graphics section. For more on adding color and images to your web site check out the graphics section, and graphics links pages.
Also be sure to check out the Browser Safe Color Palette.

Also be sure to check out this page on Learning HTML Recommended Reading.

Next, learn about graphics...Next, learn about graphics

Welcome to Questy's World

Welcome to the World of Questy

Welcome to the World of Questy -- The World of Questy Sites are currrently undergoing a major overhaul. Stay tuned for updated links and news in 2008!

Unless otherwise credited all photos and graphics are the copyrighted property of Questy aka Tom Peracchio. Unauthorized reproduction of any of the pages of this web site is illegal, not to mention rude.
- Copyright 1990 through 2008 -