ISIS Single Sign-On Login Page XHTML Guide
Article Type: Technical
Intended Audience: Developers who wishes to customize the ISIS login page for their applications
Middleware Infrastructure has chosen to adopt XHTML 1.0 Strict as the Document Type Definition (DTD) of choice for its websites. By deprecating many (sometimes popular) HTML tags it forces coding that is lighter (saves money on bandwidth), easier to maintain and update (saves money on maintenance), that can be parsed by xml applications. To boot pages that are coded in valid XHTML are easily accessible and degrade gracefully over a range of browsers and devices! XHTML 1.1 is not being used due to major issues in older browsers (including IE 6.0x/win) when using the application/xhtml+xml, application/xml or text/xml recommended headers, and the similarity to XHTML 1.0 Strict (modularity functionality is not needed at this time and future conversion will be relatively painless if it is).
Converting HTML to XHTML
These brief pointers from an old Alistapart article by Peter-Paul Koch go over the critical syntactic changes between HTML and XHTML.
- Make sure all your tags are lower case.
- Close all your tags. In the case of tags that don't have a closing tag, like
<BR>, add a slash to the end of the tag:
- Nest tags correctly. No more
- Put quotes around all attribute values. No more
Some HTML elements were also deprecated - if you use them they will generate errors while validating. All of them have CSS solutions that work as good or better, HTML Dog's Bad Tags Page explains things excellently, but for the purpose of the ISIS login site it is important to remember first and foremost NO FONT TAGS. There are already fine and dandy font settings in the CSS file, and you can change those to your hearts content. Font tags are often repetitive, are longer than they have to be, and account for an extremely large percentage of page bloat in traditional layouts.
An excellent tool (though just an automated tool) is the HTML Tidy Project , which will parses html code and attempts to "fix" it. A straightforward "online interface":http://infohound.net/tidy/ (no install required) is a good first step for those porting over content made in a WYSIWYG editor. After running HTML Tidy you should check to make sure that no critical formatting has been lost. If necessary edit the document to have it appear as you wish, then check to see if it validates.
Additional Troubleshooting Resources
- HTML Tidy Online Interface
- HTML Tidy Project
- Wikipedia's Common XHTML Encoding Errors
- Zeldman's Better Living Through XHTML
- W3C HTML Differences
Using Firefox to Check your Document
As it is a BOL Recommended, free, and cross-platform browser I'll briefly outline how Firefox can be used to check the page. The webdeveloper extension is a great boon as it provides useful shortcuts for common tasks you can use even when you don't have the toolbar visible (ctrl-shift-H in windows validates the page, ctrl-shift-A lets you validate a local page, ctrl-shift-S disables/enables stylesheets). You can disable stylesheets without using the extension by going to View > Styles, then choosing "No Style." Doing so should give you an extremely vanilla look at what very old browsers (say Netscape 2) will see when they view the login page. There is also a guide on how to use Firefox with the web developer extension to check if your page meets accessibility standards.
You can also manually visit the W3C's validation page in any browser.
XHTML Tags: Content Wrappers
While there are many "(X)HTML Tags you can use":http://www.htmldog.com/reference/htmltags/ we'll be covering the ones that would commonly be used on the ISIS log on page.
Headers are for headlines, and range from 1st level headers
<h1>important header</h1> (the page title, which is unique) down to sixth level headers,
<h6>whatever</h6>. For the ISIS page you'll mostly use second level headers... if you need to create a sub-heading a h3 will get the job done. Headers are by default block level elements, meaning that any background image or border applied to them will be visible across the width of the document and a line-break is applied at the end.
Content wrapped in paragraph tags
<p>content</p> will be vertically set apart from other content on the page. A simple and often used tag, it is better to actually enclose qualifying content in this than adding two line-breaks at the end of what should be a paragraph for semantic reasons and for optimal screen reader playback.
If you wish to have your content show up in a numbered list, you first need to create an ordered list
<li>list items</li> within it, then close the list
</ol>. I'd imagine most of the time you would want to use unordered lists (below) unless you are outlining steps that need to taken in a certain order.
If you play with the CSS unordered lists can be amazingly versatile things. For the ISIS login page they'll probably be used to display a short list of related items, such as contact information.
<ul>'s, like their ordered cousins, are populated by
<li>list items</li> and must be closed
</ul>. Both types of lists can contain other elements such as links.
Divisions and spans have no real structural semantic value, but they can be used to apply CSS properties to a selection of text. A Division
<div>content</div> is a block level (think paragraph or header) tag - if you want to make content appear in a box you can put a div's around the content, assign it a class or id, then set a background color (and possibly borders and padding) for the class/id in your custom.css file.
XHTML Tags: Content Modifiers
This section will deal with those tags that can be used within wrapped content (paragraphs, headers, lists, etc).
If you want to make something stand out you can place an
<strong>emphasis</strong> on the content.
Likewise text can be
<em>italicized</em> by use of these tags.
The structure of hyperlinks is rather long, yet simple. You need to know the URL you are linking to, a description of that URL, and the content you want to see linked. The basic element for a link is
<a>. Links are fun because they have many attributes within them,
href="url" contains the link destination, and
alt="description" contains a description of the link for mouseover popups (useful if the link content on the page is an acronym etc). After you close all that, you type in the actual text that will appear as a link on the site, then close it off with a
</a>. So putting it all together...
This is the structure of a coded link:
<a href="http://map.ais.ucla.edu/portal/site/UCLA" alt="The UCLA Business Services Portal Site">click here for UCLA BS</a>.
While the line break
<br /> tag has a bad reputation due to improper use in the past (paragraph emulation) or it's lack of semantic value if you want or need to end a line but don't want a margin below it, this gets results. Keep in mind content needs to wrapped in a
<h#>, or similar tag - a carriage return is merely a display mechanism. One thing to note is that it is a self-closing tag.
Image tags are self-closing, and like link tags have a lot of attributes within them. The basic element is
<img />, the source attribute,
src="url" contains a link to image that will be loaded (like links href), and also like links the
alt="description" contains a description of the link for screen readers and mouseover popups (and fills in placeholder text for those browsing with images disabled). Width and height attributes are preferred as the page will reserve space for the image on the page as it is loading, but it's not the end of the world if on the ISIS login page you leave it.
Putting it all together we have:
<img src="images/mylogo.png" alt="Our Pithy Logo" width="160" height="140" />
Remember that the image tag needs to close itself!
Spans are very similar to div's in that they don't do anything without CSS, but they are meant to be used inline (inside paragraphs, etc). Think of it as your chance to make a truly custom bold tag etc. With something like
be sure to check out our <span class="wow">new</span> application you can create a class called wow that has spaced out, all capital, huge, red, bold, italicized letters on a yellow background and a blue border. Not that you would ever want to, but you can!
More Comprehensive XHTML Markup Guides:
There a number of practical reasons to keep the structural markup as clean as elegant as possible, and we've made a quick guide showing how easy it is to change the markup for the login page for your ISIS application. While there have been essays (and books) written on the subject, this bit from HTML Dog sums things up rather nicely:
"It isn't just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate. For example, h1, h2 etc. should be used for headings - you should not just use CSS to make fonts larger.
A good guide is to see if a visual browser, with its default styling, presents the document well without a style sheet."