Essential HTML

that every newbie blogger should know

posted in: Blogging, June 2010 Headings...........................................................................................................................................1 Images...............................................................................................................................................2 Typography.......................................................................................................................................7 Overview..........................................................................................................................................8 When I first started blogging, I didnt even think about the formatting of my posts. It was second nature for me as a web developer to sort out the kinks in layout of my posts to maximise their effectiveness. However, not everyone out there is as familiar with the language of the web as I was. I have recently noticed a few simple mistakes from both newbie and more established bloggers that could make a real difference to their overall impact of posts, both as far as SEO goes and for the experience of their readers. You can forgive me if this is teaching you to suck eggs but its information that I feel needs to be shared, and should save those writers new to the game learning the entire HTML language just to format their posts in professional way. Ive also found it hard to find decent reference material for clients that concentrates on the bare essentials to get up and running within Wordpress without providing the entire scope of the HTML language to learn and thus saving on support queries. Perhaps you have the same trouble.

Headings

Headings in a blog post are pretty crucial to your success. Firstly, they attract attention. Secondly they allow your readers to jump logically between sections of your post quickly, and skim / scan your content at a glace. Thirdly, headings allow search engine spiders to more easily figure out the

context of your post. As a basic guideline, your main title should describe the contents of your post overall, and individual headings after that, should describe the contents of paragraphs that follow them. Headings in HTML range from H1 all the way to H7 , With H1 being the most important, and H7 being the least important. You can use multiple headings on the same page, with the unwritten SEO exception of the H1 tag, which should be the single most important or highest level subject of the page. If you think about headings as a weighting, with H1 giving the most importance to its contents, you may find that a couple of headings deserve the same weight on a page, and this is fine. As an example page about a person. [H1 Header] <h1>Your name</h1> [content] Give a little background about yourself [H2 Sub Head] <h2>Why you rock</h2> [more content] Highlight why you rock [H2 Sub Head] <h2>Where you are from</h2> [more content] Give a little background about where you are from As a basic guideline, use heading tags to separate sections of your posts. Your blog post title should be inside H1 tags (ask your web developer or check by viewing source of your page) sections thereafter should be tiered according to importance. Have a quick look at this HTML page to see some example headings.

Images

Images are one of the most important ways to add polish to a blog post, and can be a great way to spice up content and give people motive to share with others, but you have to be able to do three things to master your images in your posts. 1) Align Them 2) Link Them (or not as the case may be) 3) Resize Properly

Aligning Images Aligning images in your posts will be a determined by two things. Firstly the CSS that is attached to your blog design / theme, and secondly the way your blogging platform handles it. Whilst many people cant control the CSS (the style sheet which controls how your HTML looks) heres some ways you can control images a bit better using HTML. A basic image tag looks like this <img src=imagename.jpg ></img> This code references the image file. Simple enough. When you add a standard image in your blogging platform, all of these things are done for you, and an image appears automagically on your page. But the real control over it comes when you jump into source or HTML mode in your editor. Other attributes worth noting for the image tag can be found over at W3Schools, which is a great learning playground if you arent familiar with HTML. Heres a basic example of an image inserted in HTML. Nothing special going on here. To align an image left in Wordpress <img src=imagename.jpg style=float:left;margin: 0px 15px 15px 0px; ></img> Notice the extra bit of padding around the image to prevent the text getting too close to the image. Ive opted for an inline style here for two reasons. Firstly, whilst an external stylesheet is the correct way to do things, it doesnt account for the problem with rss readers which often dont download the attached CSS from your blog, leaving your images badly aligned in your RSS reader. Inline styles are the only way to maintain validation, and keep things looking the way you want. Heres a basic example of an image aligned left in HTML. Theres also margin of 15pixels on this to give room for the text. To align an image right in Wordpress <img src=imagename.jpg style=float:right;margin: 0px 0px 15px 15px; ></img> Again, Ive padded the aligned image here, with 15 pixels left and bottom. The image will naturally float to the right, and text will flow around it naturally. The margin values work in a clock like fashion. If you can visualise a compass, starting at the top their are values North, East, South, West.. So in this example there is a margin zero top, zero right, 15 bottom and 15 left, giving the text room to breathe. Heres a basic example of an image aligned right in HTML. Again margin of 15 pixels used. To clear the next paragraph and image Occasionally you will find that all this floating of images causes all sorts of hassles and hardships for your post layout in the browser. The main reason things go awry is normally a lack of text around the image to push it down suffuciently, leaving you with something that looks like this:

Oh crap. What have I done wrong? You can see that when youve got enough paragraphs underneath the first image, things behave themselves. This is exactly the same HTML just more text. See what happens when theres enough text So how do you fix things when you dont have enough text to flow around the image, and still maintain the image alignment? The answer lies in the clear property, which instructs the image to not flow in beside the first floated image. This pushes it onto its own line as you would expect, the paragraph continues to wrap into the left of image 1. When the second image is cleared right To associate paragraphs together Sometimes even the above solution wont be what you are looking for, and youll want to keep each image associated alongside the body of text in the line of the reader. To do so, you need to divide the text into sections. The norm for this is the <div> element, which you can wrap around the HTML of choice. When youve done this, you can then tell the div you want to clear it around the first image. When a DIV element is used, and cleared right. Link an image There are a couple of scenarios where you may want to link an image. You may want to link to another part of your site, someone elses webpage, or a larger view of the image itself. Heres how to do all three. To link to the image itself. With Wordpress, the default behaviour when you upload an image, and insert into a post, the image will be linked to the full size image, so all you have to do is upload and click insert. The same is true with blogger, which also links to the large image. The basic html for linking to an image looks like this. Notice how the anchor tag wraps the image. <a href=imagename.jpg><img src=imagename.jpg ></img></a> Basic link to the same file you are showing as an image. To link to a larger view of the image itself. Many blogging platforms allow you to insert an image that is a resized, or thumbnail version iof the original. Linking to the original is a pretty simple process as well though. The basic HTML for link to the larger version looks a bit like this. Notice the URL / HREF for the link tag is different from the image tag, so its going to a different place.

