HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

ocPortal Tutorial: Introduction to XHTML, CSS and Javascript

Written by Philip Withnall, ocProducts
This tutorial is an introduction to the main standard web technologies that ocPortal is built upon.
If you need to learn about the ocPortal's own Tempcode technology, please read the Tempcode programming tutorial.



XHTML

XHTML (eXtensible HyperText Markup Language) is the language in which the ocPortal layout is written, and is what ocPortal is designed to output.
A markup language is a text-based formatting system that allows an author to designate the structure and importance of pieces of a web page. You can't have a web page without markup; all web pages consist of markup.
XHTML is the successor to the original markup language invented for the internet: HTML. It is an extended version of HTML designed with XML (eXtensible Markup Language) compatibility in mind.

As previously mentioned, all ocPortal pages are output as XHTML. To customise the appearance of your site, it is just about impossible to do anything major without editing the XHTML. In ocPortal, the XHTML is split up into various templates for ease-of-use and reusability. ocPortal also has an inbuilt XHTML validator, to help you in customising your site.

The basic concepts behind XHTML are very simple: your document starts with a document-type definition, then the markup follows. The markup consists of various tag s, each with optional and mandatory attributes.

Code

<tagname attribute1="attribute1value" attribute2="attribute2value">tagcontent</tagname>
As you can see, the markup is quite simple. The tag consists of an opening part, and a closing part, with content in-between, and attributes listed in the opening part. However, some tags can be even simpler, and not contain any content, or even a closing part.

Code

<tagname attribute1="attribute1value" attribute2="attribute2value" />
This form of tag is called self-closing, but is only found occasionally. For both forms of tag, however, there are some rules and guidelines that should be followed:
  • Don't place extraneous spaces in the tag (i.e. between the less-than and the first character of the tag name)
  • Always close the tag with a closing part, or a self-closing part
  • Don't put more than one space between anything

Tags can contain as many attributes as you like, but they must be valid, and you can't repeat the same attribute twice. Let's look a little closer at the syntax for an attribute.

Code

attributename="attributevalue"
The syntax for an attribute is quite simple, too. However, there are some rules and guidelines you must stick to:
  • Encase the attribute value in double-quotes
  • Don't surround the equals with spaces (it must be next to the last character of the attribute name, and the opening double-quote for the attribute value)
  • Keep the attribute name lower-case

Putting tags together is only slightly more complex than using single tags. You must bear in mind that XHTML is designed to produce a tree-structure of tags: one tag will contain several others (descendants), which in turn will contain another few (more descendants), or some text, etc.

Code

<tag1>
   <tag2>
      <tag3>Text</tag3>
      <tag4 />
   </tag2>
   <tag2>Text</tag2>
</tag1>

A key part of this is the fact that there is some required markup in all XHTML documents: the three root tags. These tags (<html>, <head> and <body>) must be present in a particular place in every XHTML document along with a valid document-type definition and some required attributes, or browsers won't be able to make head-or-tail of the page.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <title>Sample page</title>
   </head>
   <body>
   </body>
</html>
That is just about the smallest valid page possible. However, you needn't worry about all this, as ocPortal already has the basic XHTML structure in-place and working perfectly.

One of the nice things about XHTML is the fact that you can place extraneous whitespace (spaces and tabs) between tags, to make the markup easier to read.

Code

<tag1>
   <tag2 />
</tag1>
Doing this when writing markup is highly advisable as it saves hours of searching through markup to find closing parts, etc.

Up until now, we've only been working with theoretical and fictional XHTML tags and attributes. Now it's time to introduce you to some of the most commonly-used tags. However, first it must be noted that XHTML is not a layout language! It should not be used with the intention of creating a page with a particular appearance! XHTML coding should be approached with a purely structure-based mindset. That is, XHTML should be used to mark-up the structure of the document (e.g. headings, paragraphs, sections, links, lists, and other such structural paradigms). Anybody who uses XHTML with the intention of creating a page that looks a particular way is using it incorrectly. To learn about how to style a page, see the CSS section below.

Anyway: some XHTML elements.

Element Description

<a>

A hyperlink. Recommended attributes: href (URL to link to), title (text to display when hovered-over).

<body>

The parent tag for the main document body. Required.

