Basic Elements of a Company’s Web Site - HTML 4

As you consider creating a company’s Web site, keep in mind the following basic elements that you typically want to include in your site. Our site consists of six files:

  1. The initial Web page, index.html, is the site’s home page. It contains the basic marketing message about the company and its products.
  2. A site’s home page can have any of a variety of file names, such as index.html, default.html, and home.html. You want to check with your Webmaster or your Web-hosting provider to determine the exact filename you should use. However, in general, the filename index.html will almost always work.
  3. The products page, products.html, contains summary information about each of the company’s products.
  4. The contact us page, contact.html, contains a form that the visitor can fill out in order to give his or her opinion to the company.
  5. The press page, press.html, contains
    • Links to the press releases generated by the company
    • Information that marketing thinks members of the press might want
  6. This page isn’t discussed in the rest of the chapter, but you can easily modify the basic HTML template discussed for the other site pages to create this unique page.
  7. An image, building.gif, is displayed on the site’s home page to give visitors the initial impression of the company and its site. This could be any image, from a company logo to pictures of employees in action.
  8. A style sheet, stylesheet.css, contains the formatting instructions for each page of the site.
  9. Every page links to this style sheet by using the <link> tag. A change in this file changes the appearance of every page on the site.

The home page
Listing shows the home-page markup for MegaCorp, our fictitious company. Figure shows how it looks when displayed in a browser.

Listing : Our Company’s Home Page (index.html)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>MegaCorp Home Page</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<link rel=”stylesheet” href=”stylesheet.css” />
</head>
<body>
<div id=”navbar”>
<h4>Home&nbsp;&larr;</h4>
<h4><a href=”products.html”>Products</a></h4>
<h4><a href=”press.html”>Press</a></h4>
<h4><a href=”contact.html”>Contact&nbsp;Us</a></h4>
</div>
<div id=”main”>
<h1>
<img src=”building.gif” height=”145” width=”145” alt=”Our building”
hspace=”10” align=”middle” />Welcome to MegaCorp Online</h1>
<!-- Insert text for your company here -->
</div>
<div id=”footer”>
All contents of this site &copy; 1999-2005 MegaCorp International,
All Rights Reserved
</div>
</body>
</html>

As you look at the markup in Listing, you can see that it doesn’t contain any information about colors, fonts, or how the page itself should be displayed. All that information is in the style sheet, which allows the most flexible approach to updating the site in the future.

Figure : Our company’s home page.

Our company’s home page

The navigation used in the home page and for the other site pages is based on the text rollover example. These rollovers are simple, are fast-loading, and can be spidered (automatically searched for keywords) by search engines such as Google. They also degrade (they work even if they don’t do the fancy stuff) nicely in older browsers.

If you want to use this template for your home page, just

  • Change the contents of the <title> and <h1> tags.
  • Add the company’s description where the template shows the HTML comment “Insert text for your company here.”

A few slightly tricky things are going on in the navigation section (the part inside the <div> with the id of navbar):

  • Each option is placed inside an <h4> tag, but only the last three are also within an tag. That’s because we don’t want visitors to try to rollover and then click a Home link because they’re already at the home page. Similarly, on each of the other pages, the link corresponding to the current page is disabled.
  • The word Home on this page is followed by a leftward-pointing arrow (&larr;). That’s another way of showing visitors which page they’re currently on.
  • The arrow and the word Home are separated by a nonbreaking space &nbsp;. This special space keeps these two pieces in the same line, even if a browser is set oddly.
  • The navigation menu shown in Listing and the text rollover menu are slightly different — this one’s modified to display each link the same whether the visitor has been to that page or not.

You can compare the two styles and use the one you prefer.

Why use this type of navigation? Because it’s simple to add, remove, or modify elements:

  • Delete a line of markup, and the other menu items move up to fill the gap.
  • Add a line with matching markup, and it automatically appears just as it should.

The products page
Listing and Figure show the company’s products page and demonstrate how the overall look is the same, yet slightly different, for an interior site page.

