Thursday, December 09, 2004

How the Web Works: HTML for the Blogger (Part 1)

Ok. All you bloggers out there, this one's for you. I'm going to assume that if you're reading this, you don't know HTML at all. The point of this article is to give you just enough to really put you in control of your blog posts. Since applications like blogger have come around, there are a lot of web publishers out there who are not geek people. Blogger makes it possible to have your own website without needing to be a geek. But geek or no, at the end of the day, that message you put up on your website ends up as HTML. Instead of being afraid of that, let's use it to our advantage.

Tags

Ok. We've talked a little bit about tags before. Let's talk about how to use them. We'll start with some easy ones. The idea behind HTML is to tell the browser how to draw your data. The simplest form of that is text formatting. If we want some part of our sentence to be bold, all we have to do is surround that part of the text with the bold tags: <b> and </b>.

Tags are always surrounded in <these>. Also, notice that the second tag is just the same with an added /. That basically means end. so:
This is some <b>bold text</b>.
means
This is some [Start bold text here]bold text[End bold text here].

Ok, so there's the bold tag. What other tags are there? There are a couple other really simple ones that you may be interested in.
  • <b>bold</b>
  • <i>italic</i>
  • <u>underline</u>

Attributes

Those ones are ok. But it does get just a bit more complicated than that if you want to do more. One more thing we have to talk about is attributes. An attribute is just a further description of a tag. For example:
This is <font >some red text</font>.

See the attribute? Yep, 'color="red"'. Makes sense, don't it. Let's look at a couple more uses here.
  • <A href="http://www.spam.com">Links</a>
  • <IMG src="http://photos2.flickr.com/1682253_d8bcd882c2_m.jpg">
  • <font >font colors</font>
Notice the image (IMG) tag does not have an end tag. There are some tags that don't have end tags simply because they aren't really modifying something else. All the other tags I've mentioned here, modify content, specifically text. An image is content, so there's not really much point in trying to wrap an image around something else. You can, however, wrap tags around other tags. Let's say, for instance you want to make an image a link.
<a href="http://www.spam.com"><img src="http://photos2.flickr.com/1682253_d8bcd882c2_m.jpg"></a>


If you want to test out your own html before publishing it to the world, you can. All you have to do is follow these steps:
  1. Using notepad or another plain text editor, create a new text file. Plunk your code right in there.
  2. Save that file as "test.htm" or "anythingelse.htm", for that matter.
  3. Drag and drop that file right into any open web browser window.
  4. You can keep making changes just by editing the file and saving it, then clicking refresh in the browser.
As always, questions and/or comments are requested and/or appreciated. Thanks.

1 comment:

Anonymous said...

Great post. Can’t wait to read the next ones :).