Simple Web Page Markup
The purpose of this page is to provide a few simple formatting rules for placing information on a web page. The focus is on actual html, what one sees in "source view" or if looking at an html page in a simple text editor like Notepad. First, a bit of background.
Linfield's web site utilizes style sheets to format content. Most web pages connect to three style sheets, external text files that establish rules for how information is displayed. One style sheet is global, covering rules the whole site uses, one is local, covering rules unique to a department, one is print, which covers how the page looks when it is printed out. It is possible to locally "mark up" a web page to change text color, size, page backgrounds, etc but we discourage doing this. For people using Dreamweaver or web based page editors, the focus should be on what is called "semantic markup". What this means is paragraphs are indented paragraphs, headings top sections of content, lists of items are marked up as lists. Here's how to do this:
Look at the source code. Put away the wysiwyg editor. When working in raw
html, text is marked up with "tags". The tags are contained within "<>" symbols
like "<p> or <li>. Most tags have an opening and a closing tag,
the closing tag defined by a backslash and appearing at the end of the marked
up section. A paragraph would open with "<p>" and right at the end of the paragraph,
you would place a "</p>". Here's a short table of the most commonly
used tags and their purposes.
Block level tags
These define blocks of content that begin and end with line breaks. They cannot "nest". That is, you cannot have a paragraph inside a heading and vice versa.
|Headings 1-6 (1 being largest)||Title of page or page section. They should always appear in descending size so an <h4> would appear below an <h3> to title a subsection of content.||<h1>Your heading content</h1>|
|Paragraphs||Mark up a paragraph of text. Should not be used for creating space on a page||<p>Paragraph of content.</p>|
|Lists (unordered)||Creates a bulleted list of items||<ul>
<li>First list item</li>
<li>Second list item</li>
These tags occur inside blocks of content and are generally used to highlight words or sentences.
|Line Breaks||Force a line break in page content. This does not have a closing tag.||End of line. <br />
|Italics||Emphasizes text||<em>Italics here</em>|
|Bold Text||Makes text bold||<strong>Bold text here</strong> or <b>Bold text here</b>|
Common Display Problems
- DO NOT SAVE A WORD FILE AS HTML! Word creates a horrible mess in the markup that you will never untangle. It's better to copy and paste and clean up by hand.
- My copy is full of question marks instead of apostrophes! - Word again. You need to replace apostrophes from pasted Word content with " ' ".
- My whole page is bold, italicized, or some giant heading! - You are probably missing a closing tag.
- I've tried everything and the content still looks wrong! - Everything happens for a reason on a web page so it's important not to panic. It doesn't hate you. It has no feelings. When this happens, simplify. In the source view, remove tags and start over. Quite often, wysiwyg editors will plug in lots of inline font markup that can overlap and nest in ways that foul things up. Pull the trash out and you'll have a clean slate to work with.
"They're More Like Guidelines"
- Don't underline text! Underlines indicate hyperlinks on a page and your readers will try to click on your text.
- Don't color your text! I know you want to. HTML gives you the power to punch up text to make sections that you think are important jump out more. Coloring text creates the hyperlink illusion above. It also makes your text harder to read. Instead, strive for short, concise content. Use lists. Use bold and italicized text but use it sparingly. Anything you do to make part of your content "jump out" makes the rest of the content harder to read.
- Spellcheck your content! We are a college, after all.