WaxJelly

I just found an email I recently sent to a friend who wanted a crash course on html. I thought this might be helpful here as well.

HTML: HyperTextMarkup Language…

Basically, you just want to keep in mind that everything in html is based on “tags” (<tag>) which is surrounded by “brackets” (<>). When you apply something to a “tag” in html, you surround it with the tags associated with the function you want. For example, if you want to make some font BOLD, you’d write the text (”Justin’s Font”) in an html editor or even just notepad, and then you’d surround “Justin’s Font” with <b> tags. The “opening” tag goes before the font, the “closing” tag goes after it. The only difference between an opening and closing tag is that the closing one has a slash “/” before the tag name.

In other words, you’re text in bold would look like this:

<b>Justin’s Font</b>

Then, once you start learning tags, you’ll need to know a little about “attributes”. This is just a bit more detail that most tags have. For creating a link, for example, you’d use an “anchor” tag.

NOTE: (”Anchors” are < a > tags, and are just about anything you want the mouse to respond to or interact with).

<a>Justin’s Font</a>

This is nice, but it doesn’t do anything. If you wanted your previous font to link to, say, cnn.com, you’d make it look like this:

<a href=”http://www.cnn.com“>Justin’s Font</a>

The “href” means “hyper reference”. In other words, when someone clicks on “Justin’s Font”, they’ll be “linked” to cnn.com. got it?

Once you get the hang of these tags, and pretty much understand their attributes, you should then quickly move into css, ’cause it’ll change your life. And, if you wait, you’ll hate yourself for it, cause css makes html so much easier, but you have to understand html first.

CSS – Cascading Style Sheets:

This is simply a language used to “style” html. It also makes repetitive progamming in html less troublesome, and gives you more control over what’s going on. Here’s a quick example:

Let’s say we wanted to make the link we used about to cnn.com to have a different color than its default. Here’s an example of how we’d do that:

(the following is the WRONG way to do it – mainly because it’s lame.)

<a href=”http://www.cnn.com” color=”purple”>Justin’s Font</a>

(this is the right way…)

<a href=”http://www.cnn.com” style=” color:red “> Justin’s Font </a>

…try it. It works.

Anyway, you should check some online tutorials before you spend any money on books on this stuff. Html and CSS are pretty simple languages to learn, and you’ll have plenty of books piled up once you get into some other stuff (php and mysql are going to change your world as well, but you’ll definitely want some books on them).

For now, here’s the quick explanation of xml…

XML – eXtensible Markup Language:

HTML is the language that talks to browsers and tell them how to translate your page into visual elements.

CSS gives you more detail and control than html will allow you to have.

XML, however is, in itself, hollow. Think of it as your own blank canvas for CREATING your own custom tags the way you want. When you get into CSS, you’ll learn about classes and id’s. This is NOT the same as XML custom tags. XML is just a free alternative to having some kind of database – sort of. XML has NO inherited tags, attributes, etc. So you can read it just like html, but everything there has to be “defined” in some other script. I know this is probably all pretty lame and confusing at the moment, but as you read, you can probably come back to this as a foundational understanding of how it all works together.