Skip to main content
Home
Page

Coding Standards

XHTML Coding Standards main content

I know everyone is used to using correct layout and style for coding Java assignments. Since you are writing code for others to read and grade, it makes sense for the entire class to use a consistent style to enhance readability and maintainability.

This Style Guide puts forth the coding standards, conventions, and guidelines used in CS 350 for writing correct, high-quality, and maintainable XHTML, CSS, and JavaScript code. Emphasis is placed on readability and debugging -- and not on optimization. While you may disagree with some aspects of these standards, view than as our company policy and adhere to them to make your grader's life easier.

In addition to the standards, instructions are given for setting HTML-Kit's Preferences to make adherence to many of these standards automatic.

CS 350 Coding Standards

Doctypes

With the exception of the first Lab, always write your code to conform to XHTML 1.0 Strict. By choosing Strict, you are electing to enforce a clean separation between content and presentation - the key principle to achieving accessibility.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Even though it is technically correct, do not add the XML declaration as the first line.

<?xml version="1.0" encoding="us-ascii"?>     <!-- Do NOT use this XML declaration -->

Microsoft Internet Explorer 6.0 and earlier goes into quirks mode if there is anything on the first line before the DOCTYPE, including the xml prolog declaration. A HTML comment, even an empty one, will cause the same problem.

Doctype settings with HTML-Kit

Use the Edit Menu | Preferences ... | Tidy Tab to set

  • Output to XHTML
  • Doctype to Strict
  • Unselect the "Add XML declaration to XML/XHTML output" switch

Comments

Follow the DOCTYPE with a file header comment to help the grader locate your work, indicate the amount of time you spent on completing the assignment, and state the CS 350 honor code.

<!-- 
Account: Enter your cs350 account number here
File: U:\Lab2\index.html

Honor Code: I pledge that this code represents my own work.
I received help from (enter the names or write "no one") in designing and debugging my program.
-->

screen capture of HTML-Kit's time tracker

If you work with HTML-Kit at home, an easy way to keep track of the time spent working on the assignment is to enable the time trackerwith HTML-Kit preferences

Next, use the Tools Menu | Time Tracker | Set User and add your name as the user

To check the work time for the assignment, use the Tools Menu |Time Tracker | View Report

This feature is not available in the Hebeler Labs due to write permissions to the C:\ drive.

Meta Elements

