Some HTML Tips & Tricks

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. ;)

If you can see this image's text, you are viewing the ALT information.
As I mentioned, you can also place the title information (also called an “attribute”) in a wide variety of tags. For example, you can put the title into a link by doing this -<a href="http://hyper.link.net/page/blog?p=3292" title="Put a page title or possibly a snarky comment here ;)">click here to begin</a>It will look like this – click here to begin.You can also make sections of text show a title by using the following code (I’m going to add a bit of extra code to my example which will make it stand out from the rest of the text) -

<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:

Based on Gov. John Q. Public V’s response to my previous letter, I believe it’s safe to say that Gov. Public shows a complete lack of foresight. You see, I undeniably believe that Gov. Public has managed to elude any direct ties to specific acts of negligence — no small feat considering her history. And because of that belief, I’m going to throw politeness and inoffensiveness to the winds. In this letter, I’m going to be as rude and crude as I know how, to reinforce the point that Gov. Public says that choleric creeps aren’t ever antihumanist. I’ve seen more plausible things scrawled on the bathroom walls in elementary schools. She is typical of obscene cretins in her wild invocations to the irrational, the magic, and the fantastic to dramatize her codices. Easy as it may seem to carve solutions that are neither quasi-hectoring nor frowzy, it is far more difficult to give Gov. Public a rhadamanthine warning not to concoct labels for people, objects, and behaviors in order to manipulate the public’s opinion of them. I have seen and heard enough. Now, it is time to fight the warped, distorted, misshapen, unwholesome monstrosity that her quips have become.If Gov. Public had lived the short, sickly, miserable life of a chattel serf in the ages “before technocracy” she wouldn’t be so keen to deflect attention from her unwillingness to support policies that benefit the average citizen. Maybe she’d even begin to realize that if you want to hide something from her, you just have to put it in a book. She maintains that she is the ultimate authority on what’s right and what’s wrong. Even if this were so, Gov. Public would still be disorderly. But our path is set. By this, I mean that in order to call a spade a spade, we must stop this insanity. I myself consider that requirement a small price to pay because someone has been giving Gov. Public’s brain a very thorough washing, and now Gov. Public is trying to do the same to us.I appreciate feedback and other people’s views on subjects. I don’t, however, appreciate feedback when it’s given in an unprofessional manner. I got off on a tangent. An equal but opposite observation is that Gov. Public has a strategy. Her strategy is to twist the truth. Wherever you encounter that strategy, you are dealing with Gov. Public. I cannot promise not to be angry at her. I do promise, however, to try to keep my anger under control, to keep it from leading me — as it leads Gov. Public — to achieve total world domination. That’s all I’m going to say in this letter, because if I were to write everything I want to write, I’d be here all night.

In the further reading section, you will find some links to sites that give you every single property that you can use CSS with. Trust me on this, I’ve used them quite often when working on blog templates. ;)

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.

Escape Character Output
&amp; &
&quot;
&lt; <
&gt; >
&nbsp;*  
&euro;
&oslash; ø

* creates a single space. This is useful if you want to have multiple spaces between words.

There are at least 300 characters you can make with these escape codes. You can view the full list here.

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.

Similar Posts

10 Comments

  1. Jhianna said,

    October 2, 2007 @ 2.36 pm

    Again – I’m giving mad post love. I’ll bookmark the CSS stuff while I try and get my new template ironed out. Although with some of those CSS tools, I’m tempted to create my own interpretation to see if I can’t fix some of the glaring problems with the old blogger style one and keep the labels and such.

    Wheeee!

  2. Katie said,

    October 2, 2007 @ 6.59 pm

    Good post. I love using html (it makes me feel smart). I saw the “Title” hover-over. I started to use html when I had a myspace, and now it’s really useful to use on my blog. It’s great knowing you can change things about, although I don’t use it as much as I could (like, inside posts I only use the basics – bold, italic etc).

    Maybe I should start being more html-adventurous!

  3. Snoskred said,

    October 2, 2007 @ 7.14 pm

    As you know, I didn’t want to write this week’s think tank. I struggled through it and I now think it is one of my best posts ever, but yours is even better. ;)

    I’m off to do some errands but I hope to catch you sometime today

    Snoskred
    http://www.snoskred.org

  4. Forest Parks said,

    October 3, 2007 @ 8.39 pm

    I wish I had caught tis post when you wrote it.

    I needed to paste some HTML on blogger the other day and it took me a very very very long time to work out what to do!

  5. Sephyroth said,

    October 9, 2007 @ 2.16 pm

    Jhianna – Thanks! :)

    That is the great thing with CSS; all you need to do is make note of the old settings, stick something new in there, and if you like it, great, if not, then try again with something else. :)

    Katie – Gah! Myspace! ;)

    Anyway, knowing some HTML can help loads when it comes to working with a blog. I agree with not using HTML to its full potential in posts, but sometimes, simple is good :)

    Snos – Yep, I have to say that your post was really good; it’s an excellent primer for some of the basic code that everyone should know. :)

    Forest – Well, I posted it after you had posted your HTML, but now you know. :)

    Thanks y’all! ;)

  6. Move your Blogspot blog to your own Domain with ease | Sephy's Platzish said,

    October 16, 2007 @ 7.04 am

    [...] 2nd October: HTML Basic HTML for Bloggers. Some HTML Tips & Tricks [...]

  7. Gigabytes said,

    October 22, 2007 @ 9.32 am

    Although you do not need html or CSS to write a blog, knowing some HTML, CSS can help a lot when it comes to customizing a blog.

  8. Elements of HTML - Fonts | Sephy's Platzish said,

    November 13, 2007 @ 2.56 pm

    [...] this week we take a look at fonts. Longtime readers will remember that I touched on this subject previously, but I want to take some time to go more in depth on this, and show you some neat features about [...]

  9. Host images online for free? Yes, you can! | Sephy's Platzish said,

    November 11, 2008 @ 10.18 am

    [...] 2nd October: HTML Basic HTML for Bloggers. Some HTML Tips & Tricks [...]

  10. Shennan T. said,

    August 16, 2010 @ 9.14 am

    Great tips for a web designer like me! Thanks for the post!

RSS feed for comments on this post