HTML Class: Day 2: More Basic HTML
Welcome to the second day of HTML class! Last class, we learned about what HTML is, the basic layout of an HTML page, bolding,
italicizing, and underlining text, and the break code. We also worked on making a test page with HTML; so far it should look like this:
The actual file for my little test page looks like this:
Before I go on, I'm going to
give you a little review:
The basic layout of a page:
<html>
<head>
<title>TITLE GOES
HERE</title>
</head>
<body>
MAIN PAGE GOES HERE
</body>
</html>
The other codes we've learned so far:
<br>: The break code
<b>Text</b>: Bolded text
<i>Text</i>: Italicized text
<u>Text</u>: Underlined text
Now that we've reviewed, it's time to start the lesson. We're going to start by organizing our site files.
So far, the file for the test page is called something like test.html, and is just randomly placed in your documents
somewhere. When you actually make your site, you shouldn't do it that way, so I'm going to show you how you should
organize it. Find your test page,
and open it up in Notepad. Now, go to File-Save As, and instead of saving it as test.html, we're going to create a
new folder, and save it as index.html, as the main page of any site should be called that.
When you go to a site like, say, Google, you type in http://www.google.com,
but you're actually being directed to http://www.google.com/index.html, unless it ends
in a different file name. When you use HTML, it has to end in .html or .htm, but when coding it in a different way,
it ends in different things. Anyway, that's beside the point.
So, create a new folder in your documents called "Test Page". Open it up, and save your file as
index.html. Now it's time to work on learning some more basic HTML.
First, we are going to work on changing the font. You can also do this with CSS, but until you learn that, you have to use HTML. When you change your font, you can change the font type, font color, and font size. The code for this is <font face="YOUR FONT TYPE HERE" size="YOUR SIZE NUMBER HERE" color="YOUR COLOR NUMBER HERE">TEXT HERE</font>. The font face is the type of font, like Arial or Verdana. In general, you shouldn't use any font other than those that come installed on a new computer, because if someone doesn't have it downloaded on their computer, they can't see it as the font you chose. The font size is exactly that, for normal sized text, the font size number is 3. Experiment with that to find a size you like, when you use that. Lastly, the font color can be changed with the font code, and it is fairly self-explanatory mostly, except the color codes. Color codes tell your computer what color you want to be shown, and instead of typing, say, turquoise, you would use the color number for it. To find out what color number you should use for a certain color, you can use my color chart. Take a look at my color chart and choose a color that you like, a dark one that will show up well against white. Now it's time to edit the test page some more. Open up index.html again. Now, right under where it says <body>, type in <font face=" " size=" " color=" ">, and fill in the blank areas with what you want them to be, remembering to put the number sign right before the color number. Then, right above where is says "</body>", type in </font> Then save, and take a look at your page in your browser; it should be looking a lot more interesting. Having learned how to change the font, you may be wondering how you change the background color. You can either change the background to an image, or change it to a color, but now I'll be teaching you how to change it to a color. You use the following code: <body bgcolor="COLOR NUMBER HERE">. Go back to my color chart, and find a good, light color for your background. Right after where it says <body>, type in <body bgcolor="NUMBER YOU CHOSE HERE">, replacing the text in all caps with your color number. Save and look at your page. It should be looking a lot better now. That's all we will be doing for today, so now it's time for a little preparation assignment. In MS Paint, or whatever other image creating program you have, draw a small picture that you would like to have for a background. When we code it, it will repeat automatically, so you don't have to draw it repeating. Save it in your test page folder. That's it for HTML class for today, and I hope you have fun designing the background! If you feel that you are bad at drawing images in MS Paint, or don't know how to, just go to http://www.freebackgrounds.com and pick out the background you like, and then save it. Have fun!