HTML Class 3

HTML Class: Day 3: Backgrounds and More

Welcome to day three of HTML class! Last class, we learned how to change the font, change the background color, and how you should keep the files of a page organized. You should now have either a hand drawn picture or a picture from http://www.freebackgrounds.com to use as a background for your test page. Now, if you created an image in paint to use as a background, you should have it saved as a BMP file. In general, that isn't the best file format to use for pictures, because it tends to load slowly, but if you try to save your image as anything else in MS Paint, the colors look horrible. I would recommend doing a search for Irfan View on Google, or any other search engine, and downloading it. Then, you can open up Irfan View, then open your background file, then go to file then save as, find the folder where you have your test page, name it what you want, then where it says "save as type", choose GIF, and then choosing save, so that you have a GIF image where the colors look right. Also, if you ever want to make part of an image transparent, in Paint, make any part of the image you wish to be transparent the same color, any color that isn't in any other part of the image will do, open it up in Irfan View, then save it the same way, only putting a checkmark next to where it says "save transparent color, click save, then click on any part of the image with the color you chose to use for the parts you wished to make transparent, and then you should have an image with a transparent background. Now that you have your background saved in the proper folder, saved as either a GIF, or if you chose one from the site, saved in whatever file format the image you saved was in, as long as it wasn't a BMP there is no need to change it to a GIF, saved in the proper folder. So now that it's set up properly, it's time to learn how to actually make it into a background. To make an image a background, in the body section of your file, you would type in <body background="The name of the image goes here, for instance, background.gif">. This is another code you don't need to close. So, now it's time to add your background to your test page. Open up your test file in Notepad, then right under where it says <body>, type in <body background="Put whatever you named your background here">. Now that we have a background image, we have to remove the code with the background color, so remove the code that says something like <body bgcolor="#FFFFCC">, and replace it with the background image code. Save it, and open up your test page in your browser. Depending on the background you used, you may want to change the color of the text, so if you choose to do so, do so now. There are a few more codes I will teach you before I end the class for today, starting with headers. The code for headers is <h1>Header text goes here</h1>. You can also change the "1" to lower numbers, which will make the header smaller. The best way to demonstrate the use of this is probably putting the title of the page in the body of the page. You probably noticed that the title code only puts the title at the top of the page, right where it says the name of the browser. Usually, you would also want the title of the page actually in the main part of the page, probably towards the top. Since I'm not sure whether or not I previously taught you the two ways to center text on your page, now would be an ideal time to teach you that. You can either do it like this: <center>text you want to be centered goes here</center>, or like this: <div align="center">Text you want to center here</div>. It doesn't really matter which way you use to center text, but I tend to prefer the div align way, so we'll be using that. So, for a centered header, you would code it something like this: <div align="center"><h1>Centered header text here</h1></div>. So, now it's time to add a header to that little test file. Open it up again, and right under where you have the background code, type this in: <div align="center"><h1>My First Website</h1></div><br>. Save your file, and open it up in your browser. Your page should be looking a lot better than how it did during the first lesson. That's all for today, so now it's time for the assignment. Today's assignment is a little bit different than the earlier assignments. Your assignment is to write down all of the codes you have learned so far in these HTML classes, and what they do. You might have to refer to the previous lessons to make sure you remember all of the codes. From the next lesson to the end of the class, you should update your little reference sheet every time you learn a new HTML code. Also, if you want to change the test site a little bit using the codes you have learned so far, you should do that before the next lesson. Once you have the little reference guide complete with everything you have learned from this class so far, you should also look over it a little, as it's always easier to make a site with HTML when you have a lot of the codes memorized. Have fun!