Madhacker's guide to [HTML] Adding some features!

madhacker14 · Feb 23, 2009

Last lesson we disscussed the basics on HTML, if you didn't catch is you can catch it anytime here at the User Education section. Remember, stay active here in the UE, it will help you in many ways you never though possible, and that is my job. My job is to help educate users.

So here it is my guide.
Since I've had requests in my other thread stateing "You neeeeeed to show us how to create colors, images onto our page"!!!!
Guess what, you are special today because that is EXACTLY what we are going to be working on gladly!

Since this is programming sadly I rarely will use pictures (Sorry),
anyways I will try to help you as MUCH AS POSSIBLE!

If you have any questions, please be my guest, and post here!
If you are interested in going farther with programming I suggest you talk to someone such as TDD, SuF, or Swan. Great programmers!

Lets get started, shall we?

First of all, you can practice your HTML <href="http://www.practiceboard.com/">

T.O.C
Introduction(Read above)
Breif Review
Tables
Layout
Lists
And finally
Enjoy the guide as much as you can.

A breif Review

Alright can anyone here remember what we discussed last time?
I feel dumb talking to myself perhaps?
Anyways, we discussed variables mainly.

Code:

<html> <body> var h=6 </body> </html>

And so on.. I want you to go back now, and review, and DO the variables over and over again, it WILL help.
We remember that <html> defines that we are useing HTML format, and we discussed <head> <body> vars.

Tables

Alright, well today were going to create a simple table feature.
Not hard at all, really its simple math for anyone who wants to know,
and the ability to know, and memorize some codes.

Okay for this were going to have to know <tr> and <td>
tr= Table row, and td= Table data.
In other words for <td> the information inside the table row. (the boxes).
lets start off with one row, and two table data.
Should look something like THIS:
Code:
<html>
<head> <h1>Were about to create a table</h1>
<body>
<tr>
<td> TD 1 </td>
<td> TD 2 </td>
</tr>
</head>
</body>
</html>
Get the <td> <tr> thing now?
Anyways, as you can see shouldn't it be in a box like I promised?
Well in order for this, we need to put a border around it, and how you say?
Code:
<html>
<head> <h1>Were about to create a table</h1>
<body>
<table border="1">
<tr>
<td> TD 1 </td>
<td> TD 2 </td>
</tr>
</head>
</body>
</html>
And now, we have a heading!
If you dont like it, there are more to choose from, switch the 1, to a 6, 5, 4, 3, 2, or 1. Whatever your heart disires.
Anyways <table border="1"> said "create a table border, and the style is number one!".

Layout(s)

As promised I am going to go over how to add a background COLOR to your page! NO, in this guide I will not cover how to insert an image as a background, I will next guide though..
Anyways, we want to add a color to the background right?

Code:

<html> <body> <body style="background-color:blue"> </body> </html>

Alright well as you can see its pretty self explainitory right? Body style is background color which is equal to the color blue, therefore createing blue as your main background color.

Well what if I dont like the color black text, with this dark blue writing, I WANT RED!
Calm down, shhhheeeessshh. I will show you a simple way to change the font, and color of your text.
Code:
<html>
<body>
<body style="background-color:blue">

<h1 style="font-family;verdana;color:red">A beautiful shade of red!</h1>

</body>
</html>
Personally im not to good with fonts, but in this case i just got a simple one, and put it on there.
In this we added a style for our heading, we added our own person font now before you are about to end the statement with your last command you will put ":" in there before the last you put ";" as shown in the code about *(confuseing I KNOW!)
We then made the color red, and typed in out text, and ended the heading.

Lists
Okay well I thought I mine as well shove lists in here,
god, you all are learning so quickly!
Anyways, yes we all know what a list is,
now were going to create one.
Unorderd List
<ul> is the tag, and he don't mess around boy!
Anyways, this will simply create a list with bulliet holes beside it,
something real simple, correct?
Code:
<html>
<body>
<ul>
    <li> This is a list </li>
    <li> and this is anouther list </li>
</ul>
<li> stands for list, that is where everythign will go that you want to be on the list, just like sythe has the option to create a list by doing
Code:
[LIST] [/LIST]
Sounds simple right? All we do is make an unordersd list, and create lists, in no certain way of doing it!
Orderd list
<ol> is the tag we will be useing.
This tag is the exact same function as the other except instead of bulliet holes, we now have "1, 2, 3, 4, 5, and etc".
Here is an example
Code:
<html>
<body>
<ol>
    <li> An orderd list </li>
    <li> anouther ol </li>
</ol> // and it ends here
Okay simple if im not mistaken!
Try it out!

And finally....
Sadly this is the part where we say our good byes, shed our tears untill the next guide, which will be VERY soon!
I hope you all enjoyed, any errors, please tell me!
Any questions, please ask me!
Rate my guides, any way you wish to choose.
I will be making an application for UE soon, and I hope to have mosts support.
Next guide of HTML, will probably conclude my lessons on HTML, and then I will start making XTML, and so on.

Thank you!

Log in or Sign up

Madhacker's guide to [HTML] Adding some features!

madhacker14 Guru

Log in or Sign up

Madhacker's guide to [HTML] Adding some features!

Thread Tools

madhacker14 Guru