This document is meant to serve as a loose style guide for writing posts on Calcuttagutta, and as an introduction to the HTML you might need. I generally follow the guidelines laid out here, to achive a uniform look to my articles, but one is of course free to do something else. I'll add a link to this post under Meta in the left column, and update it as people point out better ways to do things or ask questions and so on.

Text formatting

<i>italics</i>	italics
<b>bold</b>	bold
A<sup>superscript</sup>	Asuperscript
A<sub>subscript</sub>	Asubscript
<h6>Headline</h6>	Headline
<h5>Headline</h5>	Headline
<h4>Headline</h4>	Headline
<h3>Headline</h3>	Headline
<h2>Headline</h2>	Headline
<h1>Headline</h1>	Headline
<span style="font-size:200%">Large text</span>	Large text

Using the h1-6 tags to create headers means that the style will follow the css of the rest of the page, which may or may not be what you want. Using % to specify font size gives the size in relation to the text around the tag, usually the default article text. It's also possible to specify font size as px.

Images

The basic tag to add an image is

<img src="url to your image">

However, in order to make it look a bit nicer, I usually center images, give them a border and a bit of space, and perhaps some picture text in a slightly smaller font. Like this:

<div style="text-align:center;padding:5px 0px;font-size:80%"><img src="url to your image" style="border:1px solid black;margin-bottom:2px>
Picture text</div>

Which results in this:

The column that holds the article text is 640 pixels wide, which means that you should limit your images to this size, or 638 if you add a border like in the example. If you want to make a larger image available, it's an option to make the image itself a link to the larger image.

Another nice thing to do with smaller images is to float them to one side, with text running next to it, like in this article. The code for that is

<div style="float: right; padding-bottom: 5px; padding-left: 5px; text-align: center; font-style: italic;"><img src="url to your image" style="border: 1px solid; margin-bottom: 2px;">
Picture text</div>

The observant reader will notice that the picture in the example is align with the top and the right edges of the text. I achieve this by adding some space on the left and bottom, and not on the top and right. This is a matter of taste, I guess, and if you want the same margin all the way around, use a simlpe padding:5px;. Also, note that the text of the article needs to continue on the same line as the </div> for the top edge of the text to align with the picture.

Links

Add a link like this:

<a href="url">link text</a>

It is also possible to use a picture as a link, to do that just add an img-tag inside the a-tag:

<a href="url"><img src="url to image"></a>

When linking to another article on Calcuttagutta, it is best to use relative links. What this means is that for example an url pointing to this article shold be given as /articles/2264/, instead of the full http://www.calcuttagutta.com/articles/2264/. The reason is that the relative link makes sure you stay on the same subdomain, so for example if you visit the mobile version at m.calcuttagutta.com, and click the first link, you will stay on that subdomain, whereas the second link would take you to plain www.calcuttagutta.com.

Code

This is perhaps of limited interest, but what I use to get the monospaced font is either <blockquote style="font-family:monospace;"> to get an indented block of code, or <span style="font-family:monospace;"> to get inline text like here.


-Tor Nordam