HTML and CSS Reference
In-Depth Information
Plan
Ahead
•
Determine what graphic images will be used and how to format them
. They say that
a picture is worth a thousand words. In Web development, it sometimes makes your
message clearer and more attractive if you use pictures. In the planning stage, you have
to consider which pictures will help (and not hinder) your content. You also have to
decide how to align the text relative to the pictures. Sometimes it makes sense to put the
text above or below the picture. It might also be appropriate to wrap the text around the
picture. You need to determine all of these specifics before you create the Web page.
Identify what links are needed on a long Web page
•
. When you have an especially long
Web page (one in which the visitor has to use the
p a g e
d o w n
key), you should provide
links within the Web page for easier navigation. You need to decide where it makes
sense to put page breaks. Often it is best to put a link to major topics within the Web
page. Make sure that the Web page visitor can easily move to those areas by providing
links close to the top of the Web page.
Use links back to the top of the page
•
. Another good technique for long Web pages is to
allow visitors to link back to the top of the Web page easily from several places on the
page. Providing links back to the top of a long Web page makes browsing more enjoyable.
Create a link back to the home page
•
. If possible, you should always provide a link from
secondary Web pages back to the home page. Your visitors should not have to use the
Back button on the browser to get back to the home page of the Web site. A common
Web development practice is to use a company logo (often a smaller version) to
navigate back to the home page. Again, the purpose of this image link as well as other
links mentioned here is to make your Web site easy to navigate.
Working with Classes in Style Statements
Notice that the samplephotos.html file contains the same embedded style sheet that you
created in the underwatertours.html file earlier in this chapter. For the second Web page,
you will add one additional element (img) to the embedded style sheet. In order to utilize
the image element as needed on the second Web page (samplephotos.html), you need to
understand the concept of classes as used with CSS. CSS classes give you more control
over the style on a Web page.
Recall that a style statement is made up of a selector and a declaration. The part of
the style statement that identifies the page elements is called the selector.
a
{text-decoration: none; color: #020390;}
The example above shows a section of the embedded style sheet used in the
samplephotos.html Web page. The selector in the example is the a (the anchor or link). The
part of the style statement that identifies how the element(s) should appear is called the
declaration. In this example, the declaration is everything between the curly brackets. This
includes the text-decoration property and a value of none together with the property named
color and the value of #030290.
There is another level of control that you can have over the styles that display on
a Web page. For example, rather than having all paragraphs of text appear in the same
style, you might want the style of the first paragraph on a page to be different from the
other paragraphs of text. To gain more control for these purposes, you can define specific
elements of an HTML file as a category, or
class
. You can then create a specific style for
each class. Using classes in CSS thus allows you to apply styles to HTML tags selectively.
