Z-toc.com | The protocol to be hyper!

Last week we started talking a bit about good and bad websites. We talked about how bad websites were busy, confusing, and annoying! So I don't want you to make a bad website. In order for you to make a gooder website, we are going to start looking into what HTML websites entail. Yeah, yeah, bit words... Did you know that HTML is an acronym? It stands for HyperText Markup Language. A random tidbit, you know how sometimes you see "http://" in front of a link? Well that HTTP stands for something too! It stands for HyperText Transfer Protocol. Do you notice a similarity? I hope so! What the "http://" does is tells your web browser how to handle the page it is about to load. And since HTML is a language (It's a funny one right?), the web browser translates it to the pretty things you see online. So, there's your background... let's get started!

Today, I want you to take the website you started last time (or should have started) and make it look a little nicer! If you were not here last week, then you did not create a "first.html" document. So you might want to click here and do that first.

So we need to make a HTML website... There's more that goes into creating a website than a bunch of words on a page. In fact! The first thing I want you to do is the following:

1. Open one of the Good websites you found in the part one of last week's activity.
2. In Internet Explorer, hold down the ALT key and then press V then press C. Do that all at the same time... ALT + V + C. Hurry! Go do it before you forget!

This is called the Source Code of the website. Every website (well, OK, almost every...) has source code that is available for you to use. This shows you all the code that is either written or generated to make a website.

So in part 2, we are going to put some source code into the design of your first HTML website!

Did I build up the suspense in adding HTML code to your first site? I think so! So now let's actually add some code! Open up "first.html" in Notepad. To do this, you need to FIRST open Notepad, then go File, Open, and find your "first.html" file.

Now, when it comes to a HTML website, we have these things called tags. And tags come in pairs. There are 8 basic tags in a HTML website (well, 4 pairs). The first is <html> (Yes, you need to use the < > brackets, they are on the , and . buttons). That tag goes at the very top of your Notepad document. Then, at the very end of your document, you need a </html> tag. The "/" in there tells the browser to stop reading. Immediately below your <html> tag needs to be the <head> tag. The <head> tag is where the name of your website goes. This is the place for your browser to look and see what needs to be done before loading the content of the page. Like for instance the <title> of the page! That's the tag needed to show what the title of the page is which is what you see at the very top of your browser. So, at the top of the browser when this page is open, you should see "Z-toc.com | The protocol to be hyper!"

So, you should have something like this:
    <html>

      <head>
          <title> My First Website </title>
      </head>
          Text....

    </html>

But we are missing some stuff! There needs to be one more set of tags and that is for the <body> of the website! So any text, images, etc. all need to be in the <body> of the website. So, your website should look like this.

    <html>

      <head>
          <title> My First Website </title>
      </head>

      <body>
          Text....
      </body>

    </html>

Notice how I have my tags and whatever is under them tabbed over. This is a good organizational technique that you should try to use. Save what you have and open the "first.html" file in your browser. Nothing should look different yet... Ha! We have a bit more work to do...

So, we finally have some tags that our website is using. The only difference from where you were last week to where you are now is that your browser recognizes this as a website, and before it just recognized it as a file. If you are finished and have time left, I want you to play with the following tags. Figure out what they do by plugging them into your "first.html" file in Notepad.
1. <font> </font>
2. <br> <-- this tag does NOT need a </br> after it... Try it both ways and you wont see a difference!
3. <h1> </h1>
4. <strong> </strong>
7. <font color="color"> </font>
15. <hr> <-- another tag that does not need a </hr> after it...
41. <table> </table>
8. <body bgcolor="color"> </body> (Use this INSTEAD of the <body> </body> tag set)