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:
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”
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.
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
A few slightly tricky things are going on in the navigation section (the part inside the <div> with the id of navbar):
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:
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”
Figure : Our company’s products page
To use the template shown in Listing, perform the following steps:
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”
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.
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
HTML 4 Related Interview Questions
|XML Interview Questions||HTML 4 Interview Questions|
|HTML Interview Questions||HTML 5 Interview Questions|
|HTML DOM Interview Questions||Java Interview Questions|
|CSS Interview Questions||Java Abstraction Interview Questions|
|Dynamic HTML Interview Questions||XHTML Interview Questions|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.