Watch the Movie of Lesson 2

Today I want to expand on what we learned yesterday. Now that you know how to make a basic HTML file I want to add a couple of elements to the mix. Lets start with the code we had from yesterday:

Now that you have written a couple tags I want to tell you that HTML tags are case-insensitive - it doesn't matter if they are upper or lowercase letters. For example, you could re-write the code to this and it would still work fine:

However, I recommend that you chose ether upper or lower case and stick with it so that your code is clean, easy to follow, and you can do search/replace functions easier (more on that later). I code EVERYTHING in all lower case, HTML or other wise...

Now remember that the tag lets the computer know that what follows is HTML code. Now the reason we have to the tag is because not everything in a html document is for the user to see. For example, there are hidden elements to HTML files that let the browser know what language the document is in and other tags that tell the computer to include JavaScript (another language) files. These are tags that shouldn't be seen by the user, only the computer. So an HTML file is separated into to groups - the HEAD and the BODY.

The HEAD contains all of the stuff that the user doesn't need to see but the computer needs to help it display the page right. Take just a second right now and right-click on this web page. Then select "View Source" from the menu. If you look at the long jumbled box of code that pops up you will see the tag and then the tag somewhere at the top. EVERYTHING in between the & tags is hidden from the user because it is just for the computer. While if you find the tag you will see that all of the content you see on the page starts after it.

Notice that there is a title on the vary top-left of your browser. That title at the top is created by a hidden tag in the HEAD of the HTML document.

That tags lets IE (Internet Explorer), FF (FireFox), or Opera know what to display for the top title. If you want take just a second and Save the above code to a new "something.html" file and you can see the code first hand.

Comments

Well, If you looked at the source of this page you must have realized how hard it is to find things and tell what is going on. That is why it is great to have comments in your code. You know, "notes" to yourself that help you remember what a certain block of code does. Here is what a comment in HTML looks like:

The computer ignores everything between the starting "<!--" and ending "-->". So since it doesn't show it on the screen and just ignores it you have a perfect place to put reminders and stuff to help you not get lost.

Content

Lets make a file now that has a little more stuff in it. Open back up your code editor and type the following:

Then continue to type this below it:

And then we close the last part of the file with this code:

Save the file as "lesson2.html" and then open it up in your browser. You will see a large bold title and then a paragraph of text all centered in the middle of the page.

Now then, we added several new tags in this code. The first is the tag. It - wonder upon wonders - centers everything! You see, coders really are pretty normal people... They name stuff for reasons. ;)

Next we used the tag - a cousin of the tag we used in the first lesson. There are six (I think) levels of Header tags H1, H2, H3, H4, H5, and H6. Each one is a different size with H1 being the largest and H6 the smallest. The header tags are the best way of making a title for a paragraph.

Last we had the <br> tag, "BR" is a short way of saying "Break". A break is just a "Line Break" really, but the coders thought "Why make a <linebreak> tag when you can shorten it to <br>?"

You see, in MS Word or some other editor you only have to hit "enter" or "return" to skip to the next line. However, HTML ignores "returns" - You can skip as many lines down the page as you want, but the text will still be next to each other in the final output. The only way to move to the next line is with a <br> tag. Take a look at this code:

The output would be:

You see HTML just doesn't care about the spacing you put in HTML files. That is why I used two BR's to skip two lines before I started the paragraph.

Last, I want to you see that everything I started first, ended last:

If I started a element inside of another element (like the "center" tag in the "body" tag) I ended the second element before I ended the first element:

That's it for today! Now you have the basic layout of a HTML document down - the only thing you are missing is the remaining tags and their uses. So, over the next lessons we are just going to keep adding new tags until you know them all!