« Back to Tutorial Index
Skip navigation
ocPortal includes some technologies of its own:
This tutorial focuses mainly on XHTML, CSS and Javascript, which are the three technologies one needs to understand to do advanced themeing. Links to full resources for learning these technologies are also provided.
URLs (when written in full) are constructed as follows:
protocol://server:port/path?parameter=value&anotherparameter=anothervalue&anotherparameter=anothervalue
They are constructed as follows:
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.
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.
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:
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.
The syntax for an attribute is quite simple, too. However, there are some rules and guidelines you must stick to:
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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).
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.
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).
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.
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.
Percentage measurements are much better to use, however, as they allow dynamic resizing of page layout if the browser window is resized.
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.
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.
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.
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.
To use these event attributes, simply put them into the tag.
You can also put more than just a function call into event attributes.
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!
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. It does not explain any technologies specific to ocPortal. If you need to learn about the ocPortal's own Tempcode technology, please read the Tempcode programming tutorial.Table of contents
Overview
ocPortal is built on top of standard web/Internet technologies. These technologies are as follows:- TCP/IP – this is the protocol for transmitting Internet data and is where IP addresses come from
- HTTP, and cookies (optional) – this is the protocol for transmitting web data and is where URLs come
- XML (including RSS, Atom, OPML, SVG and use in AJAX) – this is a standard for structuring data, used for many web formats that ocPortal supports
- XHTML (and microformats) – this is the standard for web pages
- CSS – this is the standard for styling web pages; it ties into the XHTML
- Javascript (aka ECMA-Script) (optional) and DOM – this is the standard to make web pages interactive; it ties into the XHTML
- Dublin Core – this is the standard for adding meta-data to web pages; it ties into the XHTML (ocPortal 4.2+)
- PHP – this is the programming language ocPortal is written in
- Web server – this is the software applicaton that serves data over HTTP, and ties into PHP; Apache and IIS are examples of the web server applications ocPortal can use
- SQL – this is the standard for accessing/manipulating data inside databases; ocPortal uses it to talk to the database (e.g. SELECT * FROM table WHERE something='somevalue' ), which is usually the MySQL database application
- FTP – this is the standard for uploading files to a server
- Other standards like iCalendar, CSV files, JPEG, PNG, Zip, Tar, Gzip – these are used in specific areas of ocPortal, for reading and writing special file types
- ISO character sets and Unicode (UTF-8) – these are the alternative standards for Internationalisation support; ocPortal supports both
- MIME – this is the standard for e-mails
- SMTP – this is the standard for sending e-mails
- LDAP – this is the standard for having shared logins on a computer network, which ocPortal can use
ocPortal includes some technologies of its own:
- Tempcode – this is ocPortal's template technology (ocPortal combines data with XHTML templates in order to construct XHTML web pages)
- Comcode and Comcode XML – this is ocPortal's easy-to-use content language (lumps of text are written in this, and there are optional ways of encoding sophisticated behaviours; it compiles to more complex XHTML/CSS/Javascript, via templates)
- Dublin Core extensions – ocPortal extends Dublin Core (described above)
- OcCLE – A command line interface to an ocPortal website
- Page-links – A simple technology for generating link between pages, that compiles to HTTP URLs; page-links are local to a website (i.e. they can only work to generate links within a site), and are consistent regardless of the SEO URL scheme employed (ocPortal supports URL rewriting, which can make the appearance of final URLs vary considerably)
This tutorial focuses mainly on XHTML, CSS and Javascript, which are the three technologies one needs to understand to do advanced themeing. Links to full resources for learning these technologies are also provided.
URLs
Like all web sites, an ocPortal site uses URLs (aka web addresses) to link pages. Within ocPortal, they are usually written as page-links (see above) and then compiled to URLs at the same time the XHTML is generated.URLs (when written in full) are constructed as follows:
protocol://server:port/path?parameter=value&anotherparameter=anothervalue&anotherparameter=anothervalue
They are constructed as follows:
- For a web page, the protocol is always 'http' or 'https' (because the page is transferred via the HTTP(S) protocol)
- The port is almost always '80' which is the default port. If the port is 80 then it is not written down (i.e. ":80" is actually not in the URL)
- The server is either specified by a domain name or an IP address
- The path often relates to a file on the server, but does not have to: it is up to the web server how to treat it. For an ocPortal site the path usually points to a PHP file on the server (which the web server will recognise as being something it has to run, and relay the output), except if SEO URLs are on then it might go through a level of indirection (e.g. it looks to the visitor like it refers to an .htm file but actually is invisibly redirectly to go through a complex path involving the index.php )
- There can be any number of parameters (including none). The first one has a "?" before it and subsequent ones have a "&" before it
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>
Code
<tagname attribute1="attribute1value" attribute2="attribute2value" />
- 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"
- 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>
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>
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&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>
<!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&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;
}
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;
}
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;
}
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>
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;
}
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;
}
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;
}
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;
}
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
- HTMLSource: HTML Tutorials
- http://www.html.net/
- http://www.tizag.com/
- HTML: An Interactive Tutorial - Dave's HTML Code Guide - Learn to code HTML with our free HTML help guide!
- XHTML Tutorial
- jarmin.com Accessibility Guide
- Web design - Wikiversity
CSS tools/references
- Design and Code Your First Website in Easy to Understand Steps - Nettuts+
- HTMLSource: HTML Tutorials
- http://www.html.net/
- http://www.tizag.com/
- XHTML Tutorial
- CSS and web standards tutorials, info and help
- Index DOT Css: Index Page
- A List Apart: A List Apart
Javascript tools/references
- http://www.tizag.com/
- JavaScript Kit- Your comprehensive JavaScript, DHTML, CSS, and Ajax stop
- Traversing an HTML table with JavaScript and DOM Interfaces - MDC
- QuirksMode - JavaScript
- JavaScript » Introduction - DevGuru Quick Reference
- JavaScript Tutorial
- HTML DOM Tutorial
- DHTML Tutorial
- XML DOM Tutorial
- adaptive path » ajax: a new approach to web applications
- Index
- 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine
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 its 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
