A quick tutorial for some of you who don’t understand HTML or CSS, just a basic one for now, I’ll expand upon it later.
Section 1- The Basics
HTML is one of the easiest languages to learn, but has many uses in comparison, making it a valuable asset in all of your projects. HTML is a globally accepted language in Web Design, and honestly I don’t get how anything could be made without understanding this base language, but you didn’t come here to listen to me rant, did you? On to the content then!
Tags are pretty simple, with almost all of them having an opening <> and a closing </>. All documents start with the same basic tags.
<html>
<title>Test Site!</title>
<body>
</body>
</html>
simple enough, eh? That’s all you need to have a website up, but then again, its just a blank page, where’s all the goodies?
<html>
<title>Test Site!</title>
<body>
<p>
WOW! A section title!
</p>
<p>
blah
</p>
</body>
</html>
ya, no… You have text, but that’s ALL it is, that’s not even close to a website, it might be good to make yourself feel warm and fuzzy inside that you made something in HTML, but that’s all it’s good for. Let’s get into some text tags to make this more interesting!
<b></b> – Bold tag
<i></i> – Italic tag
<u></u> – Underline tag
<h1></h1> – Header tag, can be 1-6 to make the size bigger/smaller
Let’s try this again now!
<html>
<title>Test Site!</title>
<body>
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>
better, but no good, all you have is still text, onto the next section then.
Section 2- Color
Color makes things more interesting to be honest, without it, all you have is black and white, which does absolutely nothing with aesthetics (how it looks…).
One more time with some color!
<html>
<title>Test Site!</title>
<body bgcolor=”black”>
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>
Ya, that was smart, you have a black BG, cool, eh? NO! You also have black text, good luck with that, now its not boring, its blank… lets try this again
<html>
<title>Test Site!</title>
<body bgcolor=”black”>
<h1><font color=”white”>
WOW! A section title!</font>
</h1>
<p><font color=”white”>
blah blah blah blah <b>blah!</b></font>
</p>
</body>
</html>
Ya, there we go, that’s actually readable, but honestly, who wants to go through all of that!? Lucky for you there’s css, which brings us to the next section.
Section 3- Hex Color
Hex is, put simply, your best friend, or your worst enemy. Hex color codes are in, as the name suggests, 6 digits, sometimes different, but I wont cover that here. The hex system has 16 numbers, as opposed to the decimal system. 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 00 is the lowest value, meaning 0, and FF being equal to 256, notice something? It’s similar to the RGB method, infact, it is, just in hex. 000000 is black, of course, with no value, and FFFFFF is white, with all value, and RGB is the order, so
FF0000 Red
00FF00 Green
0000FF Blue
I’m not going to go through all the math involved in hex, but the dead basic, as not to bore you
Decimal – Hex
1 – 16^1
10 – 16^2 (256)
100 – 16^3 (4096)
And if this rings a bell, you used windows 95, and hopefully trashed it by now, and its 256 colors of joy. Hoo-rah for 32-bit!
a color picker is very useful for these things, maybe color cop or something else, sourceforge is your friend 
Section 4- CSS
This will save your life, quite literally. Your boss decides he wants another page, and a bunch more text with all red font, that leaves you to change EVERY LAST FREAKING FONT TAG. No fun, eh? Just hope you never learn the hard way. CSS can be a seperate text document that controls the style for MULTIPLE pages, making it easy to change it up, and lucky for you, its not hard to learn either! For not, lets start with just css in the document instead of external. If I catch you with font tags after this, you will die a most painful death(not really, just dont use them…)
<html>
<title>Test Site!</title>
<head>
<style type=”text/css”>
h1 {color: #ff0000}
h2 {color: white}
p {color: rgb(0,255,0)}
</style>
</head>
<body bgcolor=”black”>
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>
That’s better, no more evil font tags! In case you didnt notice, the three tags up there demonstrate the different ways to define color, hex, names, and rgb values.
Section 5- Background images/colors with css
here’s a basic rundown of how to get backgrounds to work using css
body
{
background: #FF0000;
}
A colored background
body
{
background: url(pic.gif) no-repeat top;
}
A pic with no repeat
body
{
background: #00FF00 url(pic.gif) no-repeat fixed top;
}
A pic with no repeat, and is fixed at the top of the screen
Section 6- Links and Images
Again, all you have is text, what fun is that? You need some images and some links to get the site running! Lets use an image as a link for this example
<html>
<title>Test Site!</title>
<head>
<style type=”text/css”>
h1 {color: #ff0000}
h2 {color: white}
p {color: rgb(0,255,0)}
a {color: green}
</style>
</head>
<body bgcolor=”black”>
<a href=”testsite.com”><img src=”testsite.com/banner.jpg” alt=”Our banner! yey!” border=”0″>
<h1>
WOW! A section title!
</h1>
<p>
blah blah blah blah <b>blah!</b>
</p>
</body>
</html>
just make sure you have the image, eh? You can use text instead, and notice that I changed the css too, now all links are green. MAKE SURE YOU HAVE BORDER=”0″ , lest you want a tacky blue border around your image(in this case, its now green 
)
Section 7- Tables and Div(ision) tags
Two tags that are probably life savers in organizing things, the table and the div tag, but lets start with tables. Think Microsoft Excel, with columns and tables, same basic idea. Table utilizes <th> (table head), <tr> (table row), <td> (table block). (thanks mukou)
<table>
<tr>
<td>Apple</td>
<td>Orange</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Bannana</td>
</tr>
That’ll make a 2×2 table with the information given, simple enough eh? <table bgcolor=””> can also be used
The div tag can be used to define sections, and as you’ll learn in further learning in css, classes are a lifesaver. CSS can define multiple classes in the div tag, meaning different color, font, size, and other things in each different class. I would explain it, but it’s one of those things that’s best for you to learn from the pros, they can explain it ALOT better than I can(/will, lol)
<div bgcolor=”red”>red section</div>
<div bgcolor=”green”>green section</div>
But do me a big favor and never use that combination, please, for the sake of soon to be color-blinded web-surfers, dont do it (read color tutorial below)
Conclusion
hope that helped
Programs-
Notepad ++
HTML Kit (also good for php[later tutorial])
Dreamweaver(good luck wih the cash 
)
Color tutorial(also by me)
http://www.deviantart.com/deviation/56255162/
This will help explain the woes of color usage, make yourself look alittle more like a pro early with the right color combinations!
for more advanced learning in scripts, go to http://www.w3schools.com !
Till next time!
Winter Design by Lemur 