HTML FOR US DUMMIES



TO TURN THE MUSIC OFF GO TO THE MIDDLE AND HIT THE OFF BUTTON


+ HTML is very easy to use; it was designed that way. You don't have to be a programmer to use it. If you can edit a text file, then you can write HTML (and if you can write email, you can edit a text file). If you tried to learn before and couldn't, then someone wasn't telling you the right things.

+ First, I recommand you open the Notepad or Writepad to edit the command codes. If you are using Windows 95/98, NT please click on the "START" button down to your left bottom. And then click on "Programs ==> Accessories ==> Notepad or Writepad.

BASIC CODES

Here is the basic form of the HTML language place these codes into your note pad

<html>
<header>
<tittle> </title>
........
</header>
<body>
</body>
</html>

HOW IT WORKS

Before you start, you must understand how the HTML code works. It's very simple. When you start a command or tag you must remember to close the tag. How do you do that you ask !!! All you do is add a / into the tag example to follow:

<header> the header is now open
</header> the / stops the code.

<Header>
Header is the location where you put tittle of your homepage, discription, keywords, author, and so on.

Title: Title is start with <title> and end with </tittle> for the title of your homepage!
Example: >Welcome to Got Bones

YOUR BODY?

Body In the body, you can set the default of background image, background color, font color, link, vlink, alink and more... This defaut have to set that in the body tag, and you can check out the colors code with HYPE's Color Specifier for Netscape v.3
Provided from the Myleauge Creating a tourney section..

Background = That is the image backround for default
Bgcolor = That is the color default for the background
text = That is the color default of the font you want to have
Link = That is the color of the link that you did not click yet.
Vlink= That is the color of the link that you already clicked.
Alink= That is the color that when you click the link.

Example: <body background="http://members.lycos.co.uk/the rest of your link here bgcolor="ffffff" text="8000FF" link="8000FF" vlink="0000FF" alink="66FF00">

PLAY WITH YOUR TEXT

Codes for Text

Makes the text large and bold <h1> Some Text</h1> (<h1> Something </h1> = <p><font size=+3> Something </font></p>)see example below:

Some Text


<h2>Some Text</h2> you will see you will see the text smaller!
Bold <B> Some Text</B> you will see: Some Text
Italic <I>Some Text</I> you will see: Some Text
Center <center>Some Text</center> you will see:
Some text

Underline <U>Some Text</U> you will see: Some Text
Font Size <font size=+1>Some Text</font> ( You can increase the size of the font by increasing the number after the = sign, the bigger the number is the bigger the text will be.)

Font Color <font color="008B8B">Some Text</font> you will see: Some Text
You find the font color from the chart above.

Font Face <font face="Comic Sans MS">Some Text</font> you will see: Some Text (With the font face, you have to type exactly the font face name that available in your computer. If other people have that type of font, it will display the face of that font. If other people do not have that font face, it will display the default fonts of the browser)

Note: You can add more than 2 tags together.
Example: <B><I><font size=+2 face="Comic Sans MS">Some Text</font></I></B> you will see: Some Text

THE HORIZONTAL LINE



Horizontal line: <HR> you will see:


( You can custom your line with the size or how wide you would like it to be.)
Example: <hr size=5 width=75%> you will see:

LEARN TO BE CENTERED

Center Text or Image: <center>Some Thing</center> you will see text or image go to the center of the page:

Some Thing


Paragraphs: You can use <P> some thing </P> for paragraph and <BR> for changing line
List and Bullets:
<ul>
<li> Some Thing</li>
<li> Some Thing Else</li>
</ul>
and you will see:

LET'S ADD SOME PICTURES AND LINKS

Add Link: <a href="http://www.tdhelpers.com/">helpfortdshome</a> and you will see: TD's for all

Add Image: <img src="http://img.photobucket.com/the rest of your link here" alt="Here is the text display when the Image not load yet" border=0> and you will see:
Here is the text display when the Image not load yet

So now that you know how to center images and place images let's try it with our penguin friends. Let's give them a name as well.

This is what the code will look like:

<center><img src="http://img.photobucket.com/your address goes here, starting with htt:"></center><center><BR><font color="DAA520">Penguin Friends</BR></center></font>

copy this code, place it in the checker and you will see this:


How Cute


It's easy the more you work on it, use the HTML checker from the main index page to help you understand how codes work.

LET'S GET DOWN AND BOGGIE BY ADDING SOME MUSIC

Music Codes

<bgsound src="http://members.lycos.co.uk/TDHELPERS/pool/badbone.midi" loop="-1">  the tag itself <bgsound src="http://tdhelpers.com/music/adeline.mid" loop="-1">

<embed src="http://tdhelpers.com/music/adeline.mid" loop="-1"> 



This is what the embed looks like:

SCROLL BAR COLOR OR NOT

What? You want to add a colorful scroll to you page? Okay let's do it !!!

<STYLE type="text/css">
BODY {scrollbar-face-color: #191970; scrollbar-shadow-color: #6495ED;
scrollbar-highlight-color: #00BFFF; scrollbar-3dlight-color: #00BFFF;
scrollbar-darkshadow-color: #0000FF; scrollbar-track-color: #0000FF;
scrollbar-arrow-color: #FFFFF}

</style>

Use the color chart provided above the pick your colors. You will see..... Well look over there>>>>>>>>>

I GOT TABLES DO YOU?

Tables HTML Codes

+ Table is a special way to custom your web page.

To set the table, start with command <Table> and end with </Table>. <tr> is for row and <td> is for column.

Example: A table with 2 rows and 3 columns.

<table>
<tr>
<td>Frist</td>
<td>Second</td>
<td>Third</td>
</tr><tr>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
</tr>
</table>

You will see:
Frist Second Third
Fourth Fifth Sixth

+ You can also custom the border of table.

Example: A table with 2 rows and 3 columns, and table = 1

<table border=1>
<t r>% 3Cbr> <td>Frist</td>
<td>Second</td>
<td>Third</td>
</tr><tr>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
</tr>
</table>

You will see:
Frist Second Third
Fourth Fifth Sixth

+ Your can also custom the width size of the table

<table border=1>
<tr>
<td width=120>Frist</td>
<td width=130>Second</td>
<td width=140>Third</td>
</tr><tr>
<td width=120>Fourth</td>
<td width=130>Fifth</td>
<td width=140>Sixth</td>
</tr>
</table>

You will see:
Frist Second Third
Fourth Fifth Sixth

+ Your can also custom the background color of table, colums, or rows

<table border=1 bgcolor="EEADB8">
<tr>
<td width=120>Frist</td>
<td width=130 bgcolor="FFFF00">Second</td>
<td width=140>Third</td>
</tr><tr>
<td width=120>Fourth</td>
<td width=130 bgcolor="FFFF00">Fifth</td>
<td width=140>Sixth</td>
</tr>
</table>

You will see:
Frist Second Third
Fourth Fifth Sixth



[ MAIN INDEX ]