Word wrap on
Word wrap off
Word wrap on (top)
Word wrap off (bottom)
Word Wrap is accessed from the Edit menu
Word Wrap is accessed from the Format menu
| Home > Lecture Notes > Style Guide |
style n. & v.
1 a kind or sort, esp. in regard to appearance and form.
2 a manner of writing or speaking or performing.
Introducing their Java Style Guide, Sun Microsystems make two important observations:
A clear, readable source document written in a consistent style is much more likely to be maintained because it is much easier to read . It is also more likely to be read and studied by other authors if it is easy to locate main sections of the source text and examine how certain features or effects were implemented. The "other author" will be you in a very short period of time; you will be amazed how quickly the trail goes cold after you complete a project.
The following template shows the minimum required elements in an XHTML document including the optional (but highly recommended meta element specifying the character encoding (and Style-Type if using style sheets):
<!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" xml:lang="en" lang="en">
<head>
<title>My Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<p>... Your HTML content here ...</p>
</body>
</html>
The example above meets the XHTML 1.0 Specification and passes the W3C HTML Validation Service "XHTML 1.0 Transitional" check.
The comment delimiter tags are <!-- and -->
The syntax for HTML comments is:
<!-- A single-line comment -->
<!--
A comment spanning several lines, perhaps introducing a major
sub-section of the document or referencing the source of
material.
-->
Strictly speaking <! is the markup declaration open delimiter and -- is the comment open/close delimiter; strings of hyphens ("---") should be avoided in comments. If you want graphic separation use strings of equal signs ("===").
Include a small comment header in the HEAD element that, as a minimum, identifies the author, purpose of the document, when it was created, and when it was last modified (What, Why, Who, When).
Write a comment at the beginning of each major section of the document. For this class write a comment that identifies the particular lab, homework, or project assignment item in the source code.
Example:
<!--
Assignment: Insert a personal photograph; use the width, height,
and alt attributes
-->
<img src="myphoto.jpg" width="200" height="300"
alt="A quiet pint at Johnny Fox's, Co. Wicklow" />
HTML tags are not case sensitive; <IMG SRC="sample.gif"> is equivalent to <img src="sample.gif">.
However, markup conforming to the XHTML 1.0 Transitional standard is case sensitive and must be lower case. For this class all tags and all attributes will be lower case as shown in the img element above.
Tags that delimit main elements in the HTML document such as text format or textual divisions should be on separate lines. If the tag causes extra line spacing in the rendered document then the source should also have similar line spacing.
Examples:
<p>
This is the first paragraph<br />
with a line break
</p>
<!-- spacing in source shows division -->
<p>
And this is the next paragraph.
</p>
<!-- spacing in source shows division -->
<hr width="60%" />
Exceptions to the "tag on its own line" rule are text enhancement tags like <b>, <i>, etc. Also, a single line break as shown above is most appropriate at the end of the line it is breaking . Multiple line breaks, however, should be stacked up, one for each additional line, so that it is clear how much spacing is being forced.
HTML style guidelines can be summarized in three main areas:And here is the unordered list source code:
- Comments
- Line spacing
- Indentation
HTML style guidelines can be summarized in three main areas:
<ul>
<li>Comments</li>
<li>Line spacing</li>
<li>Indentation</li>
</ul>
Note that lists indent the list items; the source code for a list should stand out as clearly in the source text file as the list itself stands out in the final rendered document. Use the same guideline for tables.
If your text editor has a "word wrap" option, turn it off and end all your lines with a "hard" carriage return at the end of each line. Choose an appropriate line length and be consistent. I try to use a line length of about 72 - 80 characters. Note that some (X)HTML, in particular certain in-line JavaScript and Style Sheets, cannot be broken to a new line.
In this context "hard carriage return" means pressing the Return key at the end of each line; it does NOT mean ending all your lines with the line-break tag (<br />).
|
Word wrap on |
Word wrap off |
Word wrap on (top) Word wrap off (bottom) |
|
Windows 98 Notepad: Word Wrap is accessed from the Edit menu |
Windows 2000 Notepad: Word Wrap is accessed from the Format menu |
|
Print your HTML source document from your text editor with no word wrap. If it looks good on the printed page, it is probably properly formatted. On the other hand, if your spacing, indentation, and formatting are not what you expect you probably need to adjust your margins for printing and/or make your lines shorter.
When in doubt, use your best judgment. Stand back and look at your source code from a distance. Imagine that someone with a critical eye is going to click on "View Source" and look at your HTML code. If you have an interesting Web page, you can be assured that someone will!
Links and references to local files should use relative path names. Consider the following links to a Lab 1 Web page from a student's directory on the cs.clark.edu server in /home/students/fflin1234/public_html:
<a href="http://cs.clark.edu/~fflin1234/lab1.html">Lab 1</a> <a href="lab1.html">Lab 1</a>
The first path is an absolute path name. It accurately describes the location of lab1.html and will work correctly. However, since Fred's Home Page is in the same directory as lab1.html the second path name will also correctly locate lab1.html and is the preferred path name to use. It requires less typing and therefore subject to fewer errors; the server does not have to resolve a long path name; and most importantly at the end of the term when Fred moves his Web pages to a new server the path name will not need to be changed.
Cascading Style Sheet rules are made up of a selector (the element that the rule applies to) and a declaration (one or more property:value pairs). The complete declaration is delimited by open (left) and close (right) curly braces. Each property:value pair is terminated with a semi-colon. The semi-colon following the final property:value pair is optional, but highly recommended.
The main style guidelines for style sheets are:
hr { /* "K & R" bracing style */
height: 1px;
width: 80%; /* Common in C, Perl */
}
hr /* "BSD" bracing style" */
{
height: 1px; /* Common in Java, C++ */
width: 80%;
}
blockquote {font-style: italic} /* single line, no semi-colon */
Note that CSS comments are delimited by /* and */