JCL's Tutorial On Text Minipulation
Text Size
The first way to adjust the text size is probably a way you already know. To change the text size using a very basic technique, place an <h1>, an <h2>, an <h3>, an <h4>, or an <h5> tag before the text that you want to change the size of, and use a </h1>, a </h2>, a </h3>, a </h4>, or a </h5> (depending on the h (heading) you picked - correspond the two - ex. - <h1> goes with </h1>) at the end of the text size change. The lower the number, the bigger the text. The next way is to type in <font size = "size"> before the text you want to change the size of and </font> at the end of the text you want to change the size of. Replace the size in quotes with a number from 1 to 7 with 1 being the smallest and 7 being the largest (3 is the standard size). You can also use +n or -n where n is a number from 1 to 6 (you can't start with a size of less than 1 or more than 7). "+n" obviously increases the size of the text by n and "-n" obviously decreases the size of the text by n. Please note that font size 3 is not the same size as <h3>. Another way to change the text size is by using <small> & </small> and <big> & </big>. The text enclosed inside the <small> & </small> tag will be one size smaller and the text enclosed between the <big> & </big> tag will be one size bigger. You can also use a couple <big> tags and a couple of <small> tags to make the text 1 size bigger or smaller for each <big> and <small> tag you use, but if you do remember to end with </big> or </small> for each <big> or <small> tag you use. I wouldn't really recommend using these tags because using <font size = "+n"> & </font> and <font size = "-n"> & </font> is much easier. The last way to change the font size is by using the <basefont size = "n">. This works the same way as the font command, only you don't need a tag to end this command since it defines the standard font size for the whole page. If you use a +n or -n for the size it will subtract or add n from 3 since 3 is the standard size unless stated otherwise. Please note that the basefont size is just the standard size if the text size is not specified. If text size is specified by using the header or font sizes the basefont has no effect unless the font size is + or - n (n = number from 1 to 6).
Text Font
There's only one two ways that I know of to change the font. The first command is <font face = "font_name"> tag before the text that you want to change the font of and </font> at the end of the text font change. Replace font_name with the name of a font. Please note that this command only works on some browsers and the font change will not work for your visitor if he/she does not have the particular font that you are changing the text to. The second command is <basefont name = "font_name">. This works the same way as the <basefont size = "n"> with one exception, the <basefont name = "font_name"> tag is used for the standard font instead of size.
Text Color
There are a few ways to change the text color. The first is to type text = "color" in the <body> tag. Replace color with the color or the color's hex (hexadecimal) code that you want. It is probably better to use the color's hex code because lower level browsers have trouble reading the actual color's name. If you want a color translated into hex and have a JavaScript Enabled browser, please click here. If you don't have a JavaScript Enabled browser and want a color translated into hex, please click here. It's wasn't made by me (I'm too lazy to make a color code of that size), so I'm sorry it takes awhile to load. Go have breakfast or something while you're waiting if you don't have an extremely fast modem. The reason I recommend this site for a color code reference is because there is not one color that I know of which is left out! The second way to change the color of the text is to type in <font color = "color"> before the text you want to change the color of and </font> at the end of the text you want to change the color of. The last way that I know of is to type in <basefont color = "color">. This works the same way as the <basefont size = "n"> with one exception, the <basefont xolor = "color"> tag is used for the standard color of the text instead of the standard size of the text.
Text Style
If you want to put text in italics, use the <i> command to start the text that is going to be in italics and the </i> command to end the italicized text. To create underlined text and bold text, use the same commands that you used to make italicized text, but change the i's to u's for underlined text and i's to b's for bold text.
Placing & Aligning Text (Includes How To Make Columns)
To place text on your page, all you have to do is type it. To center the text, type in <center> before the text that you want centered and </center> after it. Another way to align text is to use the <ol> command, it indents the text. You can put a series of them to indent more, but remember to type in </ol> tag for each <ol> tag you used when you want the text to go back to the beginning of the left margin. Because HTML puts a maximum of one space between any word, letter, etc., no matter how many spaces you put in your HTML code, you'll only receive one space on your actual page. To receive more than one space on your page, you may want to use the command for each space you want to add beyond the first. Now, for the part you've been waiting and wanting to hear (save the best for last) - how I made this tutorial in columns. To make these great columns, I used the <multicol> tag before the text I wanted separated into columns and the </multicol tag after the text that I wanted separated into columns. To tell the computer the amount of columns I wanted, I put cols = "3" in the <multicol> tag so the computer would create three columns. You can put any positive number in place of 3, but if you put a number like 15 in replacement, the columns will be really annoying and the <multicol> command will lose its purpose. To tell the computer the amount of space I wanted between each column, I typed in gutter = "10" in the <multicol> tag. Gutter = "10" tells the computer to leave a space of 10 pixels between each column. Again, you can type in any positive number in place of 10, but if you put a really big number like 500, your columns will be messed up. You can also use width = "n" (where n is a positive number) in the <multicol> tag to define the width of all the columns and spaces between them, together, in pixels. Your finished product of the <multicol> and >/multicol> tags are evenly spaced & equally divided columns.
Jason's HTML & JavaScript Tutorial
E-Mail Me