The head section of this demo page defined only a title. The body tag specified a background color (<body bgcolor="pink">).
Horizontal rules can be used to separate logical sections in a page.
The <hr> tag can take alignment, size, and width attributes. The
rule line above was defined as:
<hr align="center" size="3" width="50%"/>
The following rule line is from a simple <hr /> tag.
"Header" tags are for labeling sections in a page. They have defaults that are set by the browser. They can take attributes, such as alignment and justification attributes; though it is probably better to use a stylesheet and define new header styles if you really wish to take control of layout.
The following section is based on these HTML page layout directives:
You will also need lists. There are several formats: unordered lists, ordered lists, definition lists, directory lists, and menu lists. The pages that you generate in your server side programs are likely to use only simple ordered and unordered lists. An unordered list is delimited by <ul> and </ul> tags, and should contain a number of items delimited by <li> and </li> tags (the end tag for a list item is commonly ommitted but you should get used to using it, if you are going to be generating text that is to end within an XML document then you need to keep things "valid" - all opening tags paired with closing tags). The <ul> tag can take a "type" attribute which can have values disc, square, or circle. Ordered lists are basically similar; instead of bullet marks by the list items, they use some count value (Arabic or Roman numbering, or letters). These lists are delimited by <ol> and </ol> tags.
The following lists are defined by the HTML layout tags:
You may need to highlight specific text in a response page. You can use the basic boldface or italic face controls. Boldface sections are contained within <b> and </b> tags.Italic sections use the <i> and </i> tags. You can add more emphasis with an inline font tag that changes the appearance of text (that was set with <font size="+2" color="blue">). Such usage might be justified to highlight erroneous input received from some data entry form. Once again, you are better off using stylesheets if you are really trying to achieve elaborate presentations styles.
When generating response pages with links, you may have to encode a session identifier. This "URL rewriting" step is explained in both the PHP and Java sections of the text.
You add images using the <img> tag. This takes many attributes. The "src" attribute defines the URI for the image; the "alt" attribute specifies text that is to be shown if image display is disabled by the user's browser preferences. By default, the image will be displayed in its natural size; but you can scale an image by setting "width" and "height" attributes in the img tag. You can further specify the picture's alignment relative to any text adjacent to it, set a border around the picture, and extra space above or beside a picture.
The following img tag pulls in the picture shown below (or shows some "alt" text if you've switched off image handling in your browser).
<img src="../images/ausmap.jpg" alt="Oz from space" />
The page alignment of an image is determined by the current paragraph alignment. If you want your image centered on the page, say so:
<p align="center">
Images should not dominate dynamically generated response pages (you should keep pages fairly simple to speed up the process of handling a customer's request). Sometimes you have to have static images (for example, pictures of products that match a customer's submitted requirements). In other cases, you may generate an image dynamically (e.g. a plot showing variations in a share's price) and have to include this image in a response page. (This is illustrated in PHP and Java examples in the text). If you are generating images dynamically, you must also make some arrangement for the temporary image files to get purged at regular intervals or you will run out of space on your server!
As noted in Appendix A of the text, framesets are sometimes useful. Your web designer colleagues can compose a frameset with a company logo etc in one area, navigation controls in a second area, and your data entry forms and response pages in a third area. You should leave frameset design to the design team and just get on with the real work of programming! The Appendix example frameset definitions were:
<html><head><title>XYX Corporation</title></head> <frameset cols="25%,75%"> <frame src="CompanyInfo.html" name="LeftMargin"> <frame src="Frame2.html"> <noframes>If your browser doesn’t handler frames, <a href=“noframe.html”>alternative source</a> is available.</noframes> </frameset> </html>
<html> <frameset rows="25%,75%"> <frame src="CompanyLogo.html"> <frame src="OrderForm.html" name="MainPart"> </frameset> </html>
The example has only dummy fillers in the subareas.
The normal flow layout for web pages is fine for text dominated informational pages. However, the response pages that you will generate in your web server programs are typically showing a small amount of fairly structured data. You should consider using tabular style responses; often, tables will greatly improve the appearance of a response page and make it easier for your customers to work with your systems.