<div>

Defines a document section. (See CSS section below.)

<em>

Adds emphasis to the text it surrounds.

<fieldset>

Groups form elements together logically. (See <form> tag below.)

<form>

Defines a form with which to submit data. Required attributes: action (URL to send data to). Recommended attributes: method (how to send the data; either get, or post)

<h1> to <h6>

Document headings; <h1> is the most important (you should have one of these at the beginning of your page, quoting your page title), <h6> is the least important.

<head>

The meta-data section of the document. Contains information about the document which isn’t rendered, but used by the browser in other ways. Required.

<html>

The main tag in an XHTML document. Required attributes: xmlns (the XML namespace; should be “http://www.w3.org/1999/xhtml”). Required.

<img />

An in-page image. Note that this tag shouldn’t be used to place layout images; only page-specific images. (See CSS section below.) Required attributes: src (the URL of the image), alt (alternate text to be displayed if the image cannot be displayed). Recommended attributes: title (text to display when hovered-over).

<input />

A form input, for entering data. Recommended attributes: value (the value to display – varies from type to type), type (the type of input to display: button, checkbox, file, hidden, image, password, radio, reset, submit, text), name (the name with which to refer to the input on the server), id (the unique identifier with which to refer to this element (see CSS and Javascript sections below)).

<label>

A label associated with a form element. Recommended attributes: for (the ID of the form element associated with this <label>).

<legend>

A caption for a <fieldset>.

<li>

An element in a list (see <ul> and <ol>).

<ol>

An ordered (sequential and numbered) list.

<optgroup>

Groups <option>s in a <select> list. Required attributes: label (the label for the option group).

<option>

An option in a <select> list. Recommended attributes: value (the value to be sent to the server when the form is submitted).

<p>

A paragraph. This element is very commonly used.

<select>

A drop-down list. Recommended attributes: name (the name with which to refer to the input on the server), id (the unique identifier with which to refer to this element (see CSS and Javascript sections below)).

<span>

Groups inline elements. (See CSS section below.)

<strong>

Designates text as strong (usually displayed as bold).

<sub>

Designates text as subscript.

<sup>

Designates text as superscript.

<table>

A table. Note that this should not be used to lay-out pages! (See CSS section below.) Recommended attributes: summary (a medium-length summary of the content of the table for non-visual browsers).

<td>

A table cell.

<textarea>

A multi-line text input area. Required attributes: cols (how many character columns to display), rows (how many character rows to display). Recommended attributes: name (the name with which to refer to the input on the server), id (the unique identifier with which to refer to this element (see CSS and Javascript sections below)).

<th>

A table header cell.

<title>

The title of the page (to be displayed in the browser’s title bar, for example). Required.

<tr>

A table row.

<ul>

An unordered (non-numbered – blank bulleted) list.



Although this table doesn't list all of the XHTML elements (it lists approximately half of them), the others are used so rarely it's easier to look them up when required, than learn them first. This table also does not list all the attributes of all the elements. However, it lists the important ones, and the following table lists all the attributes that can be used with any XHTML element; the standard attributes.

Attribute Description

class

The CSS class of the element; used to style and jazz-up appearances. (See CSS section below.)

id

The unique identifier for the element (see CSS and Javascript sections below).

style

Inline styling rules – used to apply styling without using a separate CSS definition. Note that it’s advisable to separate structure and styling, so use of this attribute is deprecated for all intents and purposes. (See CSS section below.)

title

Text to display in a tooltip when the element is hovered-over.



There are other standard attributes, but only four, and they're used exceedingly infrequently. Note that there are also event attributes (see Javascript section below).

Now that you've learnt all the XHTML elements, how to use them, and their attributes, you might think it's all over. This is not true; XHTML has a final surprise for you.

As you might have guessed, you can't put any element inside another. There are rules. The basic rule is that of block-level and inline elements. Every XHTML element is either a block-level element, or an inline element (with a few exceptions, which are beyond the scope of this tutorial, but they don't behave particularly differently anyway.) With a few exceptions, block-level elements may not contain other block-level elements. As well as this, inline elements may not contain block-level elements. Block-level elements may, however, contain inline elements.

What follows is an example XHTML document, utilising all of the above principles:

