HTML Class: Day 7: Simple Ways to Lay Out a Website
Welcome! Since this is towards the end of the class, and I've been sick for a while, this lesson will probably be different from the others so far. I'm going to start off by reviewing what I've taught you since day 1, both for myself, and for you. On day 1, we worked on really basic HTML, and I explained how HTML works. We worked on italicizing, bolding, and underlining text, as well as how to use a break. We also started our little test page. On day 2, we learned a way to organize all of the site files, backgrounds, and how to use the font tag. On day 3, we learned how to create backgrounds using images, headers, and centering text. Then on day 4, we took a little break from the serious stuff, and we learned about marquees, and glowing text. Day 5, we worked on the different kinds of links. Then last class, day 6, we worked on divs. I expect that this will be the last HTML lesson, then you'll be set to create a basic website using HTML.
So, now it's time to move on to the actual lesson. This will be about laying out your site without CSS, which is overall nothing more than an adequate temporary solution to the layout of your site. Our little test page has come quite a long way, but it's still rather disorganized. I actually no longer have my little test page, since it got deleted when my computer was fixed, so I won't really be following along. I do, however, have a semi-recent screenshot of the document, so I won't be completely clueless. Now, you could use tables, or even frames (not a good idea for a number of reasons), but that would be rather hard for me to teach, seeing as I never lay-out a site using either of those methods. I now use CSS, but before I knew CSS, I did have a basic way of laying out my various websites. Mind you, it didn't look very good, and it was a little annoying, but it worked. Towards the end of the lesson I'll tell you how you can do it with CSS without really understanding it, which could work better temporarily. Anyway, on to the coding. What I used to do would be to have a main page with a little welcome message of some sort, then, centered and in bold letters, I would type "Navigation", or something similar, and then create a line break, and have links to all of the various parts of my website. Then on all of the other pages of my site, I would have a link at the top saying "Back to the main page", and then one would simply click on that, and choose the next part of the site they wanted to visit from the navigation menu. It was a pain for all involved, which is why you should at some point either learn the table method (not the best method), or learn CSS (for which a tutorial will soon be up at my site), and lay out your site that way. You could use image links or text links, it doesn't really matter. You could also use divs. Look at the lesson for day 6 for more information on divs. I'm not going to explain exactly how you would do it with divs, just e-mail me if you want to do it that way, and I'll help you. You could also use the copy and paste CSS layouts at Lissa Explains it All, that's a link to the specific page. So, choose a method to test out, and apply it to the test page. So, I'm almost done with HTML class today, but there is another thing I want to explain to you.
You should verify your HTML, which is basically just making sure that the coding is correct. However, in order to do that, you'll need to add a doc type to the top of your page, even before the HTML tag. I could explain everything, but the chances are that you would just skip everything, and you probably don't even need to understand it in depth anyway. Since you might be using some old tags, and you aren't using frames, you will be using HTML 4.01 Transitional. So, at the top of both of your test pages, add the following:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. You also have to add something to the head portion of the document. To that portion of the document, add the following: <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"<. So, now it's time to give you some links to various HTML validators. The W3C Validator is the one I tend to prefer, but there are many others as well. Another one is the WDG HTML Validator. That's it for validating, but there's one more thing I feel needs explaining.
You are probably wondering how you actually get a site on the web. Well, you probably won't want to do this with our little test site, but I'm still going to explain it to you. You, first of all, have to get hosting. You could either get paid hosting and a paid domain name (not recommended for first-time site builders), or you could get free hosting. I'll be explaining how you would do it with a free host. Well, to get hosting you'll need some possible places to get a site hosted. In the beginning, I would recommend Bravenet. There are a bunch to choose from, just try searching for free web hosts and you'll get tons of results. So, the next step, once you create an account, is to upload your files. You could either use FTP, or, if the site you choose has it, an online file-uploading tool of some kind. I would recommend FTP. So, now I'm going to have to explain FTP. You need an FTP client, the one I use, and would recommend, is a free program called FileZilla. Just try searching for "download FileZilla", and you should get the right site to download it from. Once you have downloaded and installed FileZilla, you have to find out a couple of things. Since I previously used Bravenet, I'll explain how to find these things out with Bravenet. I'm going to actually log into my Bravenet account, I actually never deleted it, and I'll walk you through the steps as I do them myself. Once you have your site ready you should probably return to this lesson for these instructions. First of all, go to Bravenet.com and log into your account. Once you log in, you should automatically be taken to the Members Area page. Find the link where it says "Manage Hosting". It should have a picture of a little house on it. Click on the link. Then click on "FTP Access". From there, it should say everything you need. Keep that page open, and open up FileZilla. Click on File, then Site Manager. Click on "New Site". Name the site. Then, where it says host, type in whatever it says after Server or Host Name (for me it says freeftp.bravehost.com, and I'm sure it will say the same thing no matter who you log in as). Where it says "Port", type in 21. For servertype, choose FTP. Then, for logontype, choose Normal. For user, type in whatever it says after User Name on the Bravenet page. Type in your normal password, and click connect. Double click on the folder with the name of your site, in the area to the right. In the area to the right, find wherever your website files are, and select all of them (use the shift key to select more than one at once), and then, still holding down the shift key, drag the files over to the area to the right. Now your files should be uploaded!