Web Services

HTML/CSS Guide - Web Services: Antioch University new England

HTML/CSS Guide

Page Template

All pages should begin with a <title> tag and an <h1>:

<title>PAGENAME - DEPARTMENT: Antioch University New England</title>
<h1>PAGE NAME</h1>

Headings

This is an H1 - only used for page heading

This is an H2 - can be use as a subheading

This is an h3 - usually used as a paragraph or sub-subheading

CODE: <h1>This is an H!</h1>
CODE: <h2>This is an H2</h2>
CODE: <h3>This is an H3</h3>

Paragraphs and Line Breaks

This is a paragraph with a top margin of 0. Most paragraphs have a default top margin of about 15 pixels, but when you want a paragraph directly below a heading tag you need to apply the class="top0" attribute.

CODE: <p class="top0">Paragraph text goes here.^lt;/p>

Regular paragraphs have a blank line above and below the text. Lipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

CODE: <p>Paragraph text goes here.^lt;/p>

And sometimes you need
to manually place a line break.
That's when you use a <br> tag.

CODE: <p>And sometimes you need<br>
to manually place a line break.<br>
That's when you use a<br>
<br> tag.</p>

Bold/Strong Text

This is an example of bold/strong text.

CODE: <strong>Text displayed as strong also known as bold</strong>

Italic/Emphasized Text

This is an example of italicized/emphasized text, which should only be used for titles.

CODE: <em>Text displayed in italics.</em>

Pullquotes

“This is a pullquote that spans the full width of the page. - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.” — AUTHOR, TITLE

CODE: <div class="pullquote">“PULLQUOTE TEXT GOES HERE”<span class="pqauthor"> — AUTHOR, TITLE</span></div>

If you do not want the author cited, remove this part of the code:
<span class="pqauthor"> — AUTHOR, TITLE</span>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CODE: <blockquote>BLOCKQUOTE text goes here</blockquote>

Horizontal Rule

The orange lines above and below are called horizontal rules.

CODE: <hr>

Lists (Ordered and Undordered)

Unordered/Bulleted List

This is an example of an unordered list with three list items. You can add more items by repeating the line of code with the <li> tags:

list item
list item
list item

CODE:
<ul>
<li>list item text</li>
<li>list item test</li>
<li>list item test</li>
</ul>

Ordered List

This is an example of an ordered list with three list items. You can add more items by repeating the line of code with the 'li' tags:

list item
list item
list item

CODE:
<ol>
<li>list item text</li>
<li>list item test</li>
<li>list item test</li>
</ol>

Space between List Items

To add more spacing between lite items add class="margin05" or class="margin10" to the <ul> or <ul> tag.

list item
list item
list item

CODE:
<ul class="margin10">
<li>list item text</li>
<li>list item test</li>
<li>list item test</li>
</ul>

Tables

HTML tables allow you to arrange rows and columns of data. Since HTML has no other way of aligning text and images, tables have also been used to create complex page layouts with graphics, text, and other elements. For our purposes, tables are primarily used to display data or columns of text.

The <table> tag should include the following attributes and values:
width="100%" (optional)
class="tbl3"
border="0" or border="1"
<table border="1" class="tbl3">
     <tr valign="top">
     <td><strong>Name</strong></td>
     <td><strong>Height</strong></td>
     <td><strong>Sport</strong></td>
</tr>
<tr valign="top">
     <td>Jill</td>
     <td>5'6"</td>
     <td>Soccer</td>
</tr>
<tr valign="top">
     <td>Jenn</td>
     <td>5'9"</td>
     <td>Track</td>
</tr>
<tr valign="top">
     <td>Joanne</td>
     <td>5'2"</td>
     <td>Hockey</td>
</tr>
</table>

The<table> and </table> tags open and close the table. The <tr> and </tr> tag enclose each row and the <td> and </td> tags open and close each cell within the row. Most of our tables have cell contents aligned to the top of the cell. The valign attribute is used within the <tr> or <td> tags to define vertical alignment within the cell (e.g., <tr valign="top">). By default, cell contents are placed in the middle of the cell, but valign can be set to "top".

This is what the table looks like:

Name	Height	Sport
Jill	5'6"	Soccer
Jenn	5'9"	Track
Joanne	5'2"	Hockey
Jill	5'6"	Soccer

Last Updated: 11/10/08