Monday, September 28, 2009

The Whole Ed MySpace Blog

Following on my Social Media Bible post, I started my own MySpace Page, where I immediately got hooked on a MMPORG called Vampires. If you have 22 or 23 hours a day when you're not doing anything, I highly recommend it.

I started to write this little HTML introduction for that blog largely to explore the ins and outs of their online HTML editor. Eventually I gave up and decided to publish it here:


Before I go on to the substance of what I've learned about the Vampires app so far, I want to digress into just a little bit of HTML. The good stuff will be coming in another post, probably tomorrow. Then you'll see why I'm doing this. If HTML editors like the "compose mode" of this blog are any indication, a lot of people are afraid of HTML. They probably feel that they are applications users, not programmers, and that learning HTML would be a big leap.

Relax! First, Hypertext Markup Language (HTML) isn't even a "real" language -- it's a "markup language." Think of it as a form of punctuation. Second, you don't have to learn the whole language to do useful things with it. Probably 90% or so of what I use it for is covered right here.

First, HTML files are ordinary text files that contain certain elements in a certain way. You can create them with any editor that produces plain unadorned ASCII text. Notepad is perfect for Windows users. Second, you need to tell your operating system that the file should be treated as HTML -- i.e. that it should be opened using a web browser. You do this by giving the file the extension ".html" when you save it -- or ".htm" if you're actually using Windows Millennium or earlier.

Since a big part of what people use computers for these days is Internet access, being able to open files in the web browser and then have them do something is very useful. What I'm going to show you here is how to create a list of links. Instead of adding everything to your favorites, and dealing with all that you just make a list and click on the link you want. That may sound like a lot of trouble to go to, but believe me it's a real time-saver.

The first thing you'll notice about HTML files is that they're full of "tags". Browsers interpret the "less than" sign (<) and the "greater than" sign (>) as angle brackets, enclosing an HTML element, or "tag". These tags come in pairs -- an opening tag consisting of an HTML keyword enclosed in angle brackets, and a closing tag consisting of the slash character (/) followed by the HTML keyword enclosed in angle brackets.

This will become clearer by looking at this pair of tags: <HTML>...</HTML> The dots indicate something was left out that would go there -- in this case your page, because every HTML page begins and ends with this pair. Within every HTML file there are two more pairs, the <HEAD>...</HEAD> section which contains information which is not displayed, and the <BODY>...</BODY> section which is what shows up in th browser window.

We're now ready to create a list of links. We'll make it an ordered list (OL) because it might be useful to have the list items numbered. If you prefer bullet points, that would be an unordered list (UL). Each new item is a list element (LI) and since it is a link it uses the anchor (A) element. The anchor element is somewhat oddly named, until you realize that it is just a hook where you can hang things. The things you hang there are called attributes.

We're only going to cover one attribute -- the Hypertext Reference attribute (href). Hypertext is a quaint old term for text with links in it, and links are the bulk of what makes the Internet so useful. Attributes take arguments -- in the case of the href attribute, the argument is a URL (also known as a webpage address, although that isn't the "real" name.) Most browsers aren't too picky about puctuation, but the "correct" form is:
<A href="(protocol)://some.url.here">Text you want to click on</A>

Putting this all together gives us something like what follows. Highlight everything from <HTML> through </HTML> - paste that into your editor and save it as template.txt or whatever you like. Tomorrow I'll show you something really interesting you can do with this.

<HTML>
<HEAD>
<TITLE>Titles Are Cool</TITLE>
</HEAD>
<BODY>
<OL>
<LI><A href="some.url.here">First List Item</A></LI>
.
.
.
<LI><A href="some.url.here">Last List Item</A></LI>
</OL>
</BODY>
</HTML>

No comments: