~Html school, learn html easy with Love4Colors, fonts.~

~ Managing fonts ~

So you want to learn more! Great, let´s get on with it! We are going to keep on working with the textfile we made in the first class, we named it myletter.html and it looked like this: <html> <head> <title>My first letter to my website!</title> </head> <body> Dear website, this is my first letter to you. I am sure there will be many more in the future... Sincerly ~Me </body> </html> Now we want to make all text green! As we learned in the first class we need to use a tag that will tell our computer what to do, in its language. So in order to tell it to change color on text we need to learn to say <font> and we must remember to tell it when to stop with </font>. So, everything we put between the <font>and the </font> will be changed. But as we remember from the first class we also need to add an attribute to the font tag. The attribute for color is... guess? Yepp, thats right color. Hey, our computer knows some english to! Now ain´t that sweet? After the attribute color we must add ="" so it will look like this: <font color="">TEXT</font> Now when we know this, we must learn how to add wich color to change our text into. There are 2 ways you can change colors on your text. Either you can use the actual colors name, for ex. "green", "darkgreen", "lightblue". This is placed between the " and the ", like this : <font color="green">TEXT</font> This is one way, but this is not that exact, I don´t want this green color on my text so this way is not the most perfect way. The best way to get the exact color of your choice is to add the colors in hex codes. What the "hex" are hexcodes? I´ll tell you! Hex codes is the amount of red green and blue you want to tell your computer to use. A computer only knows 3 colors. And that is as said, red, green and blue, the computer can make all different colors by mixing theese three colors more or less with each other. A hex code always starts with a square. # following with 6 numbers or letters. For example, if you want black color, the hexa for that is #000000. Why? Because, the first 2 numbers or letters stands for how much red color to add, and the second 2 stands for how much green, and the last two for how much blue. Like this #000000. We can add the letters, A, B, C, D, E and F. A stands for darker, and F stands for lighter. 00 stands for less and upp to 99 stand for more. So lets have an example, we want the color black, so how much red green and blue do we want then? Non right? Good so lets tell it that, we want 0 color of red, green and blue, #000000! Now that was easy! Lets say we want a deep blue color, then we need to change the two last 00 to for ex. 99, lets try that. #000099! Wohoo, this is fun! Let´s try to blend in some red in it! #FF0099! And now some green #FFAA99! Weehee, well you get it by now don´t you? You can play with that for a while. In this example I am going to use this hex color for green, #A2B044. Lets move on! Now that we know how to change colors we are also going to learn some other stuff to do with text. First, we are going to learn how to change fonts. Lets say we really like Comic Sans MS, and this is the font we want to appear on our letter to our first website. We are still using the same tag <font>and the </font>, but we need to add the attribute "face" and the fonts name, to our tag, like this. <font face="Comic Sans MS" color="#A2B044">This is what Comic Sans MS looks like </font> (just remember that if you want to use a rare font, your visitors might not have it installed on their computers, that means that your fancy font won´t appear on their computer. Either make them able to download the font from your site, or choose another one) Hmm, I want the text to be bigger! I can change the text size with adding b>size="", the sizes are 1-7, 1 is small and 7 is big. using 7 the text will be this big! <font face="Comic Sans MS" size="7" color="#A2B044">This is what Comic Sans MS looks like </font> Ok so lets make the changes in our myletter.html, except, we want to use the size 4 instead of 7, we are not blind are we? <html> <head> <title>My first letter to my website!</title> </head> <body> <font face="Comic Sans MS" size="4" color="#A2B044"> Dear website, this is my first letter to you. I am sure there will be many more in the future... Sincerly ~Me </font> </body> </html> Ok, now listen real careful, we are going to make some more changes. We want to only have bigger size and green color for the words "dear website", we want the rest of the text to be smaller, and use the font "Times new roman" and we want it to be blue. And then we want "Sincerly me" to be bold! Lets see if you can figure it out by only looking at the codes, here we go! <html> <head> <title>My first letter to my website!</title> </head> <body> <font face="Comic Sans MS" size="4" color="#A2B044"> Dear website,</font> <font face="Times New Roman" size="2" color="#87A5C7">this is my first letter to you. I am sure there will be many more in the future... <b>Sincerly ~Me</b> </font> </body> </html> I bet you got that! That wasnt to hard right? Our letter should look like this now, myletter.html Im just going to give you some more examples of what you can do with text below, and you can go ahead and play a bit with your texts on your own: <b>Makes the text bold</b> <i>Makes the text italic</i> <u>Makes the text underlined</u> <b><i><u>*Makes the text bold, italic and underlined</u></i></b> You should always place the tags and end tags like in the example when you use more than one. From the center and out to both sides, like this: Right:* <b><i><u>*Makes the text bold, italic and underlined</u></i></b> Wrong:* <b><i><u>*Makes the text bold, italic and underlined* </b></i></u> Having fun? Of course you are! I´m waiting for you at the next class!

Take me back