Update your own content
If you want to have a fun learning adventure you can save much expensive time by providing your webmaster with content changes in HTML markup code ready to serve. You could be paying me only for the hard stuff, not for translating routine edits from your word processer documents into HTML. You or your staff will save a lot of your time and mine (I don't mind, really) by learning how to use a handful of HTML tags to do your own routine edits, instead of communicating to me what you want, reviewing the results, communicating the corrections, reviewing the corrections, etc., etc., etc. Simple changes are easy using the few simple tags below.
You can put together new or replacement HTML code from scratch, or you can obtain the original HTML code for the portion of the page you wish to change. Just “View Source” in your browser, scroll down to the part you want to change, copy what you need, and paste it into your plain text word processor (I recommend Text Wrangler, or better yet if you want to go hard-core, BBEdit, from Bare Bones Software).
Very often you can simply copy an item, modify it and replace the original version, or paste it wherever you want it to create a new item.
You can change wording, paragraphing, do bold, italics, indented text blocks, horizontal rules, headings and even lists using the tags below.
When you are finished, just copy ready-to-paste HTML markup, with any additional instructions in [square brackets], and paste it into an email to your webmaster, or, if you are my client, put all this in a Change Request to me. Submit one request per page if possible. Be sure to also copy and paste the URL of the affected page into the URL field of the requiest form so I know which page to update. If you need something that involves multiple pages, like a change to the master menu that appears on all pages, then just describe it as clearly as you can.
The Basics
Tags
A tag is anything between <>. For example, to render the word “Bold” in boldface you could type <strong>Bold</strong>.
There is an opening and a closing tag for items that need to be enclosed. The closing tag is the same as the opening tag, except for the “/” preceding the tag name.
For a few non-string items, like the line break <br>, horizontal rule <hr> or image tag <img [link]>, only one tag is used (no closing tag needed).
Spaces
All white spaces (like spaces, returns and tabs) are compressed into one space for text and are ignored by tags: thus
<strong> this is bold</strong>
and
<strong>this is bold</strong>
and
<strong>
this is bold
</strong>
all give the same result: this is bold. If you want a hard (non-breaking) space that is not absorbed use the html “entity” code: (with the & and the ;).
Block Level and Inline tags
Block level tags create blocks of content that start and end on new lines, e.g., paragraphs, headings.
Inline tags don’t create new lines, but keep the flow in-line, e.g., bold, italics.
Most Used Tags
Block Level
Headings:
<h1>typically the largest heading</h1>
<h2>typically the 2nd largest heading</h2>
...
<h6>typically the smallest heading</h6>
Examples of headings for this site:
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
Paragraphs:
<p>Paragraph text</p>
Block Quotes (indented paragraphs):
<blockquote>Indented text</blockquote>
This is a
block quote.
Lists:
Numbered List
<ol>
<li>list item text</li>
...
<li>list item text</li>
</ol>
Example:
- Item 1
- Item 2
- Item 3
Bulleted List
<ul>
<li>list item text</li>
...
<li>list item text</li>
</ul>
Example:
- Item 1
- Item 2
- Item 3
Inline Tags
<strong>bold</strong>
<em>italics</em>
line break without making new paragraph (single tag)<br>
Horizontal Rule
<hr>
The few tags above will let you do many simple editing jobs. If you need to do things not listed, such as make links (<a href...> tag), place images (<img> tag), change text sizes, colors, centering, wrapping, typefaces, backgrounds, borders, or make tables, and can’t figure it out from examples (you can start by viewing the source of this page), put your instructions to the webmaster in [square brackets] and clearly indicate the affected text and URL. Or you could explore the links below and learn how to do just about anything you can imagine.
Links
If you want to dig deeper, here are some links to help get started:
- General HTML info, resources, and tutorials:
http://www.htmlhelp.com/ - A handy & very complete quick reference card:
http://www.visibone.com/popups/htmlpop.htm - More links
That’s it. Print this page and you’re good to go. Enjoy.
