Part II. Adding HTML Content
Working with Well-Formed HTML
You may wish to have a printed version of the pdf questionnaire, techauthor.pdf handy to do this section. You will be using HTML (and a little CSS as well) to complete this tutorial. Remember that because this is actually an XSLT document, you are bound to the strict rules of XSLT/XML when creating the HTML content.
This means that unlike regular HTML which allows for a fair amount of "creative" coding, XSLT/XML/XHTML documents follow strict guidelines
which, if not adhered to will 'break' the document and generate error codes by the XSLT processor. XSLT does not offer the same compromises as HTML. In XSLT, if a tag are not formatted correctly - it simply doesn't load the page at all. Therefore it's crucial that you adhere to the guidelines. The purpose of these rules is to allow for greater browser compatibility, since the browser will not have to "guess" as to how many different variations the code might take on. So the underlying concept behind all of this is: the stricter the rules, the better browser compatibility in the future.
Following the Rules of XML/XSLT
To make your job a bit easier, here are a list of the rules to follow when creating the HTML for an XSLT stylesheet:
- Each tag must have a corresponding closing tag. Closing tags are not optional here as they are in some HTML tags. This includes paragraph tags <p> which must be properly closed with </p>. Tags that contain no content, such as break tags <br> should now contain a forward slash in the tag like this <br/>. Empty table data cells may be correctly coded as <td/> which will allow the table to be displayed. However, as is the behavior with empty table cells, they will still collapse into each other and create poor-looking tables if there is no content between them.
- All tags must be properly nested. When nesting a tag, you must close the nested tag before you can close the outer one. For example:
- WRONG: <tagone> <mytag> </tagone> </mytag> Don't alternate the closing tags. This will create an error message.
- CORRECT: <outertag> <nestedtag> </nestedtag> </outertag> Close the nested tag before closing the outer tags.
- All tags must be in lowercase. Don't use uppercase at all, for example:
- WRONG: <HTML>
- WRONG: <Html>
- CORRECT: <html>
- Values must be enclosed in quotation marks. A tiny bit of flexibility here: quotes can be in the form of either single or double quotation marks . Be sure to use these in matching pairs. But whether you opt for using single or double, the point is - don't forget to use them.
If for some reason any of these rules are broken, the XSLT processor will gladly let you know in the form of an error message with the page not loading at all. The good news is that the message will indicate the line number the error is located, although if the error is a missing a closing tag, the XSLT processor will say something to the effect of a <tr> tag cannot be closed with a </td> tag. If you get this message be aware that the real problem may actually be located in a different part of the document. i.e., where the missing tag should be.
Adding CSS
If you feel pretty daring (as well as know how), you may add CSS to the stylesheet. You can add this to the XSLT stylesheet to fine tune the look of the page. This helps you avoid using deprecated or soon-to-be-outdated HTML tags. To do this, add the CSS tags opening/closing <style></style> tags in the head tag of the document and place all your CSS code withing those two tags. Remember to follow the XML/XSLT rules and you should be fine.
Adding HTML Content
In next two sections, you will create the upper text content area and then create part of of the table below). The first step here is to look over the document and notice the existing formatting. Then ask yourself a few questions:
- How are different areas formatted?
- What type of font is it using?
- What is the best way to recreate this in HTML, considering HTML's limitations?
While you will need to write the HTML on your own, a few tips are offered as to how to approach this task. Also, since you are able to use HTML, you can nest the <html> tags between the opening and closing <hsl:stylsheet> tags along with the usual <title>, <head>, and <body> tags placed in their usual positions within the <html> tags.
Figure 5. Techauthor.pdf
Creating the text area:
Starting from the top down, recreate the text field area.
1. Recreate the field area using a san-serif font, such as Helvetica or Arial. Use break <br/> or paragraph <p></p> tags where necessary to add line space the different text areas.
- Candidate questionnaire - Use one of the Header tag, such as <h2></h2>
- Candidate, Position, Location, Date, Time, Interview - body font or create a CSS tag within the <style></style> tags.
2. In order to preserve the horizonal formatting of Location:, Date: and Time: you may wish to place them in an invisible table, that is a table with the border attribute set to "0". This will hold them in place on the same line. It should look like this:
| Location: | Date: | Time: |
border="1"
| Location: | Date: | Time: |
border="0"
3. Create the underlines beneath the text in either one of two ways:
- Add a horizontal rule <hr/> below the text. This is not the most advisable choice as horizontal rules are slated to be deprecated tags in lieu of using stylesheets.
- Use CSS. Here's where a little CSS can go a long way. Create a CSS class that uses a black (hexadecimal color code of #000000) bottom border of about 2 points and an upper margin are at the top to keep the body text from getting too crowded. The code should be placed within the two <style></style> tags and should look like this:
.fields { |
4. To complete the CSS, be sure to reference the rule we just created by enclosing the selected body text in a <div> </div> tagset . Based on the above rule, this would be:
| <div class="fields">Candidate</div> |
5. Complete the body text using whatever other HTML or CSS styles you wish.
Now you are ready to create the table area. Go on to the next section, Part III. Adding the Table.