Code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Example XHTML document</title>
      <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
      <meta name="keywords" content="example document,XHTML,element,attribute" />
      <meta name="author" content="ocProducts" />
      <meta name="description" content="An example XHTML document." />
      <script type="text/javascript" src="http://example.com/script.js" />
      <link href="http://example.com/style.css" rel="stylesheet" media="all" type="text/css" />
      <link href="http://example.com/favicon.jpg" rel="icon" type="image/jpg" />
      <link href="http://example.com/" rel="home" title="Home" />
   </head>
   <body>
      <div id="top_bar">
         <h1>
            <a href="http://example.com/" title="The example.com homepage">example.com</a>
         </h1>
      </div>

      <div id="main_doc">
         <h2>Example content</h2>
         <p>This is example content.</p>
         <ul>
            <li>How about</li>
            <li>an example</li>
            <li>unordered list?</li>
         </ul>

         <div id="bottom_bar">
            <a href="http://www.blogrankings.com">
               <img src="http://www.blogrankings.com/images/blogrankings.gif" alt="BlogRankings" />
            </a>
            <a href="http://www.spreadfirefox.com/?q=user/register&amp;r=23557">
               <img src="http://example.com/firefox.png" alt="Get Firefox!" />
            </a>
         </div>
      </div>

      <div id="right_doc">
         <h3>Login status</h3>
         <ul>
            <li>
               <a href="http://example.com/login.html" title="Log in to example.com">Login</a>
            </li>
            <li>
               <a href="http:// example.com/register.html" title="Register an account at example.com">Register</a>
            </li>
         </ul>
      </div>

      <div id="left_doc">
         <h3>Intro</h3>
         <p>This is a well-written <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> page.</p>
         <p>Example paragraph.</p>
      </div>
   </body>
</html>

CSS

CSS (Cascading StyleSheets) is the language used to style and position elements in a webpage. The advantage of separating content and structure from style and layout is that if, for example, you have a separate CSS file (i.e. the CSS is not embedded into the XHTML), you can easily apply a standard style across a whole website, without duplicating the CSS over and over again (which would inevitably lead to omissions, errors, and maintenance problems).

CSS is a simple language, consisting of rules, which contain various properties; the individual parameters for styling an element.
The basic format of a rule is as follows.

Code

selector
{
   property: property-value;
}
The selector defines which XHTML elements/classes/IDs the properties in the rule are applied to, the property is the pre-defined name of the property, and the property-value is the value assigned to the property (the allowed values vary from property to property). Note the spaces, colons and the semi-colon at the end of the property line.

There are several types of selector defined by the CSS 1 standard, which we will cover here. There are also several new selectors defined by both CSS 2 and CSS 3, but they are beyond the scope of this tutorial.

The most basic selector is the type selector, and it selects all the XHTML tags in the markup of the specified name.

Code

p
{
   property: property-value;
}

div
{
   property: property-value;
   property: property-value;
}
The CSS above would apply the specified properties to any <p> or <div> element in the page.

Another basic selector is the class selector, which selects all XHTML tags with the specified class attribute value.

Code

.warning
{
   property: property-value;
}
span.timestamp
{
   property: property-value;
}
This example applies the specified properties to any tag which has a class of "warning", or any <span> tag which has a class of "timestamp". Note that you can combine type and class selectors together (as in the second rule in the above example), to produce a class selector which only applies properties to tags with the specified class, that also are of the specified tag name.

A little aside explanation about the XHTML class attribute is probably required here. As mentioned in the XHTML section above, it is a standard attribute, and as such can be applied to any element. It should contain a space-separated list of CSS class selector names to be applied to the tag. Usually, however, only one class selector is listed in the class attribute.

Code

<div>
   <span class="timestamp red">Warning received yesterday.</span>
<p class="warning">I know you know that I've been messing with knowledge. However, I'd like you to forget that I know what you know, and that you don't know what I know. I know more about what you know that you could possibly ever know about my knowledge. My knowledge about your knowledge of what I know regarding now is secret, and I know that you know about the now and then of knowledge, new life, and gibberish.</p>
</div>
In that example, the <span> tag has two CSS classes attached. However, it should be noted that when naming CSS classes, you should name them for their function, rather than for their appearance. This is for maintenance considerations: if you name a class "red", then change the colour to blue, you'd have to rename it, and change all the references to it, or leave it as a mess.

