Day 3 - 5: HTML Basics.... basically (Part 1 of 2)

 Hello Everyone;

Sorry there has been a three day lag between posts.  I am still trying to figure out what the best format for this blog will be.  I like the idea of a daily "I learned this..." but thus far I seem to have taken on a few things that are taking more then a day to put up.  What are your thoughts?  Would you rather I post something new everyday even if it doesn't fit with the theme of the week?  Would you like daily updates as to my progress? I am keen to hear everyones opinion.  I may not use it, but I do value it.
Now then, when I scoured the net to give me insight into the intricacies of using HTML I found this wonderful site! Not only does it offer a free step-by-step course, it breaks into two sections: Basic and Advanced. When I first started on this I figured I would cover the basic section in my post last Monday, but well, there are a lot of basics to cover and I wanted to be fully conversant in those basics to present them to you.  Here it is for your viewing pleasure.

First off, for those of you that aren't aware, HTML (HyperText Markup Language) is THE markup language for webpages.  I didn't know this myself.  And you may be asking the same question I did after reading that, "What hell is a markup language?"  In short, a markup language is the behind the scenes directions that present the information you are seeing in front of you on any webpage.  These pictures of books on the side of this blog?  Described in the markup language.  The reason the title of this blog is bigger and bolder than the rest?  Markup language!  The colour, font and size of the lettering? ...  You get the point.  What is interesting about this is all you need do is right-click on any web page and click "view page source" in the case of a Firefox web bowser or "view source" in the case of Internet Explorer to see what HTML code looks like.  Feel free to give it a try right now!

Now then, if you have taken a second and checked out the source code behind the page you may have noticed a bunch of things; there are a lot of things that are enclosed by angle brackets (<, >), within those brackets there are terms that are different colours, and if you looked closely you may have noticed that different words are "paired"(If there is a <style> somewhere, futher on there will be a </style>).

First the angle brackets:  HTML is comprised of commands called "tags" and those "tags" must be placed with the angle brackets for the webpage to read them and carry them out.  They are like quotation marks around a sentence; they let the webpage no that it is time to sit up and take notice.

Next the colour coding:  The individual colour coding is unique to each browser.  In the case of Firefox it looks like this:

And lastly the colours; purple, blue, green, red and black.  The purple highlighting denotes tag commands.  This is the first word or words typed after the '<', and they tell the webpage that everything that comes after it will be acting or looking a certain way.  In the case of the screen shot above <title>  is saying that everything after it will be a title and the webpage will now feature the piece of text that comes after <title> bolder and in a larger font.

The blue is broken up into two uses in Firefox.  There is blue and blue underlined. Anything blue is a relation, location, or description connected to the purple tag preceding it.  It is blue underlined when it pertains to a website link.

The green text pertains to anything that is a comment within the code.  It will not showup on the website and is not read by the website.  Notice the "<!--" that starts and finishes the green area?  The '!' is a tag that explains just that to the website.   Web designers use this to give aid in editting the source code later on.  It is also used to hide "styles" and "scripts" from older versions of browsers where those two things were not supported to ensure that it doesn't show up as print on the screen.

The red "/" is used primarily to signal the end of a tag.  As you may have noticed initially there is a pairing between the <purple> tags.  There will be a <purple> followed somewhere down the line by a </purple>.  It is the "/" at the beginning of the later tag that tells the web browser that that tag has completed its action.  However, there are some cases where they don't need a pairing and instead can just finish a single line of code with a " /" and in the case of the Firefox HTML source code rendering it is red.  

The final color is black. It is everything else; it is the text that you will ultimately see on the screen, and it is the modifiers that describe the hieght and width of images that will posted, etc.  Now bear in mind that this is just how the source code is rendered on Firefox.  On Internet Explorer it is quite different.  I didn't spend a lot of time figuring out the differences but my initial observation is that Internet Explorer uses A LOT of colour, which I found confusing.  But I am guessing there is a rhyme and reason for it.  I just didn't have the time to adequately look into it.

So that is it, thus far, on the HTML basics (part 1).  My next post will be in a couple of days and it will be on "Cascading Style Sheets" or CSS (you may notice reference to it in the above screen shot).