In: Categories » Internet and online » Web design tips » Specifying Page Settings, Tables and frames
The following sections explain the importance of page settings screen size considerations, page length, and page layout to control how your pages look in a Web browser.
Screen size considerations
Most computer users are used to scrolling up and down to view pages that are longer than the height of the screen. But few users like to scroll left and right to view pages that are too wide. To avoid horizontal scrolling, design your pages so that they fit within the width of the screen. If you want to target users who run their computers with 800 x 600 screen resolution (which accounts for almost all users now that 15-inch and larger monitors are commonplace), shoot for 780 as the maximum page width. If your pages consist entirely of text, you don’t have to worry about screen size because the user’s Web browser automatically adjusts text lines to fit the width of the screen. The only time you have to worry about page width is when you are creating a page that includes elements that have a fixed width, such as tables, images, or frames. The following list explains how to adjust the width for those three elements:
- Tables: Set the overall width of a table by using the WIDTH attribute in the <TABLE> tag, like this:
<TABLE WIDTH=”620”>
- Images: The size of the image determines how wide the image appears on the page. If the image is too wide, you can change the width by using the WIDTH attribute in the <IMG> tag:
<IMG SRC=”chick.gif” WIDTH=”200”>
- Frames: Set the width of side-by-side frames by using the columns (COLS) attribute in the <FRAMESET> tag.
Page length
Even though most users don’t mind scrolling down to see pages that are longer than the height of the screen, you should still limit the length of your pages. As a general rule, try to limit your pages to two or three times the height of the screen about the same amount of information that could be printed on a single 81⁄2-x-11-inch sheet of paper.
Page layout
The best way to create an effective design for your Web pages is to set up a basic grid of common elements that will appear in the same or a similar arrangement on all your pages. The following list indicates some of the elements you may need to include in your Web design grid. (Depending on the content of your site, you may not need to provide all these elements.)
- Header area: The header area appears at the top of each page, indicating the site title, page title, company name, site navigation buttons, and any other elements that you want to place at the top of each page.
- Footer area: The footer area appears at the bottom of each page, possibly including contact information, a copyright notice, and navigation buttons.
- Main text area: This area contains the main text and illustrations for each page.
- Sidebar area: A sidebar occupies a vertical band on the left or right portion of each page. This area can contain elements such as a table of contents or menu for the site.
Working with Backgrounds
When creating Web pages, don’t make the mistake of using a garish background image that makes your page almost impossible to read. If you want to use a background image for your pages, choose an image that doesn’t interfere with the text and other elements on the page.
Setting the background color
To set the background color of your Web page, follow these steps:
1. Add the background color (BGCOLOR) attribute to the <BODY> tag.
2. Type a color name for the BGCOLOR attribute. For example:
<BODY BGCOLOR=”WHITE”>
For more information about using color, see “Color,” earlier in this article.
Using a background image
To use a background image for your Web page, follow these steps:
1. Add the BACKGROUND attribute to the <BODY> tag.
2. Type the name of the image file you want to use for the background as the BACKGROUND attribute value, like this:
<BODY BACKGROUND=”bgpic.gif”>
The background image repeats as many times as necessary to fill the page. As a result, the background image file doesn’t have to be very large.
Adding Links
Links are an integral part of any Web page. Links let your reader travel to a different location, which can be a part of the same HTML document, a different page located on your Web site, or a page from a different Web site located elsewhere on the Internet. All the user has to do to be transported to a different page is click the link.
Using text links
A text link is a portion of text that someone viewing your page can click to jump to another location. To create a text link, follow these steps:
1. Determine the address of the page that you want the link to jump to.
2. Type an <A> tag where you want the link to appear on the page. In the <A> tag, use an HREF attribute to indicate the address of the page that you want to link to. For example:
<A HREF=”http://www.google.com”>
3. After the <A> tag, type the text that you want to appear in your document as a link and add a closing </A> tag, like this:
<A HREF=”http://www.google.com”>The Official For google Web Page</A>
The text that appears between <A> and </A> is called the anchor. The Web address that appears in the HREF attribute is called the target. The anchor text is displayed on the Web page in a special color (usually blue) and is underlined so that the person viewing the page knows that the text is a link. If the target refers to another page at the same Web site as the page the link appears on, you can use just the filename as the target. Always enclose the filename or URL in quotation marks. For example:
<A HREF=”emerald7.html”>See the Wizard</A>
When a user clicks the See the Wizard link, the HTML file named emerald7.html appears on-screen.
Using graphic links
An image link is a graphic image that a user can click to jump to another page or a different location on the current page. To create an image link, follow the procedure described in the preceding section, “Using text links.” But in Step 3, instead of typing text for the link, type an <IMG> tag that contains an SRC attribute that identifies the image file to use for the link. For example:
<A HREF=”emerald7.html”><IMG SRC=”emerald.gif”></A>
In this example, the graphic image file named emerald.gif appears onscreen. If a user clicks it, the browser displays the emerald7.html page.
Linking within the same page
To create a link that simply moves the user to another location on the same page, follow these steps:
1. Assign a name to the section that you want to link to by adding an <A> tag with the NAME attribute to the first HTML line of that section. Immediately follow the <A> tag with an </A> end tag.
2. Create a text or graphic link to that section, typing the section name preceded by the # symbol in the HREF attribute. Here is an example of an <A> tag that assigns a name to a location in a document:
<A NAME=”Here”></A>
Here is a snippet of HTML that creates a link that jumps to the location named “Here”:
<A HREF=”#Here”>Go over there!</A>
legal notice
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
Useful tools and features
If you like this article (tutorial), please link to it from your web page using the information above.