Name: _______________________________________

RHHS Web Club – September Package

Welcome to the RHHS Web Club!

Since this is the first meeting of the RHHS Web Club, this package contains some information that you should keep for handy
reference. It is very important that you do not lose these packages, which are distributed on a regular basis.

General Club Information

The purpose of the RHHS Web Club is to learn, develop, and apply skills in Web design/development, including knowledge in
XHTML, CSS, PHP, and JavaScript. Through the weekly club meetings, members will learn standards-compliant programming
and coding for the Web, as well as other useful knowledge that can be immensely helpful in the future.

Club meetings will usually occur in a computer lab in order to maximize access to computers. The software needed to code is
already present, although, should you desire to apply your knowledge at home, you will need to have your own tools.

Contact Information
The best way to reach me is always at my e-mail address, frederick@frederickding.com or through the contact form at
http://www.freddyware.net/contact.form/frederick.ding

In the near future, a club Web site will offer contact forms so that you can reach the executives.

Software Tools
In order to participate in “Web design and development” activities while you are at home, the following tools will be useful.
Recommended software are in bold. (The PDF edition of this document contains hyperlinks to free software.)

• WYSIWYG (What You See Is What You Get) editor with support for code editing:
o Adobe/Macromedia Dreamweaver o Nvu (now discontinued)
(version 8, CS3, or CS4) o Amaya
• Text editor:
o Notepad++
• Browser:
o Mozilla Firefox (version 3 or higher) o Opera (version 9.5 or higher)
o Internet Explorer (version 7 or higher) o Google Chrome (any version)
o Safari (version 3.1 or higher)
• Image editing:
o Adobe/Macromedia Fireworks o GIMP (version 2.4 or newer)
(version 8, CS3, or CS4) o Paint.NET
o Adobe Photoshop (CS or newer)
• Browser add-ons:
o Web Developer extension for Firefox

Do NOT use Microsoft FrontPage, Microsoft Expression Web, or Mozilla Seamonkey Composer. They usually rewrite your code
and often do not fully support web standards.
 2 RHHS Web Club – September Package

Topics
The first batch of topics to be discussed include:

1. General uses of, and innovative applications on the Internet

2. Web technologies, browsers, and open source projects
3. XHTML
4. CSS
5. JavaScript
6. Graphics files / multimedia formats (PDF, SWF, JPEG, PNG, GIF, AVI, MPEG-4, MOV)

NOTE: server-side programming is not a topic that we will investigate this month. However, it will be taught in future months.

Groups
Members will be placed into teams such that every team is balanced in skill level, experience, and individual “potential”.

The teams are: Alpha, Beta, Delta, Gamma, and Omega.

When you have been placed into a group, record the group name and members below:

Team: Alpha / Beta / Delta / Gamma / Omega

Members: ____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________
____________________________________________

Domain names
In order to effectively create experimental web sites for each group, we need to have domain names with which to access the
server(s). The following domain names are in use / available for use by RHHS Web Club:

• rhhsweb.org site for the club

• rhhsweb.net domain at which projects are developed/published
• rhhsweb.com domain at which other clubs can get hosting
• siteelements.biz domain used for hosting JavaScript, CSS, and other site elements
RHHS Web Club
 RHHS Web Club – September Package 3

Experimenting
The first few meetings will be mostly educational and administrative. However, by the end of this month, we will get on to
starting our own Web sites.

Through October, we will be starting on a simple XHTML design, using tags such as:

• <link> • <strong>
• <style> • <em>
• <script> • <h1>
• <meta> • <h2>
• <div> • <a>
• <p> • <img>
• <span>
After each tip is taught or introduced, everyone is encouraged to experiment with the tip — for instance, one could add the
<div> tag to organize their page.

Although each member is encouraged to apply skills and knowledge individually, we also recommend that each member actively
contribute to their group.

Hosting
Each team receives a web site, control panel access, and features such as FTP, MySQL databases, PHP scripting, and more. Every
team’s leader will have the authentication combination for that team’s hosting.

©2008 Frederick J. Ding. Commercial uses prohibited.

Get your own
I encourage all of you to get your own hosting. Request your RHHS Web Club-related hosting by submitting the appropriate
form (included in this package). Your hosting will include a different amount of disk storage space, much less bandwidth than the
team sites, and reduced functionality.

Attendance
Attendance is important to the success of any club, and especially important to the success of your team. Although we will not
penalize you for missing a meeting, please be aware that some meetings will teach a significant amount of material that cannot
easily be recovered.

PDF documents
The RHHS Web Club site may offer PDF downloads of our publications and monthly packages. You may print any or all of it.
However, you are NOT permitted to redistribute these files or their paper equivalents at a price. All documents are published
under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Canada Licence.