<a href=imagelargeversion.jpg><img src=imagesmaller.jpg></img></a> Larger link to the file you are showing as an image To link to an external webpage It is possible to link to another webpage using the same sort of logic. The anchor tag surrounds the thing you want to link whether it be text, or an image. The http of the URL denotes the protocol, (HTTP) over which the visitor will get sent, and to send a visitor away from your own site, as a rule of thumb, your href should always start with http://. Heres the basic code for linking an image to an external webpage. <a href=http://www.webdistortion.com><img src=imagename.jpg></img></a> Link an image to an external website. To get rid of blue border around an image This is a common query for HTML and one that is easily fixed with a little css. The key is to eradicate the border on the image tag itself, and can be performed with the following HTML <a href=http://blog.webdistortion.com><img src=imagename.jpg style=border:0px;></img></a> Heres an example of a linked image without the blue border. To give an image a 1 pixel pictureframe border Sometimes you may want to give an image an extra border. This can be a really nice little touch, particularly if your images are on a clean white background. <img src=imagename.jpg style=border:1px solid #ccc;padding:15px;/> Heres an example of an image with a one pixel border applied. Notice the padding element to give space between image and border. Resizing Images Resizing images seems to be something many bloggers struggle with. Ive seen many occasions where an image has been inserted as a massive image, then later dragged to a more respectible size for the post. Wrong Wrong Wrong. All this is doing behind the scenes, in the HTML is changing two attributes on the image. Width and Height which dont actually affect the underlying image file. <img src=imagename.jpg width=100px height=100px ></img> Heres an example of a badly resized image. See how long it takes to download yet it appears small!

Notice how this image is 100 x 100 pixels. However, if it is really bigger than that prior to being used on the page then this is the wrong approach for a number of reasons. Firstly, it increases the download of your page by some margin. Correctly resized images are smaller to download than their larger counterparts. Secondly, they are also much crisper to the eye, and arent pixelated. Two pretty good reasons to make sure the images you use in your post are correctly resized. Heres how the above image should have downloaded. See how much faster it downloads. How to resize an image Find an image tool that you are comfortable using first and foremost. Windows still doesnt come with adequate tools for resizing an image out of the box, so heres a collection of a couple of the better open source and easy to use tools if you are on Windows. If you have a more professional image program such as Photoshop or PaintShop Pro, then that will work even better and give you many more options. For back to basics, simple resizing, these are the best programs out there for newbies IMO. Gimpshop is simply a free photoshop clone. Image Resizer Clone (all Windows platforms) Irfanview Great little image viewer and resize tool Gimpshop Photoshop clone For Macintosh iResize EasyCrop SmallImage 2.0.6 The below video shows basic image resizing in Photoshop. Gimpshop works in a pretty much the same way, and the other programs mentioned are also pretty similar in functionality.

Typography

Another important part of a blog post is the typography you use for different elements in your blog post. For example, you may have a quotation that you wish to highlight visually different from the other text on your page. You may also have code in your post which needs special or dedicated formatting to appear perfectly for your visitors. Here are a collection of some of these typographic elements and how to use HTML to make them appear the way you want them to. As previous, Ive created independant HTML pages that you can view the source of to see how they are put together, hopefully this will be easily replicated in your own blog posts with a copy paste of the source code, and Ive kept all styling inline so they appear in the same sort of way when viewed from an RSS reader. How to style a quote with blockquotes Quotes are a great way to highlight something someone else has said. For a classic, simple quote that doesnt involve images, these examples show how a simple little snippet of code can make all the different to your post. The basic HTML for a quotation is achieved through the blockquote element. <blockquote>What you have to say</blockquote> Heres an example of a blockquote element which has been styled. Heres another example of a quote with inline styles applied. How to change the font size and style Sometimes you may want to step outside the boundary of what your designer has put in place as far as fonts go. The main way in which you can do this is to style the parent element which contains your text. For example if you wanted a particular paragraph inside your blog post to have a different font size or font style, you simple use an inline style like so. <p style=font-size:14px;font-family:Calibiri>My newly formatted text</p> You can see an example of this in practise here, with a number of alternative font styles. How to style a list in Wordpress

There are two main types of list in HTML. An ordered list (which has a numeric entry denoting an order) and an unordered list (which doesnt). The HTML to create a list is very simple, but sometimes you may want to turn off bullets or change the margins on the elements. Heres how to do that. Remove bullets, numbers or margins from both ordered and unordered lists.

Overview
Hopefully some of this will be of use if you are learning Wordpress, or have clients needing to better format the information they are displaying and gives a small insight into the World of HTML code for anyone not already familiar. Leave a comment if youve got a particular need or how to question for the Wordpress platform, and Ill do my best to answer somewhere in the post.