Introduction

Below is a quick introduction to entering content on the Denver Open Media website. In order to maintain consistency throughout the site, a single style sheet (CSS) has been defined for all of the pages. Like a wiki or any other collective online editing system this means that as you enter content you will rely on a system of predefined tags to format your page. The primary benefit to using these predefined tags is that in the future, as the style for the website evolves, only the file that defines those tags has to be edited to change the look and appearance of all the pages on the site.

All About Tags

So moving right along, let's start with the basics. There are two sets of tags that you will find most useful.

HTML tags

The first are specific HTML(the code behind most web pages) tags. These are tags already defined within HTML and follow the general pattern of <TAG>CONTENT</TAG>.

Style Sheet Tags

The second set of tags you will be using are tags that have been created within the site’s style sheet. These tags look like either: <span style="TAG:VALUE;">CONTENT</span> or <div class="TAG:VALUE;">CONTENT</div> These tags are a bit more complicated, but almost always follow that general pattern. Imagine that SPAN and DIV are containers, and that each container holds a whole bunch of predefined style options that we can choose from. While it is not critical to understand the difference, the DIV container is generally used to affect entire sections of content, i.e. indenting a whole paragraph while the SPAN container is used on text within sections of content, i.e. to bold a word in a sentence.

The Tags

Text Style: <span class=”VALUE”></span> The options for alternate text styles are currently: emphasize

Example: I would like to express my <span class="emphasize"> deep compassion </span> for breathing.

Looks like: I would like to express my deep compassion for breathing.

Headers: <h1> </h1> through <h3> </h3> There are three header levels currently defined. h1 is the largest heading, h2 is a smaller sub-heading meant to go under an h1, and h3 is the smallest sub heading.

Example: <h1>Welcome </h1>

Looks like:

Welcome

Lists: <ul> <li> </li> <ul> UL stands for unordered list. The UL tag encloses LI tags which stand for list item. It is easiest to understand how this works from an example:

<ul>
	<li> List Item One </li>
	<li> List Item Two </li>
</ul>

Looks like:

List Item One
List Item Two

Extra Line Breaks: <br \> BR stands for break. Since the input filter will only detect the first blank line you enter, the <br \> tag is for adding extra blank lines. Note in the example that it does not require a closing tag!

Some randomn miscelaneous text and some more and more and more.
<br \>
<br \>
Some more randomn miscelaneous text and some more and more and more.

Looks like: Some randomn miscelaneous text and some more and more and more.

Some more randomn miscelaneous text and some more and more and more.

Ordered Lists: <ol> <li> </li> <ol> OL stands for ordered list. The OL tag encloses LI tags which stand for list item. It is easiest to understand how this works from an example:

<ol>
	<li> List Item One </li>
	<li> List Item Two </li>
</ol>

Looks like:

List Item One
List Item Two

Links: <a href=”URL”>text for the link</a>

Example: <a href=http://www.deproduction.org>Deproduction </a>

Looks like: Deproduction

Indenting a block of text: <div class="indent1"> This style tag will indent a block of text.

Example: <div class="indent1"> this text will be indented one level. </div>

Looks like:

this text will be indented one level.

Add new comment

staff