ID selectors are another basic selector type, which apply properties to elements based upon their id attribute (for more information on the id attribute, see the Javascript section below).

Code

#main_doc
{
   property: property-value;
}
Note that this rule should (in theory) only be applied to one tag in the entire page (if at all), as the id attribute of any tag should be unique. Due to this, the ID selector isn't used as frequently as other selectors, and when it is used, it is usually used for basic page layout rules, such as positioning the title, main body, and menus. Note also that ID selectors can be coupled with type selectors, as with the class selector.

Code

h1#title
{
   property: property-value;
}

The final basic selector is the descendant selector, which applies properties to specific tags, but only if they are a descendant of another specified tag (or tags). Note that it applies the properties to the final tag in the sequence (i.e. the right-most tag in the selector).

Code

h3 a
{
   property: property-value;
}
This example applies the specified properties to any <a> tag which is beneath a level-three heading (<h3>).

Now that the basic selectors have been covered, we move on to properties and property values. A property can only accept one out of a list of pre-defined values. Some values are variable (such as widths, and other numeric values), but most are just text.

Some commonly used properties are listed below.

Property Description

background

The background colour and image.

border

The border; a line (of specified width) that borders (in a box) the specified element.

display

Used to alter the display mode of the specified element (i.e. change it from a block-level to an inline element).

position

The mode with which to place the element.

height

The height.

width

The width.

font

Font options and configuration.

list-style

How to layout and draw a list.

margin

The margin options: the space around the outside of an element separating it from other elements (think of it as a “moat” for an element).

padding

The padding options: the space on the inside of an element (between the border and the content – think of it as the cavity in a cavity wall).

bottom

The space below an element, and above the element’s parent’s border.

left

The space to the left of an element, and to the right of the element’s parent’s border.

right

The space to the right of an element, and to the left of the element’s parent’s border.

top

The space above an element, and below the element’s parent’s border.

color

The colour of text.

text-align

The horizontal alignment of text.

text-decoration

Decoration applied to text, such as underline or overline.

text-indent

Indentation applied to the first line of text.



Note that most of these properties can be split up into separate properties (i.e. margin can be split up into margin-left, margin-right, margin-top and margin-bottom).

All these properties are no use without property values. Although most elements only accept values from a property-specific pre-defined list, some elements accept more general values, such as pixel or percentage measurements.

Pixel measurements should generally be used for fixed-size objects, which are usually encountered when doing the basic layout of a page.

Code

#left_col
{
   width: 200px;
}
Percentage measurements are much better to use, however, as they allow dynamic resizing of page layout if the browser window is resized.

Code

#left_col
{
   width: 20%;
}

There are other general property values, but they are beyond the scope of this tutorial.