We may offer print publications in the future.

 4 RHHS Web Club – September Package

1. What is the Internet?

The Internet is a global network of networks, with millions of interconnected computers. This network also spawned what is
known as the World Wide Web, where e-mail, Web sites, and other files are transferred at increasing rates.

The most common face of the Internet, the World Wide Web (the “Web”), is where all public web sites “live”. Common
examples of Web sites include Google, Yahoo!, Digg, and Facebook (social networking).

2. Web technologies, browsers, and open source projects

Browsing the Web involves digital items:

• Documents in standardized formats — HTML (Hypertext Markup Language) and XHTML (Extensible Hypertext
Markup Language); they may also use languages such as JavaScript and PHP
• Server software to process and transmit the documents — Apache HTTPD is the most common Web server
• Browsers interpret and display the documents — browsers (such as Mozilla Firefox, Internet Explorer, Opera, Safari,
Chrome, Konqueror, Camino, and Seamonkey) load the data from the server, parse the data, and show the “rendered”
page to the user on the computer screen

Many Web sites make use of open source projects for their Web sites. Open source projects are usually free (in cost) and are
distributed in a way that the code is also freely available for many uses; those who are interested can adapt the software for their
own use or share their changes with the community so that others can benefit. Moodle is an open source e-learning solution;
WordPress is a popular open source blogging platform; Joomla! is a popular content management system; and many businesses
use OSCommerce, ZenCart, or Magento for e-commerce. There are tens of millions of Web sites making use of these projects,
and multitudes more of users.

3. What is XHTML?
XHTML, or Extensible Hypertext Markup Language, is a modern guideline (improving on the previous HTML specification)
based on which many web sites are coded. It places an emphasis on standards, and when a site is fully standards-compliant (it is
valid code), it will display in a similar manner in all standards-compliant browsers. Internet Explorer stands out because it is one
of the worst browsers in terms of standards compliance, having favoured proprietary technology over Web standards.

All XHTML pages must have various components, including an XHTML declaration, an <html> tag, a <head></head>
section, and a <body></body> section. Everything else just goes between – or closes, like </html>.

A tag is opened when the tag’s word is enclosed within triangular brackets (less-than, greater-than):
<p> (paragraph)
and is closed when the tag’s word is enclosed, and is preceded by a forward slash (/):
</p> (end the paragraph)

If a tag doesn’t have anything between its opening and its closing, then in XHTML the tag is “self-closed”:
<meta name="description" content="A description goes here" />
by placing a forward slash (/) before the closing bracket.
RHHS Web Club

There is logic to the tags in that they are organized in a hierarchical fashion; in XHTML, open tags must be closed in the reverse
order as that in which they were opened, and all tags that are used must be opened and closed. These are called nested tags:
<p><strong>Bold text here.</strong></p>
<p> was opened first and closed last. <strong> was opened second and closed second-last.
 RHHS Web Club – September Package 5

A standards-compliant XHTML document demonstrating all common elements is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" XHTML declaration

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title of Web Page</title> Title of document
<link rel="stylesheet" type="text/css" href="style.css" />
</head> Reference to stylesheet
<body> Divisions (blocks)
<div id="wrapper">
<div id="content"> Top-level heading
<h1>Hello World!</h1>
Paragraph <p>This page is a demonstration of a <em><strong>
<a href="http://validator.w3.org/check?uri=referer">valid XHTML</a></strong>
Link document</em> that also illustrates the use of
<span style="text-decoration: underline;">various tags</span>.</p>
<h2>Another Section</h2>
Inline
<p>It is easy to see the “structure” in XHTML code. All open tags must be
element closed.</p>
<img src="http://snipurl.com/3pwnz" alt="A random picture" />
</div> Image
<div id="footer">
<p class="copyright">&copy; 2008 RHHS Web Club.</p>
</div>

©2008 Frederick J. Ding. Commercial uses prohibited.

</div>
<script src="http://javascript.rhhsmusic.com/site.functions_2.1.js" JavaScript
type="text/javascript"></script>
</body>
reference
</html>

Proper coding in XHTML will create a web page that can be viewed in most browsers. However, different browsers interpret the
same code differently. XHTML will be better explained in club meetings.

4. What is CSS?
CSS, or Cascading Style Sheets, is the most popular method of adding formatting to web pages. It is a stylesheet language used to
describe the presentation of a document, particularly HTML and XHTML documents. The concept and use is often referred to as
CSS, while a file containing only CSS styles is usually called a “CSS stylesheet”.

