Sephy’s Platzish

One of the most mystifying things about being a blogger is understanding the language that your site is written in. I don’t mean the language of your content, but rather the language that the actual page is written. The language which makes text look like this or this - HTML.

HTML stands for Hypertext Markup Language and was created in the late 1980s by engineers at CERN, who were the creators of the World Wide Web. The actual specification has gone through lots of changes over the last two decades. The latest specification to be released was version 4.01, which was released in 1999. However, other languages have started to appear which use HTML as their basis.

On the surface, it can all sound confusing, but I’m going to show you how to do some neat tricks with HTML that will allow you to maximize the potential of the language itself. When I put a sample of HTML down, it will look like this -

Typewriter text: Tag - <tt>Typewriter text</tt>
I’ll also give a table later on to show you how to get characters such as the less than and greater than symbol into your text, without your browser confusing it for actual, bona-fide HTML.

Adding text to images

Something that you see quite often when it comes to a web page is when you see an image, and put your mouse over it, you see this -

- that is the result of using the “title” property for an image. You can also use the “alt” property, which is good for disabled accessibility, but the text you put there might not appear in some browsers unless the image cannot load. Also, it is technically correct to not show the “alt” property in a tooltip, something which I’ve just learnt while writing this. The “title” property can also be used for a wide variety of tags. To add “alt” or “title” to an image tag, simply use this code:

<img src=”http://address.of.image.net/img/sub/img.png” title=”You can place the title of the image here.” alt=”Alt text is useful for disabled access, but also if your image doesn’t load as some browsers will display the alt text in place of the image.” />

The result would look something like this; put your mouse over each image to show the title and/or alt information. Let me know in the comments which information you wind up seeing.

<span style=”text-decoration:overline” title=”This means that you can see it”>hover to see a secret message!</span>

The result is this - Hover to see a secret message!.

CSS Primer

That last example brings us neatly to another topic that has become quite prevalent in blogs nowadays: using CSS to change the look of your page. The key in the last example is the

If you use Blogger, you’ve certainly logged into your blog’s template and seen this -

- then wondered what in the world does all that garbeldy-gook mean? Well, it is called CSS, or Cascading Style Sheets. They have been a part of HTML for many years, but were first officially implemented for use on the web in the mid-90s. Now, it is a common way of telling your browser how to show a page to you.

With CSS, there is an almost-endless variety of things that you can do to a page using CSS, including putting items into certain places, setting the width of a page element, and even changing the look of the text in your page, as I did in the example above. In fact, changing the look of your font is one of the most common, and easiest, things you can do with CSS.

For example, if you wanted to have (and this is not an example I’d recommend you actually do, it’s just for demonstration purposes ;)) text that was about an inch high, with a line through it, and blinking red, with the font as Comic Sans. Here’s how you’d do it:

<span style=”font-size:400%;text-decoration:line-through blink;color:rgb(255,0,0);font-family:’comic sans ms’”>Use smaller numbers, and don’t use blink</span>

Here’s how it would look (warning, you might want to put on glasses!)

Seriously, change some numbers and don’t use blink, ok?

Now, if you haven’t been blinded by that, here’s an example of changing the alignment, width and height of a section, causing a scrollbar to appear. The text comes from the automatic complaint letter generator, but first the code I’m going to use. Since the text I’m using is longer than a couple of words, I will use the “div” tag instead of the “span” tag:

<div style=”text-align:justify;width:338px;height:325px;overflow:auto”>Put really long chunk of text here</div>

And now, here it is in practice; I’ve added centering tags for viewing purposes:

Making HTML code appear

You’ll notice that throughout this post, you’ve been able to see the actual HTML to use in a page written out for you. There is a secret to getting it to show up; that is called using an “escape character”. If you’ve worked on some computer systems in the past, you may be familiar with the use of the backslash to get things to appear. In HTML, it is almost the same thing, but there is a specific way that you have to write it out for it to work.

All of these characters start with an ampersand (&) and end with a semicolon. The letters in between determine the character that will appear. Below is a table with some of the more common escape characters used in HTML.

Further Reading

In the companion post to this, Snoskred gives you some good Basic HTML for Bloggers. She has some great information about some of the more important bits of code you will use as a blogger.

There are many great resources out there for learning HTML and CSS. First, here are some useful links for learning HTML (nicked from Snoskred’s post, with her permission ;))

HTML Reference:
If you know nothing about HTML, this is where you start
Getting Started Tutorial
HTML Code Tutorial
HTML Help
HTML Tutorials At W3
HTML Goodies
HTML Dog
Learn HTML And CSS
Learn Basic HTML For Your Website
Web Safe Color Chart
Non-dithering colors

CSS Reference:
All CSS Properties Listed Alphabetically
CSS Reference at W3 Schools
Mashable: CSS Toolbox, 22 Tools for Working with CSS (there are some great resources there, definitely have a look!)
How to Style an Unordered List with CSS

Previously in the Tuesday Think Tank
21st August: RSS
14 Reasons Readers Unsubscribe From Your Blog
Tuesday Think Tank: All About RSS

28th August: Blog Templates
Blog Design - Open Your Eyes.
Demystifying Blogger Template Editing

4th September: Nofollow
Spam, Spiders And Do Follow, Oh My!
Say No! to Nofollow

11th September: Site Meters
Do NOT Rely On Your Site Meter.
Track Your Visitors with Google Analytics

18th September: Technorati
Technorati - Sending Out An SOS
The Ups (and Downs) of Technorati

25th September: Google Reader
Google Reader Can Make Your Life Easier - Here’s How.
Improving your Google Reader Experience

Over to you!

HTML isn’t that hard to learn, and if there’s something that you’re trying to figure out and would like looked at, feel free to comment here.

As always, if you have something that is on your mind that you would like to have explained in a future Tuesday Think Tank, contact either myself or Snoskred via email or in the comments and we’ll post about it.

Lastly, if you like what you’ve read, you can Stumble the post, either using the toolbar or the link below.