|
Goto Lesson:
Lesson 1 Lesson 2 Lesson 3 Lesson 4 Lesson 5 Lesson 6 Lesson 7 Lesson 8 Lesson 9 Lesson 10 Lesson 11 |
Now that you have completed lesson 5 you know how to create your very own webpage. It may not be very exciting or interesting but it is still a webpage. Now all we need to do is spice up our and add some formatting commands. During this lesson we will focus on the complex world of text formatting. The body tag has a big function in the formatting of text but we will discuss that in the next lesson. One of the most important commands in formatting text is the font tag. The font tag has three options, the face, color, and size options. These options can be best described by the example below. <html> <head> <title>Formatting text</title> </head> <body> <font color="red" size="6" face="Comic Sans MS">Formatting Examples</font> </body> </html> You should already know what most of those lines do so we will focus on the formatting line. first we call our command (<font) then we use are three options (note you do not have to use all three) and leave one space between each option and the command so the browser can read them independently. The first option color changes the color of the following font. I chose the new color to be red. Browsers know the names of most common colors such as red, blue, black, etc. it also has the capability to recognize names such as turqoise, maroon, etc. Not all colors have names though and that is where the hexadecimal system comes in. The hexadecimal system is a numbering system that consists of sixteen numbers/letters (hence the name hexa and dec). The numbers 0-9 and the letters a-f are used. The color code consists of 6 characters, the first two are red value the second two are the green value, and the third two are the blue value and the # symbol should be written before the number. The number system starts at 0 and goes to f, the higher the numbers the more intense the color. If I wanted a pure red intense red color I would use #ff0000 and by lowering it like #B70000 the red would be less intense. There are color codes all over the web and searching for one will give you several results if you click here you will taken to one of the best color code lists I have found. The next option we used is the size option which is a whole lot simpler than the color option. The normal font size is 3 you can change it to any value 1 through 7 you will have to try each one to see how big they are. You can also put simple arithmetic into the command such as +1, which will make the font one size bigger than the current font. The last option we used was the face option which sets the actual font of the text. This is an option you must be careful with because to use a font everyone who views your page must have that font on their system. If they do not it will be displayed as whatever their default font is. We are pretty safe with Comic Sans MS but some of the fancy ones such as the ones in office are only on systems with office. Make sure you use the full name of the font you can find this in microsoft word or similar programs or by browsing your fonts folder. <br><br> Now that you know how to use the one of the more complicated text formatting tags we will move onto some simpler ones. if you have ever used a word processor you are familiar with things such as bold, italics, and underline. There are also many more of them that can be used on your webpage. They all must be started and ended and none of them have any options. I am just going to list them for you and leave it up to you to try them out.
<br> Know you should no plenty about how to make it look like you want but you do not know who to make it appear where you want. One of the best ways of lining things up is by using tables but those are too complicated for this lesson and they will be covered later. In the last lesson you learned to position things vertically on the screen, but you also need to know how to posistion them horizontally. There are a couple different ways of positioning items in the window. In my opinion the easiest to remember are the <div> commands. The <div> has many different options but the only one we are going to be using is the align option. The align option can have three different values; left, center, and right. these will align the text in the selected way just as it would a normal text document. the default value is left, so if you want something left aligned you do not have to state it. You must make sure you end the <div> command when you are done aligning text in that way. example of div: <html> <head> <title>Using Div</title> </head> <body> <div align="center"> This text is centered. </div> now it is not. </body> </html> Since center is used so often it has it's own tag the <center> command. You may use this command if you prefer it works exactly the same as the div option. It must also be ended with </center>. Now that you know how to spruce up your text we will learn how to spice up the rest of your page in the next lesson. |