Part of the XHTML concept is that content should be separated from formatting. In other words, keep the textual, graphical,
and multimedia content in the main XHTML page, and style everything using a linked stylesheet.

Effects of CSS
Layout
CSS can specify where a particular block will be located on the page; for instance, whether a <div> aligns to the left or the right.
Sometimes, CSS will specify how a particular tag (eg. <img>) will always look, so that the appearance of different items on
different pages of the same site will look consistent. At other times, they will only apply to certain instances of the same tag.

Typography
CSS often changes the default look of text. This can be done by modifying the font face, text size, embellishments such as
underlines or strikeout, and bolding or italicizing the text. To change the text face for all of the text on the site, for instance, the
appropriate property would be applied to the <body> tag, while to change the text face for just the main headings, for instance,
the appropriate property would be applied to the <h1> tag.
 6 RHHS Web Club – September Package

Colours
Another common use of CSS is to add some colour to the page, whether it is styling the colour of the background for individual
elements, or modifying the colour of text.

Miscellaneous
There are some features of CSS which cannot be accounted for in the above three sections. CSS has other capabilities for margins,
padding, three-dimensional layering, accessibility, and so on.

Structure of CSS
Rules
CSS is comprised of rules, each of which changes something in at least one way. A rule is something such as the following:

body {
background-color: #181818;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
}

All of the above is a CSS rule.

Selectors
CSS rules (see above) include selectors.

