Web Style Guide
The following style examples refer to the proper use and styling of specific tags within the content area of all Silver Lake College HTML documents. In many cases, when the correct tag is used the Style sheet will do the styling automatically.
Text formatting
- <!--...-->
- Within the HTML code of a Web document, these mark out comments by the programmer. They are not visible in the final published product, but many times provide insight on how the code was created.
- <!DOCTYPE>
- Defines the document type, or programming language and level of accuracy for which the Web document was designed. The Silver Lake College pages are programmed in standards compliant XHTML Transitional.
- Internal link
- Internal links are colored teal and underlined so that readers with color-blindness can still see that they are links. The style sheet automatically underlines and colors all links created within the content. All links must have a title attribute to describe their location within the site. Some may also have a relationship attribute which will determine the audience group in which the user is interested.
- External link
- An external link is styled similarly to an internal link, but a small icon indicates that the user will be taken to another Website when they click.
- Abbreviation
- Abbreviations of words (such as etc. and Inc.) are marked with <abbr> tags within the code. They are given a title attribute that defines the full text that they represent, which they user can view when they mouse over the abbreviation. They are styled with a light green underline to denote
their use.
- Acronym
- Acronyms (such as NCA, FERPA and CESA) are styled similarly to abbreviations and must also include a title attribute that defines
their meaning.
- 123 AnyStreet
SomeCity, ST 12345-6789
- The address tag is used to render addresses in italics so they stand out from other text.
- Bold text
- The strong tag is used to make text stand out from the text in the rest of the document. It is most
effectively used within a paragraph to make certain words stand out.
The blockquote tag is used for long quotations.- This is a citation.
- Blockquotes are longer quotes and may have a source attached to them. They appear indented on either side to set them apart from regular text.
The cite tag is used for citations within the blockquote.
- Emphasized text
- The em tag is used to emphasize text and renders it in italics.
Heading 1
- The first heading (<h1>) is styled in teal and should only appear once on each page. Heading 2 and the following sub-headings may be used more than once in a document, but should be used to organize it accordingly.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
- The <hr> tag is used to render a horizontal line across the page, which is effective for separating areas of content.
-
List styles
Definition List
- Definition Term
- Definition.
- Another Definition Term
- Another definition.
Unordered List
- Line item
- Line item
- Line item
Ordered List
- First item
- Second item
- Third item
Table styles
Table without borders
| Table header |
Table header |
Table header |
| Table footer |
| Table data |
Table data |
Table data |
| Table data |
Table data |
Table data |
Table with borders
| Table header |
Table header |
Table header |
| Table footer |
| Table data |
Table data |
Table data |
| Table data |
Table data |
Table data |
Form styles
Programs
Program Core Courses
- ABC 101 Introduction I3
- ABC 102 Introduction II3
- ABC 106 Intermediate I3
- ABC 206 Intermediate II3
- ABC 301 Advanced I OR ABC 302 Advanced Subject3
- ABC 400 Master3
Electives
- 6 Program Electives18
Summary
- Total Program Credits36
- Liberal Arts Core45-50
