![]() |
Building a better web site ... Questy's, Web Page Layout |
|
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> 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: 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. 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 this page on Learning HTML Recommended Reading. |
|
|
|
![]() |
Welcome
to the World of Questy |