HTML Tutorial 001

Today I, Dean, will be showing you the wonders and mysteries of HTML coding. Now, some people already have a big question mark on their face asking the question "What is HTML?". HTML is a type of coding some of us here, including myself, Cher and Pink, use to make our fancy looking posts. Now. It seems very very difficult but once you understand the general concept of things, you rapidly learn what this type of coding is, what it does, and how to use it. Lets start with the basics. Whenever you want to do anything concerning text. You must begin with these tags:

Code:

<div style="anything you want done with text"> *whatever you want to write*</div>

Now on to the good stuff, changing the size of something. To do this we'll take the code above which we just stated was needed whenever you did anything concerning the text of something. In between the speechmarks (") you now will write font-size: #px where # represents a number ranging from 1 - mostly about 30 before it gets way too big. So now we've done that we get this code:

Code:

<div style="font-size: 18px"> *whatever you want to write*</div>

And lets see what this does to our text:


Look at that! You just changed the size of your text using HTML! Its not so hard right? The rest of editing text is about the same. Lets now go for the font. Instead of using 'font-size: #px' we have to use 'font-family: *font*'. Of course I shall make an example:

Code:

<div style="font-family: times new roman">*whatever you want to write*</div>

Where I put Times New Roman, you have the ability to put any other font you can think of. As long as its in word. You can use Google Fonts but we'll get to that later as its a bit more complicated. Not much, but slightly.

Now we shall edit the colour of your text. Changing the colour of your text will make your ordinary grey text turn any other colour. Whether its simply 'green' or whether you choose a colour from, for example, a site like cloford.com/resources/colours/500col.htm it does not matter. Do remember, when choosing from cloford.com, you must use the hex value with the hashtag but we'll get into that later. Lets start changing the colour of our text. To do this, in between the speechmarks, we must write 'color: *colour*' so it turns out like this:

Code:

<div style="color: *colour*">*whatever text you want*</div>

Now you've seen all these things, and you have created them yourself as well, I think its time to combine everything you just learned. Oh yes. You can change the colour, font and size in one go without having to do separate things. It goes just like this:

Code:

<div style="font-family: *font*; font-size: #px; color: *colour*">*whatever text you want*</div>

Until next week where I'll be teaching you things like using Google Fonts and borders and scrolling text! GOOD BYE :D