The final part of the CSS jigsaw is inheritance, or cascade. This is one of the main features of CSS, and gives it power and flexibility. The basic principle is that properties applied to one tag are automatically applied to any descendant tags of that tag (with a few exceptions for sanity's sake). So, for example, if you had a rule that applied a red text colour to an element, that element's descendants would also have red text, unless they had rules applied to them to override this.

Cascade is actually a variation of inheritance, on a larger scale. Specifically, it is the inheritance of rules in the hierarchy of stylesheets. Although only applicable for very large sites, it is important to know about: a stylesheet can import another stylesheet using something called the "@import" rule. Cascade is when the rules and properties from the first stylesheet cascade into the second stylesheet, and are applied to elements unless overruled.

Javascript

Javascript is the final piece in the web development puzzle. It allows dynamic, event-driven, interactive functionality, and is the prime component of emerging technologies such as Ajax.

It would be pointless to go into a detailed explanation of Javascript and how to script in it, as all the Javascript a developer could ever require is available online already.
However, it is useful to be able to understand roughly what some Javascript does, and the concepts behind it.

Javascript is a client-side scripting language; the web server sends the raw Javascript to the client's browser, which goes through it, performing the specified operations. It is very fast, and can manipulate a webpage in microscopic detail.

Javascript generally consists of function s, which contain lines of code.

Code

function function-name(argument1,argument2)
{
   lines-of-code;
}
Functions have to start with the keyword "function", then the name of the function, and the arguments required to be passed to the function in brackets. Following this should be the lines of code in the function, surrounded by curly brackets.

The lines of code themselves have to follow strict rules (which are beyond the scope of this document), and have to be terminated with a semicolon.

Code

function is_IE()
{
   if(navigator.appName=="Microsoft Internet Explorer")
   {
      return true;
   }

   return false;
}

If you are knowledgeable in the area of programming, you will notice that Javascript uses C-style syntax.

Javascript is most powerful when applied to the DOM - the Document Object Model, which is a way of accessing the properties and attributes of every node in the document tree of an XHTML (or XML, etc.) page. You don't need to know about how to use the DOM in Javascript, you just need to know that the DOM extensively references the IDs of XHTML elements, specified by their id tag.

Another feature of Javascript is its event model. You can specify Javascript functions or code to be called when, for example, a link is clicked. You do this either via the event attributes in an XHTML document, or through event listening functions in Javascript.

Event attribute Description

onload

Called when the document loads. Can only be put in <body> or <frameset> tags.

onchange

Called when an input is changed. Can only be put in one of the form tags (<input>, <select>, etc.).

onsubmit

Called when the form is submitted. Can only be put in a <form> tag.

onkeypress

Called when a key is pressed (and released) and the element has focus. Can be put in any tag, with a few logical exceptions.

onclick

Called when a the element is clicked. Can be put in any tag, with a few logical exceptions.



To use these event attributes, simply put them into the tag.

Code

<a href="http://example.com/" title="Example website" onclick="log_click('http://example.com/'); ">example.com</a>

You can also put more than just a function call into event attributes.

Code

<a href="http://example.com/" title="Example website" onclick="window.alert('You clicked the link!'); log_click('http://example.com/'); ">example.com</a>

Javascript is a flexible language, and many things can be achieved by using it. However, you must remember that styling should be left to CSS, structure should be left to the XHTML, and Javascript should be used for interactivity.

It should also be stressed as a last point that Javascript is not secure; if you write a login system in Javascript that checks an inputted password against a one coded into the Javascript, anybody can just view the source of the Javascript using their browser, look through it, and extract the password with ease. This goes for other similar situations as well, such as quizzes; the answers, passwords, or any other potent information that should be kept secret. It should be stored, processed, and handled exclusively on a server!

Online tools and references

XHTML tools/references


CSS tools/references


Javascript tools/references






Concepts

XML
eXtensible Markup Language: a format for structuring other languages that fit well into a tree structure
HTML
HyperText Markup Language: a language for the documents of the world wide web
XHTML
eXtensible HyperText Markup Language: HTML adapted to follow XML rules
CSS
Cascading Style Sheets: a technology that allows style to be specified in a config-file like fashion, and mapped to XHTML structure
Javascript
The standard client-side scripting language for the Internet, allowing web pages to be dynamic without reloading of pages. In standardisation, it is known as ECMA-Script, but that term is rarely used.
tag
A piece of structure: an XML tree is made up of tags
element
Another name for a tag really
(tag) attribute
Tags may contain attributes that specify properties for the tag
inline (tag)
A tag that wraps around a portion of HTML to apply something to it, or to use it
block (tag)
A tag that takes up a boxed area of the screen space, and may have it's own background. Block tags force a visual line-break after them, unless they are styled to be inline
(tag) class
A tag class is generally used so as to join XHTML tags to CSS styles
(XML) ID
An ID is generally used so as to allow Javascript code to reference specific XHTML tags
(Javascript) event
Javascript hooks on to web browser actions via an event model; tags 'fire' events, and Javascript can be set up to launch certain code upon the event firing
(CSS) selector
CSS rules apply to certain tags, and selectors are used to determine which tags; selectors are very powerful, although Internet Explorer only supports a few of them
(CSS) property
CSS rules specify values for properties in order to style
DOM
Document Object Model. A scheme of referencing a document based upon the XHRML structure. Usually used with Javascript.
DHTML
Dynamic HTML. Almost a synonym for Javascript
client-side
Code that is processed on a viewer's computer. The opposite of server-side

See also