The Tags

Special Thanks to...

Robobuilder for one of the first tag pages. It's really useful to let people see different elements in use in the template.

Header 1 <h1>

Header 2 <h2>

Header 3 <h3>

Header 4 <h4>

Header 5 <h5>
Header 6 <h6>

Basic Content

This is a link, acronym, deleted text, emphasized text, underlined text, strong text.


Paragraph and Text formatting

Basic Text - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede.

Text with large First Letter - To make a paragraph with large first letter (doesn't work in IE) add class "first letter" to the p tag surrounding the content wanted. <p class="firstletter">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam.

Indented Text - To make a paragraph indented add class "indent" to the p tag surrounding the content wanted. <p class="indent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi.

All Caps -To make text all caps add the class "allcaps" to the tag enclosing the text wanted. <p class="allcaps">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.

Orange Text - To make text orange simply add the class "orange" to the tag enclosing the text wanted. <p class="orange">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.

Olive Text - To make text olive simply add the class "olive" to the tag enclosing the text wanted. <p class="olive">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo.

public class Main {
 public static void main(String[] args) {
  //prints "Hello World!"
  System.out.println("Hello World!");
 }
}

Lists

Definition List
Can be used for all your definition list needs.
Lorem ipsum
Phasellus laoreet. Fusce vel nulla.
Integer nonummy
Cum sociis natoque penatibus et magnis dis parturient montes.
Phasellus varius
Phasellus varius magna vitae ligula.

Quoting

Blockquote
To make a blockquote add class "blockquote" to the div tag surrounding the content wanted in the blockquote. <div class="blockquote">

To make a blockquote title simply inclose the title like this - <h5>Title</h5>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In adipiscing dignissim diam. Vestibulum consectetuer risus faucibus sem. Phasellus varius magna vitae ligula. Nam volutpat sapien ut justo. Robobuilder on September 10th, 2006

Floating

Two-Column Paragraphs

To make a paragraph float left at 50% width add class "floatleft w50" to the div tag <div class="floatleft w50">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna.

To make a paragraph float right at 50% width add class "floatright w50" to the div tag <div class="floatright w50">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna.


Images

Floating Images

An Image that floats left
To make a image float left add class "floatleft" to the img tag <img src="images/yourimagename.jpg" alt="" class="floatleft">

imageLorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

An Image that floats left
To make a image float right add class "floatright" to the img tag <img src="images/YourImageName.jpg" alt="" class="floatright">

image Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo. Praesent semper nisl hendrerit enim. Phasellus laoreet. Fusce vel nulla. Pellentesque lectus. Pellentesque accumsan lobortis ante. Sed at mauris. Vivamus cursus sem in nisi. Nunc gravida ipsum ut tellus. Nam luctus purus non enim. Quisque commodo risus a nibh. Sed tellus mauris, lobortis et, vestibulum ac, vestibulum at, quam. Integer nonummy est. Morbi dui elit, tincidunt ac, cursus sed, tempus eu, magna. Cras quis pede. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.