body { …

Common CSS selectors that identify tags include body, div, img, span, p, a…

NOTE: most CSS stylesheets are written with selectors that identify specific objects on a page, such as those that are uniquely
identified by an ID property.

<div id="content">

In the example above, a corresponding CSS selector that would apply only to that object would be
#content -OR- div#content

Sometimes, CSS stylesheets are written with selectors that apply to multiple objects but not all objects of the same tag. Those
objects are assigned classes.

<div class="box">

In this example, a corresponding CSS selector that would apply to all of the objects (or all divisions) of the “box” class would be
.box -OR- div.box

There are pseudo-elements and pseudo-classes, such as

a:hover, a:visited, p:first-line
which identify an object in a particular state. We will be dealing with only the a:hover and a:visited selectors.
RHHS Web Club

CSS selectors can also apply to multiple objects. In such a case, the selectors are separated by a comma:

a, img {
margin: 5px;
border: 1px dotted #CCCCCC;
}

In the example above, the specified properties – margin and border – are applied to links as well as images.
 RHHS Web Club – September Package 7

Properties
CSS rules include properties which modify the objects that the rules apply to. Properties are likely the most important component
of Cascading Style Sheets, since they specify the changes that CSS should apply to a page.
body {
background-color: #181818;
font-family: Arial, Verdana, sans-serif; …

Frequently-used properties include

background (and variants), font (and variants), margin (and variants), padding (and variants), color, border
(and variants), display …

The properties are composed of the identifying trait (eg. background), followed by a colon (:), followed by the value assigned to
that particular property (eg. url(images/background.gif) ), followed by a semi-colon (;).
background: url(images/background.gif);

It is possible to combine multiple properties into one, a method that is referred to as “CSS shorthand”.

Examples include the font, margin, padding, and border properties. The following properties
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
margin-bottom: 20px;
can be shortened to
margin: 20px 10px;

©2008 Frederick J. Ding. Commercial uses prohibited.

CSS shorthand reduces file sizes of stylesheets. It could also have the secondary effect of obscuring the code, decreasing readability.
However, all modern Web browsers support shorthand methods; properly using them will not affect the appearance.

5. JavaScript
Not all of your time will be spent learning in this club, so JavaScript will only be introduced. It is a client-side scripting language
where the code is executed as the page is loaded or as the user interacts with the page. In simple terms, Web developers can
improve the site’s interactivity using JavaScript.

It uses a similar language structure to large-scale languages such as C and Java. It also has many built-in methods to deal with Web
page-specific operations. Functions of particular importance are those that manipulate the Document Object Model (which
addresses various items on a Web page).

Built-in functions of the “window” object interact with browser windows, while functions in the “document” object interact
with objects in an HTML/XHTML page.

JavaScript also supports variables and common data types, including strings, integers, floating-point, hexadecimal, and arrays. It
supports the simple if…else, switch, for & while loops.

JavaScript scripts with the “application/x-javascript” or “text/javascript” MIME types are attached to XHTML
documents (typically in the <head> section or sometimes immediately preceding the </body> tag) in this fashion:

<script type="text/javascript" src="src/to/script.js"></script>

Unlike most XHTML tags, <script> cannot be self-closed.

 8 RHHS Web Club – September Package

If the script is not contained in an external file but is in the XHTML document itself, the script code should be inserted as:

<script type="text/javascript">
//<![CDATA[
// code here
//]]>
</script>

Note that in XHTML documents, particularly those sent with a MIME type of “application/xhtml+xml”, the code must be
in a CDATA block such that the XML parser will not treat the code as XHTML/XML content. (XML parsers do not naturally
disregard the content between tags.)

6. Graphics and multimedia

XHTML offers many ways to enhance documents using graphics and multimedia. Nearly all modern Web pages will use graphics
and multimedia to improve user-friendliness.

Cross-platform graphic formats such as JPEG, GIF, and PNG can be easily embedded using a simple tag:

<img src="src/to/image.png" alt="A mandatory description of the file" />

<img> tags are always self-closed. The alt="" parameter is mandatory for accessibility and standards compliance.

XHTML does not limit Web pages to text and static graphics. Flash content (typically .swf files) is extremely popular on Web
sites. Video formats like QuickTime (.mov) or standards-based MPEG-4 content (.mp4/.m4v) can also be used on Web pages.
Despite the open nature of the MPEG-4 format or the open source nature of Java, most Web sites will avoid using them in favour
of Flash due to 98% adoption on modern personal computers.

Other multimedia formats are only embedded using the <object> tag. For backwards-compatibility, some Web developers will
include an <embed> tag nested within the <object> tag. However, nearly all modern browsers use the <object> tag for
embedded multimedia. Flash and QuickTime are the most commonly embedded formats.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
9,0,28,0" width="400" height="330">
<param name="movie" value="http://blip.tv/play/gbNFy9VDAA" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
</object>

The above code is a cross-platform method of embedding Flash content (in this case, a video). Note that the actual location of the
object is not specified in the <object> tag, but in nested <param> tags. This is specific to content requiring browser plug-ins, as
the <object> tag loads the Adobe Flash Player, and the <param> tags pass on the location and other details to the Flash Player
plug-in. The same applies to content intended for QuickTime, except that the location is in a <param name="src"> tag rather
than <param name="movie">.

Unfortunately, in order to maintain compatibility with older browsers, developers are forced to use the non–standards-compliant
RHHS Web Club

<embed> tag or a JavaScript function. As the diversity of browsers increases, more developers are choosing to use the free, open
source script “swfobject”. Similar scripts exist for other formats.

Cross-platform formats can be embedded using the standards-compliant data="" parameter of the <object> tag:

<object width="400" height="300" data="src/to/image.tif" type="image/tiff"></object>

Important! In the next draft version of XHTML, even the <img> tag will be replaced by the <object> method of embedding
non-textual content. Become very familiar with standards-compliant object embedding.
 RHHS Web Club – September Package 9

Form for the Application of Hosting PLEASE PRINT CLEARLY

____________________________________________________________________________________________________
Name Username (max. 8 characters)

____________________________________________________________________________________________________
Contact E-mail

____________________________________________________________________________________________________
Desired subdomain (example: demo.freddyware.org) **** You can choose a subdomain at freddyware.org -OR- rhhsweb.net

____________________________________________________________________________________________________
Signature Date

Agreement for the Use of Hosting PLEASE READ CAREFULLY

You must abide by these (simplified) conditions if you should accept hosting provided by the Web Club. As the club’s operations
are funded by the school, all uses of the hosting services must be consistent with school policies.

In order to use the service, you agree to abide by all applicable laws in the jurisdiction of Richmond Hill, Ontario, Canada. You

©2008 Frederick J. Ding. Commercial uses prohibited.

may not post or link to material that is unlawful, threatening, abusive, malicious, defamatory, obscene, profane or otherwise
objectionable in any way.

In particular, content relating to the following topics are not permitted on the hosting service:

• Pirating of software and multimedia

• Adult content
• Alcohol, smoking, and other drugs
• Guns, weapons, ammunition, and explosives

You may not use the hosting service to send unsolicited e-mail (SPAM). Each message that is in violation of this policy will incur a
punitive fee from the server provider, which will be charged to you.

You also acknowledge that some executive members will always have administrative access to all hosting accounts, and may
remove any content (deemed to be questionable) without notice.

“You agree to indemnify us (club executive members, the school administration, FreddyWare, and the server provider) and hold
us harmless for any breach by you or claims against us by a third party for all claims, actions, proceedings, losses, liabilities,
damages, costs, and expenses arising due to your breach of this Agreement.”

The club executives, the teacher advisor, the school administration, and the Student Council will have the authority to decide
what is in violation of these policies.

If you are applying for hosting, sign below to accept these terms.

____________________________________________________________________________________________________
Signature Date