Listing : Our Company’s Products Page (products.html)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>MegaCorp’s Products</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<link rel=”stylesheet” href=”stylesheet.css” />
</head>
<body>
<div id=”navbar”>
<h4><a href=”index.html”>Home</a></h4>
<h4>Products&nbsp;&larr;</h4>
<h4><a href=”press.html”>Press</a></h4>
<h4><a href=”contact.html”>Contact&nbsp;Us</a></h4>
</div>
<div id=”main”>
<h1 align=”center”>MegaCorp’s Products</h1>
<p>Say something here about your products</p>
<ul>
<li>Product 1 goes here</li>
<li>Product 2 goes here</li>
</ul>
</div>
<div id=”footer”>
All contents of this site &copy; 1999-2005 MegaCorp International,
All Rights Reserved
</div>
</body>
</html>

Figure : Our company’s products page

Our company’s products page

To use the template shown in Listing, perform the following steps:

  1. Customize the title, heading, and navigation bar for your page.
  2. Add descriptive text within the <p> that describes your products.
  3. Describe each product specifically within the individual <li> tags.

You can add links to subpages from within the individual product descriptions. If you do this, use this page as a template for the individual product pages, but make sure the Products link is enabled in the navigation bar. That way, site visitors can retrace their steps back to where they came from without clicking the Back button.

The contact page
This simple page allows visitors to the site to send their feedback directly to the company. All it asks for is a name, an e-mail address, and the message to be sent, as shown in Listing and Figure.

Listing : Contact Our Company (contact.html)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Contact MegaCorp</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<link rel=”stylesheet” href=”stylesheet.css” />
</head>
<body>
<div id=”navbar”>
<h4><a href=”index.html”>Home</a></h4>
<h4><a href=”products.html”>Products</a></h4>
<h4><a href=”press.html”>Press</a></h4>
<h4>Contact&nbsp;Us&nbsp;&larr;</h4>
</div>
<div id=”main”>
<h1 align=”center”>Contact MegaCorp</h1>
<h2>MegaCorp values your opinions!</h2>
<form action=”mailto:contact@example.com” method=”post” enctype=”text/plain”>
<p>Name: <input type=”text” size=”20” /></p>
<p>Email: <input type=”text” size=”20” /></p>
<p>Your message:
<textarea name=”Message” rows=”10” cols=”30”></textarea></p>
<input type=”submit” value=”Submit” />&nbsp;
<input type=”reset” value=”Reset” />
</form>
</div>
<div id=”footer”>
All contents of this site &copy; 1999-2005 MegaCorp International,
All Rights Reserved
</div> /body>
</html>

You could make the contact page considerably smarter by adding a little JavaScript that verifies whether valid information is entered into each of the fields. You want to make sure that

  1. A name was entered.
  2. Some text was entered in the message <textarea> field.
  3. Something resembling an e-mail address was given in the e-mail address

field. (But there’s no way to verify that the e-mail address belongs to the person filling out the form.)
Embedding an e-mail address into the HTML markup like this is generally a bad idea. It works, but spammers usually find the e-mail address in the HTML file and abuse it. In the long run, it’s smarter to use a Common Gateway Interface (CGI) that handles the address on the server side.

Figure : Contacting our company.

Contacting our company.

The style sheet
Listing is a very basic version of a style sheet. All the HTML pages in this Web site reference this style sheet. The great advantage of using a style sheet to define your formatting instructions is that you can update this one file to give the whole site an entirely new look.

Listing : The Site-wide Style Sheet (stylesheet.css)

As shown in Figure earlier in the chapter, the site’s style sheet changes the menu items from white-on-black to black-on-white when the cursor moves over them. That works well for this book because it’s in black and white. For a live Web site, change this to something a little less stark by changing the colors in the line that starts with div#navbar a:hover. You can also modify the style sheet to change such attributes as

  1. The whole page background
  2. The navigation background color
  3. Fonts

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML 4 Topics