How to begin
So, Shall we begin? Here in this first part we will be seeing the HTML Basics and define it's nature. To start open a new Note Pad document. This is going to be the tool where we will be typing our code lines. So? Is it open? Now save this empty file, but change the extension to .html rather then .txt. For those who don't quite understand, save the file as: test.html
All Finished? Now open the file that you have just created, It should open in your web browser, but nothing will be appearing on the page.
The file should look like this:
|
|
Nothing??? It's normal you haven't coded anything yet!
HTML Tags
Well we will have to remedy your empty page, and that is where the fun starts!
The first thing to do is explain to you what a tag is. A tag is an HTML command that always finds itself between these two symbols: < & >
|
|
|
|
|
|
So the first tag that will be essential to a good EBay Sales page is the tag: <div> and the tag: </div>. The first one without the "/" means that we are opening the HTML command and the one with the "/" means that we are closing the command. HTML tags are most often used in pairs, without the "/" to start and with the "/" to tell when to stop.
|
|
|
|
|
|
Basically if we had a pair of tags to make the text dance, all the text between
<dancing text> and </dancing text> will be dancing.
All the text between these two tags will be dancing
|
|
|
|
|
Lets get back to our <div> tag. The first thing to do before coding any EBay sales page is to type these two tags: <div> and </div> one after the other. Type them in Notepad. Finished? OK, now all that you will ever type for EBay will be between these two tags, including other tags.
| <div> Everything between these tags will appear on your page! </div> |
Now let me introduce an other pair of tags <p> and </p>. This pair means paragraph. All that is between these two tags will be text on your page. Of course they must themselves be located between the <div> and </div> tags. Type our pair of new tags between the <div> tags, then in between the <p> tags type: My first HTML Code.
This is what it should look like!
Save in Notepad, Then in your Internet Browser click on refresh. And magic, There is something on your page!
With FireFox or Internet Explorer refresh should look like this:
Congratulations! And now I'm going to go take a little coffee break while I let you have fun coding what you want.
Space and Enter
Enter and Space bar don't appear on my page!!!
What should I do?
Okay I'm back! While you where trying this and that, you must have realized that HTML isn't affected by the Enter key, you could hit Enter between two words but on your browser's page it changes absolutely nothing! Peanuts! The same for Space bar you might as well type a thousand of them between two words, but in your browser only one shows up!
No need to panic! Here is how it is done... To create a "Space" it must be replaced by , except for the first one which is done automatically with your text!
And to replace the Enter key let me introduce one of the rare tags that does not come in a pair, it's the "br" tag. For each "br" you will skip a line in your Internet Browser. Now try and place some Spaces and some Breaks in your code before moving on.
To be typed in Notepad for it to appear in your Internet Browser
SPACEBAR =   ENTER = <br>
Text formatting
Well now we are going to learn about text formatting tags. We will start with the tag that will make the text bold. The pair of tags are <b> and </b>, just like the <p> tag, all that is between this pair will be bold. Try it and see your text get fat. You may place your tags anywhere in order to have some text in bold and other text standard.
<b> All text between these tags will be Bold </b>
Text fonts
I am now going to show you a special tag. It's the <font> and </font> tags. The speciality of this tag is that it does nothing on it's own! The text in between this pair won't be changed. However this pair will be essential because we can add functions to it, such as the size function.
Functions can be added to the opening <font> tag <font textdance="Super Funky"> All the text here will be doing the funky dance!</font>
The closing </font> tag never contains anything, it only tells the opening <font> tag to stop the funky music and make the text stop dancing the funky dance.
So how does it work? To add the size function you must add to the opening tag : size="" and in between the "" a number. For example type <font size="10">. However never add anything to the closing tag. So type in some text between <font size="10"> and </font>. You will see that your text is now a little larger! All you have to do is change the number to change the text size.
If you type : <font size="10">Big and Fat</font>
You will get:
Big and Fat
Two other useful functions are color="" and face=""
Color is for the text color. All you have to do is write the color between the "". For example <font color="blue"> and your text will be in blue.
If you type : <font color="blue">Blue Text</font>
You will get:
Blue Text
You can select a specific color by typing # + the 6 characters of the color code. For example #ffffff is the color for white and #cccccc is for grey.
| Color | Code |
| Green | #6ccc26 |
| Orange | #fbc320 |
You can find a color code chart on the link section of this page.
For the face="" it's your text font, for example <font face="ariel"> and all your text between this tag and the </font> tag will be in ariel.
If you type : <font color="red" size="6" face="impact">Text</font>
You will get:
Text
Horizontal lines
Well before going on to the next step I'd just like to show you one last lone tag just like the <br> tag. It's the <hr> tag.
The <hr> tag will create a line like this one:
However the <hr> has the same functionality as the <font> tag, functions may be added: We can add the color="" function that will modify the color, the size="" function that will modify it's thickness and finally the width="%" function that will determine it's span length on your screen, 100% being the whole of the page.
If you type : <hr width="50%" color="red" size="5">
You will get:
Note : The span of the line is at a default of 100% if you indicate nothing