At a minimum, use meta elements to make explicit the character set, page description (this can be as short as "Lab 2: Web Page Authoring with XHTML-Kit", keywords (again keep this short), and your name as author.

XHTML requires all pages to have the title element.

<meta https-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CS 350: Lab 2</title>
<meta name="description" content="Lab 2: Web Page Authoring with XHTML-Kit" />
<meta name="keywords" content="Web, Internet, XHTML, CS 350" />
<meta name="author" content="Your Name" />

screen capture of HTML-Kit META toolbar

Meta elements are easily inserted with HTML-Kit by clicking theDocument Plugin tab (standard with HTML-Kit) and using the METAtool and selecting the appropriate meta elements.

Tip: Set HTML-Kit to open new documents with your customized comments and meta elements. Go to HTML-Kit Preferences, select the Startup tab, check Insert following text into new documents: and paste your customized XHTML code in the text box.

White Space

Programmers use both horizontal (indentation) and vertical (blank lines) to enhance readability of code.

For example, 3 blank spaces are used for indentation to show the logical structure and blank lines between chunks of code to offset sections.

My own preference is to not use horizontal indentation with block elements. That is, block elements appear in column 1, i.e. the leftmost position to avoid dealing with line wrap and formatting of code generated with server-side scripting or DOM manipulation. This is certainly a minority position, but one that works for me. However, vertical white space between major chunks of information becomes especially important to show structure.

To see an example of this, use your browser's View Source menu item to view this page.

Horizontal indentation is optional in CS 350 - experiment both ways and see what you prefer. However, formatting for readability, regardless of horizontal indentation, is required for the purposes of grader sanity.

Should you wish to use horizontal indentation to highlight the structure of your XHTML code, Tidy's settings allow you to toggle on or off indentation of content.

Screen capture of HTML-Kit's indentation settings

Use the Edit Menu | Preferences ... | Tidy Tab to set

  • Select the "Indent Content" switch
  • Select the "Smart indent" switch
  • Indent size to 3
  • Wrap at to 80

Feel free to experiment with the white space -- keeping in mind that your goal is to enhance the readability of your XHTML code by others.

You may wish to have two custom config file settings to use with Tidy, one for on-screen display and one for printing, and switch between the two by selecting "Run with custom config file".

Printing

In most cases, we ask that you submit two printouts: both your XHTML code and your page as displayed in the browser. This allows us to annotate your printouts with comments and problem areas.

screen capture of HTML-Kit's print settings

Use the Edit Menu | Preferences ... | Print Tab to set

  • Wrap long lines
  • Print line numbers
  • Print document titles
  • Print date
  • Print page numbers

You may also consider reducing the Editor Text Font size when printing to save paper.

CSS

We will write code that conforms to CSS 2 recommendations. Be sure to validate your CSS with the W3C CSS validator (using HTML-Kit's OnlinePlugin).

As much as possible, use external style sheets to provide a uniform, maintainable look to your Web pages. Limit the use of embedded and inline CSS to override the external style sheet (or for occasional single-time formatting). Consider using the media attribute with separate external style sheet(s) to control the way your Web pages print.

Best Practices

  • For CS 350
    • write clean CSS code assuming a standards-compliant browser like Firefox
    • Avoid the use of CSS hacks for older browsers or flawed implementations of CSS
    • Test your pages with Firefox
  • Use CSS to remove all presentation from the HTML code, leaving it clean and semantically correct
    • Place links to purely decorative images in the CSS, not in your XHTML
    • Use CSS positioning for layout, limit the use XHTML tables to data
    • Use XHTML elements to mark up your code based on semantics; avoid the overuse of divs, spans, and classes
    • Test your page with CSS disabled
  • Use meaningful identifier and class names.
    • Avoid choosing identifier names like "red" if there is a chance it might change to a later time to a different color
  • Use relative-length measures; avoid the use of absolute-length measures whenever possible
/* 
Account: CS35002_nn
File: U:\Lab4\lab4.css
Author: Your Name
*/

BODY {
   background-color: #FFFFFF;
   color: #000000;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 90%;
}

A {
   background-color: transparent;
   color: #0000FF;
}

A:hover {
   background-color: #FEFF00;
   color: #FF0000;
}

Javascript

Even though JavaScript is a programming language in its own right, many programmers seem to forget about coding standards with JavaScript. In general, follow the same coding guidelines as you would with Java.

  • Naming conventions
    • Use meaningful identifier names with lower camel casing
    • Avoid the overuse of global variables
  • Comments
    • Use single-line comments (double forward slash // delimiter) to summarize the actions of blocks of code.
    • Proceed every function with a prolog comment that describes its purpose.
  • Grammar
    • Use single quotes for string literals so XHTML attributes may use double quotes
    • Consider using the <noscript> tag to provide alternative text for JavaScript disabled browsers
    • Use parentheses to indicate the precedence of operators
  • White space
    • Use 3 spaces indentation to highlight the JavaScript code's control structure
    • Place one statement per line to enhance readability
    • Place a blank line before inline comments to enhance readability
    • Place a blank line between functions to enhance readability
  • Place JavaScript functions in external (*.js) files and link to them from your XHTML document

PHP

The PHP standards are based on the PEAR Coding Standards, but simplified somewhat to better fit the requirements of CS 350 and smaller student assignments.

  • PHP Code tags
    • Always use the full <?php ... ?> to delimit PHP code, not the <? ?> shorthand
  • Comments
    • Use single-line comments (double forward slash // delimiter) to summarize the actions of blocks of code
    • Proceed every function with a prolog comment that describes its purpose.
  • White space
    • Use 3 spaces for indentation to highlight the code's control structure
    • Place one statement per line to enhance readability
    • Place a blank line before inline comments to enhance readability
    • Place a blank line between functions to enhance readability
  • Naming conventions
    • Use meaningful function and method names with lower camel casing; use upper camel casing for class names
    • Variable names must begin with a $, use lower camel casing for variable names
    • Constants should always be all-uppercase, with underscores to separate words
<?php
   $age = 100; // global variable used for testing only

   //define two constants for minimum and maximum ages
   define("MIN_AGE", 21);
   define("MAX_AGE", 90);

   //determine if the user is of legal age
   if ($age < MIN_AGE) {
      print("too young");
   }
   elseif ($age >= MAX_AGE) {
      print("too old");
   }
   else {
      print("perfect");
   }
?>
Last modified: Monday, 17 August 2015, 3:10 PM
loader image