Yeah so I am obviously more than a little bias on this and have somewhat a headstart regarding building websites as it’s my day job. However in my opinion HTML and is styling sister CSS should be one of the most important tools to anyone that creates content online. HTML/CSS are some of the fundamental building blocks of the web and they are not likely to go away anytime soon (even in internet time). Now I’m not talking about the kitchen sink here such as floats, background-colors, clearing divs and valid xHTML strict markup, but the basic tags and styling elements like

<p>
<h1>
<strong>
<em>
<ul>
<li style="color:red;padding-bottom:10px;list-style-type:disc;"> 

that can bring to life a blog post, a news item, an article or basically any website based around a CMS. Most CMS’s allow for a html view as well as a visual editor such as wordpress’s own:

More often the tools for managing and publishing content online are handed back to the people that operate within the company rather than a web design/development agency that built the site in the first place. With the web agency model changes can cost alot and take a long time for the request to be carried out. This handing back control is a great thing, meaning errors are fixed more quickly and more content is produced by the people within the organisation as barriers to production are reduced. But also quite often we find the the user wants more than what the visual editor allows, headings or fine manipulation of the content (image sizes, additional padding or unwanted content that appears with embeddable content). Now it’s possible to extend these visual editors, add more buttons, more rules in the main css file. However this is simply an abstraction and can’t possibly cater for all eventualities.

The answer in my opinion is that a basic understanding of HTML and CSS is an essential tool for employees and user generated content in general. Most comment textareas allow for simple styling, this can make your comment stand out, become more readable or attractive, as well as your own website’s content. How many times have you seen blog posts with too much space or elements buffering up against one and other (this may just be me though) and been distracted by it?

I am not going to go into HTML 101, there are plenty of resources out there for that. But here are a bunch of tags and css styles that I think should be part of any content producers toolbox:

Headings

<h1>This is the largest heading</h1>
<h2>This is a slightly smaller heading, maybe a sub-heading</h3>
<h3>This is an even smaller heading, maybe a section heading</h3>
<h4>This is probably a sidebar heading</h4>

e.g.

This is the largest heading

This is a slightly smaller heading, maybe a sub-heading

This is an even smaller heading, maybe a section heading

This is probably a sidebar heading

A guide to heading hierachy:

Text formatting

<p> – A paragraph, most default css will add padding to the bottom of a paragraph, so if your content is publishing as a huge block of text the WYSIWYG is probably just adding one <br /> (a line break rather than a paragraph) – you may need to click to HTML view and remove the br’s and wrap each paragraph in <p> and closing with </p> – most HTML tags need to wrap the content they are containing, otherwise the browser will continue in that context, so no closing tag and the rest of the page would be considered a paragraph and potentially confuse the browser

<br />A line break, see above, one of the exceptions a this is self closing

<strong>make the content bold <strong>this is bold</strong>

<em> -make something italic <em>this is italic</em>

<ul> – a list container

<li> – a list item

combine them for

<ul>
<li>list item</il>
<li>list item</il>
</ul>

e.g.

• list item
• list item

<a> – a link, one of the building blocks of the web, this  tells the browser where the text inside the <a> where the link should point to <a href=”http://www.google.com”>Google.com</a> – here we see the first attribute for a tag, some additional information informing the browser what it should do with that tag. in this case the link should point to Google.com

<img> – an Image  – maybe it’s too big and you don’t/can’t/won’t go to an image editor (by far the best method – but that’s another blog post) so <img src=”mygreatphoto.jpg” width=”150″ /> change the width and it will scale NOTE uploading your 10 megapixel holiday snaps and resizing to 100 pixels is not cool, also be careful of aspect ratios, if the height and width attributes are both present changing one with stretch the image.

<blockquote> – put something in a quote

Tables

<table> – if you want to display some data perhaps many CMS’s don’t have great or any table editors. Now the code is a little tricky but basically it follows something like this (not strictly accurate, nor standards compliant but we have to start somewhere and this will work):

<table>
<tr>
<td>Heading one</td>
<td>Heading two</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>

e.g.

Heading one	Heading two
Value 1	Value 2

TR are rows and TDs cells much like excel.

Right so that’s the basics of HTML but what of CSS, now this is a bit more of a nebulous beast, but we can cover some of the basic styling concepts, now ideally CSS would go in a stylesheet  – a file linked within the webpage that sits of the server and isn’t really accessible for editing within the CMS – so for this we will need to inline styling (certainly not ideal, markup and styling where possible should be separated as this makes for cleaner, efficient, faster and more accessible code, but we are talking about people with access only to the CMSs hre). The CSS can be applied to the directly HTML tag but use of the style attribute, e.g

<p style="padding-bottom:10px;">some text with some extra padding</p>

this will add another 10 pixels (the default mesurement for much web design)

<p style="color:red;">I'm red text</p>

colours the text red, note the american spelling the code is called a HEX color and is a representation of any of 16 million colours (thus a code and not a name). See here for a nice long list of colours you can also use.

e.g.

I’m red text

Alignment: maybe you want to align some text, or an image.

For text:

<p style="text-align:left;">align left</p>
<p style="text-align:center;">align center</p>
<p style="text-align:right;">align right</p>

e.g.

align left

align center

align right

For images:

<img src="myaweslomeimage.jpg" style="float:left;" />, <img src="myaweslomeimage.jpg" style="float:right;" /> 

note the text will ‘wrap’ around the image.

Font size, increasing the font size can be something often the CMS will not allow, this can be mostly to ensure there is a consistency in the output of the content, the same can be said for the font. But there may be a legitimate reason for this being required:

Font size:

<p stlye="font-size:16px;">A bigger piece of text</p>

note that most text on the web will be around 12-14px depending on the site. So 15px 16px 17px will be ‘large’ text, 12px, 11px 10px will be ‘small’ text.

e.g.

A bigger piece of text

Font type, now this is one to be taken rather carefully, not only are there very few fonts to choose from (for far too many reasons that I care to go into lest I bore you more that I already have) but using too many fonts on a size can be confusing and not very pretty. However a well placed header in Georgia can really bring the content out:

<h2 style="font-family:Georgia,"Times New Roman",Times,serif;">A serif heading</h2>
<h2 style="font-family:Arial,Verdana,Helvetica,sans-serif;">A sans-serif heading</h2>

e.g.

A serif heading

A sans-serif heading

The reason we put three or for fonts down is because the user’s computer may not have that particular font available so in that case the next font on the list is used and so on.

Now that’s really only a taster, but for many purposes you won’t need too much more, the WSYIWYG although an excellent tool, is a blunt instrument, it tries the best it can but for those instances where you need a more precision instrument, HTML and CSS is the best way to go, click thew HTML view and delve about, there will be a lot of stuff in there and it can be quite daunting, but with practice the results will be better styled and robust content with less rendering errors.