- Impact
- 18
1. BASIC HTML CODES
---------------------------------------------------------------------
To make the base of a webpage you need to enter the following code into the "head section" of your website;
<html>
<head> </head>
<title>The Title Of Your Website Here</title>
<body>Everything On Your Site Will Be Here
</body></html>
Now, if you want to to change your Body Background color simply put
the following code into the "body" of your webpage
<body bgcolor="COLOR OR HEX CODE HERE">
By entering this code and putting in the color of your choice (Hex Code) you will change the background color of your website to any color you want!
Now, if you want to put an image as your webpage background put in the following code below;
<body background="IMAGE URL">
For the IMAGE URL, put in the URL your image is currently at. For example, <body background="http://yoururl/images/image.gif">
Now by entering the location of my picture as shown above, it will place that image as the background on your webpage. If you wish you to make your background "static" (not moving when you scroll down), use the following code below;
<body background="IMAGE URL"bgproperties="fixed">
If you want to be more daring, you can add background music to you website! For the code I'm about to put, your background music file must be a .midi file. A midi file is a simple music file. Now just add the code below;
<bgsound src="MIDI URL" autostart="true"
hidden="TRUE" loop="INFINITE">
>Autostart means; when the midi file finishes loading it will start right away! Hidden mean; you want the midi file to be hidden, not shown up on your webpage making it look ugly, ack! Loop means; if you want the midi file to keep repeating itself after it's finished playing.
Now, to make a simple "space" (such as a space when you click the space bar), put in the following code below;
Now, if you wish to make a line simply put in the following code;
<hr width=NUMBER color=COLOR size=NUMBER>
You can change it's width (how wide it is) by placing any number you wish where it says NUMBER after "hr width". You may also change the color by placing the Hex Code of your choice after the word "color". You may also change the height of the bar by placing a number of your choice after the word "size". See...HTML is getting easier to understand already!
---------------------------------------------------------------------
2. FONTS
---------------------------------------------------------------------
By using HTML font codes you may change the font of any area of text on your website!
Now, to change the font type of your text simply put in the following code below;
<font face="FONT">your text here</font>
Just put in the name of the font you wish your text to be in the place where it says, "FONT". Now, to change the color of your text, simply insert the following code below;
<font color="COLOR HERE">your text here</font>
Just put the hex code of the color you want your text to be where it says, "COLOR HERE". To change the size of your font use the HTML code below;
<font size="SIZE HERE">your text here</font>
This again is pretty simple, just put the number you want your font
size to be. Now I'm just going to list a few extra's you can do with
your font...
Make your font BOLD;
<b>your text here</b>
Make your font ITALIC;
<i>your text here</i>
Make your font UNDERLINE;
<u>your text here</u>
Put a SLASH through your font;
<s>your text here</s>
---------------------------------------------------------------------
3. LINKS
---------------------------------------------------------------------
Okay, here I'm going tell you the basic's of links. To link a line of text use the code below;
<a href=URL> YOUR TEXT HERE</a>
Simply place the URL that you want to link your text to where it says URL. To make an email link use the following code;
<a href="mailto:[email protected]"> YOUR TEXT HERE</a>
By doing that, someone can email you by simply clicking on that link!
Now, if you want to get more technical, here's how to give a title with your email link (such as: the title of the email);
<a href="mailto: [email protected]?subject=SUBJECT"> YOUR TEXT HERE</a>
Just put the subject you want to email to be where it says, SUBJECT!
Now, again getting more technical, if you want text to show up in the status bar at the bottom of the screen when someone scrolls over a link, use this code;
<a href="URL"
"OnMouseOver="window.status='STATUS BAR TEXT';return true;">
LINK TEXT</a>
You can customize the code however you want. Now, if you want to make a drop down menu, you will need to use the code provided below;
<form><select name=select size="1"
style="background-color:COLOR;
font size:#pt; font-family:FONT;
color:COLOR"
onchange="location.href=
(form.select.options[form.select.selectedIndex].value)">
<option value="URL">YOUR PAGE NAME</option>
<option value="URL">YOUR PAGE NAME</option>
<option value="URL">YOUR PAGE NAME</option>
</select></form>
I know this looks complicated and everything, but it's really not all that hard to understand. You just have to "break down" the code and look at one piece of code at a time. Just tinker with the code until you get it the way you want. Add the colors you want, font, URL's, etc. Now, (the code below is not HTML, it is called CSS) if you want to
change your link options for ALL the links on your website, put the WHOLE code into the head of your website;
<STYLE type="text/css"><!--
A:link{color:COLOR;text-decoration:none}
A:visited{color:COLOR;text-decoration:none}
A:active{color:COLOR;text-decoration:none}
A:hover{color:COLOR;text-decoration:none}
--></STYLE>
Just read the code and change it to whatever you want!
--------------------
4. BUTTONS
---------------------------------------------------------------------
Now I'm going to show you how to make your own buttons. To make a
simple pop up button use the code below;
<INPUT TYPE="button"
VALUE="TEXT HERE"
onClick='alert("TEXT")'></FORM>
To change the text on the button itself, put your text where it says,
TEXT HERE, right behind VALUE. To change the Pop-UP message, change
the part where it says TEXT, right behind the world "alert". Try it...
Now, if you want to link your button, use the code
i have provided below;
<FORM METHOD="link"
ACTION="URL HERE">
<INPUT TYPE="submit"
VALUE="TEXT HERE"></FORM>
We already talked about links before so, you should know what to
change on here! Now, to make your own e-mail button, use this code;
<FORM METHOD="link"
ACTION="mailto:[email protected]">
<INPUT TYPE="submit"
VALUE="TEXT HERE"></FORM>
You should also know what to do with this one too. Now, if you want
to change the color of your button (original buttons look ugly, use
color, heh), use the HTML code below;
<FORM METHOD="link"
ACTION="URL HERE">
<INPUT TYPE="submit"
VALUE="TEXT HERE"
style="font-family:FONT"
style="border style:solid"
style="background:COLOR"
style="color:COLORHERE">
</FORM>
This is all pretty basic stuff...you just have to customize it
to the way you want!
---------------------------------------------------------------------
5. MARQUEES
---------------------------------------------------------------------
A marquee is text that "scrolls" across your webpage in the direction
of your choice. Here are some sweet HTML marquee codes;
SIMPLE MARQUEE;
<marquee>YOUR TEXT HERE</marquee>
BOUNCING MARQUEE;
<marquee behavior=alternate>YOUR TEXT HERE</marquee>
MARQUEE WITH BACKGROUND COLOR;
<marquee bgcolor=COLOR>YOUR TEXT HERE</marquee>
CHANGE MARQUEE DIRECTIONS;
<marquee direction=right,
left,up,or down>TEXT HERE</marquee>
MARQUEE SPEED;
<marquee scrollamount=NUMBER>YOUR TEXT HERE</marquee>
MOUSEOVER MARQUEE SPEED;
<marquee onMouseover="this.scrollAmount=#"
onMouseout="this.scrollAmount=#">YOUR TEXT HERE</marquee>
---------------------------------------------------------------------
6. PICTURES/IMAGES
---------------------------------------------------------------------
Okay, you already know some of the basics to HTML. You customize your
text, change background colors, make your own marquee's, make your own
tables and everything! Now, you're going to learn how to add your own
pictures/images to your website! Now, to add a basic picture to your
website, use the code below;
<img src="URL OF PICTURE">
By using that, it should place the picture on your webiste. If you
want to change the size of your picture, tinker with the code below;
<table background=URL OF PICTURE height=NUMBER width=NUMBER><tr>
<td></table>
If you want to link your picture to another webpage use the following
code below;
<a href="URL OF LINK">
<img src="URL OF PICUTRE" border=0>
</a>
Just put the URL you want to link your image to in the place where it
says URL OF LINK. And by now you should know what to do with the rest
of the code!
---------------------------------------------------------------------
7. TEXT AREAS
---------------------------------------------------------------------
In this section I'm going to show you how to make your own text areas.
Text areas are good if you want to "show" HTML codes or other codes
on your website. If you put the code without the text area, the code
will be applied to your website. But if you want to show everyone
what the code looks like, you will need a text area to display it.
Here is what a basic text area HTML code looks like;
<textarea>YOUR TEXT HERE</textarea>
See, you just put the text that you want to be shown in the text area
between the two text area codes. Now here's a code to make the text
area a certain size;
<textarea rows=# cols=#>
YOUR TEXT HERE
</textarea>
By changing the numbers of "rows" and "cols" you will change the size
of your text area. Now, if you want a nifty looking text area with
colors check out the code provided below;
<textarea ROWS=5 COLS=15
style="background:COLOR"
style="font-family:FONT"
style="color:COLOR"
style="border style:solid">
TEXT TEXT</textarea>
You should know by now what to change, heh. Simply change the code to
make the text area look the way you want! Now, here's the text area
code that will allow just about every type of HTML to be displayed;
<ilayer name="scroll1">
<div id="scroll3"
style="width:100;height:75;
background-color:COLOR;
overflow:auto">
TEXT HTML TEXT HTML
</textarea></div>
You just change the size of the width, height and colors to make it
looks the way you want! Sweet, aye?
---------------------------------------------------------------------
8. BASIC TABLES
---------------------------------------------------------------------
Now I'm going to explain how you can make "tables". You must first
start off with the code below;
<table>
You can add a bunch of extra's to the table to customize it however
you want with the codes below;
bgcolor=YOUR COLOR
background=YOUR IMAGE URL
border=YOUR NUMBER
bordercolor=YOUR COLOR
cellpadding=YOUR NUMBER
cellspacing=YOUR NUMBER
It's all pretty simple really..."bg color" changes the background color
of the table itself. Background is if you want to add a picture as the
background of your table. Border is how wide you want the border of
your table to be. BorderColor is what color you want to make your
border. Cellpadding is the padding you want to make your table. And
cellspacing is how much you want your tables to be spaced apart. Here
is a full example of these code's together;
<table bgcolor=white border=2 bordercolor=red
cellpadding=3 cellspacing=2>
Just change to code however you see fit! I'm not losing you am I?
Alright, cool! Now, to add more rows to your table, insert the code
below after the first code listed <table>;
<tr>
The more rows you want, the more times you just put <tr>. If you want
a row with nothing seperating it, simply use the code once! Next you
should put;
<td>YOUR TEXT HERE</td>
And after you made all the columns you need, just add the code below;
</tr>
Now, once you've made all the rows you want your table to have, use
this code provided below;
</table>
Now, after you've compiled all this together, you should have yourself
a nice, simple table! If it all turned out well, good job! If it did
not turn out the way you wanted, go over the steps again until you get
it right!
---------------------------------------------------------------------
To make the base of a webpage you need to enter the following code into the "head section" of your website;
<html>
<head> </head>
<title>The Title Of Your Website Here</title>
<body>Everything On Your Site Will Be Here
</body></html>
Now, if you want to to change your Body Background color simply put
the following code into the "body" of your webpage
<body bgcolor="COLOR OR HEX CODE HERE">
By entering this code and putting in the color of your choice (Hex Code) you will change the background color of your website to any color you want!
Now, if you want to put an image as your webpage background put in the following code below;
<body background="IMAGE URL">
For the IMAGE URL, put in the URL your image is currently at. For example, <body background="http://yoururl/images/image.gif">
Now by entering the location of my picture as shown above, it will place that image as the background on your webpage. If you wish you to make your background "static" (not moving when you scroll down), use the following code below;
<body background="IMAGE URL"bgproperties="fixed">
If you want to be more daring, you can add background music to you website! For the code I'm about to put, your background music file must be a .midi file. A midi file is a simple music file. Now just add the code below;
<bgsound src="MIDI URL" autostart="true"
hidden="TRUE" loop="INFINITE">
>Autostart means; when the midi file finishes loading it will start right away! Hidden mean; you want the midi file to be hidden, not shown up on your webpage making it look ugly, ack! Loop means; if you want the midi file to keep repeating itself after it's finished playing.
Now, to make a simple "space" (such as a space when you click the space bar), put in the following code below;
Now, if you wish to make a line simply put in the following code;
<hr width=NUMBER color=COLOR size=NUMBER>
You can change it's width (how wide it is) by placing any number you wish where it says NUMBER after "hr width". You may also change the color by placing the Hex Code of your choice after the word "color". You may also change the height of the bar by placing a number of your choice after the word "size". See...HTML is getting easier to understand already!
---------------------------------------------------------------------
2. FONTS
---------------------------------------------------------------------
By using HTML font codes you may change the font of any area of text on your website!
Now, to change the font type of your text simply put in the following code below;
<font face="FONT">your text here</font>
Just put in the name of the font you wish your text to be in the place where it says, "FONT". Now, to change the color of your text, simply insert the following code below;
<font color="COLOR HERE">your text here</font>
Just put the hex code of the color you want your text to be where it says, "COLOR HERE". To change the size of your font use the HTML code below;
<font size="SIZE HERE">your text here</font>
This again is pretty simple, just put the number you want your font
size to be. Now I'm just going to list a few extra's you can do with
your font...
Make your font BOLD;
<b>your text here</b>
Make your font ITALIC;
<i>your text here</i>
Make your font UNDERLINE;
<u>your text here</u>
Put a SLASH through your font;
<s>your text here</s>
---------------------------------------------------------------------
3. LINKS
---------------------------------------------------------------------
Okay, here I'm going tell you the basic's of links. To link a line of text use the code below;
<a href=URL> YOUR TEXT HERE</a>
Simply place the URL that you want to link your text to where it says URL. To make an email link use the following code;
<a href="mailto:[email protected]"> YOUR TEXT HERE</a>
By doing that, someone can email you by simply clicking on that link!
Now, if you want to get more technical, here's how to give a title with your email link (such as: the title of the email);
<a href="mailto: [email protected]?subject=SUBJECT"> YOUR TEXT HERE</a>
Just put the subject you want to email to be where it says, SUBJECT!
Now, again getting more technical, if you want text to show up in the status bar at the bottom of the screen when someone scrolls over a link, use this code;
<a href="URL"
"OnMouseOver="window.status='STATUS BAR TEXT';return true;">
LINK TEXT</a>
You can customize the code however you want. Now, if you want to make a drop down menu, you will need to use the code provided below;
<form><select name=select size="1"
style="background-color:COLOR;
font size:#pt; font-family:FONT;
color:COLOR"
onchange="location.href=
(form.select.options[form.select.selectedIndex].value)">
<option value="URL">YOUR PAGE NAME</option>
<option value="URL">YOUR PAGE NAME</option>
<option value="URL">YOUR PAGE NAME</option>
</select></form>
I know this looks complicated and everything, but it's really not all that hard to understand. You just have to "break down" the code and look at one piece of code at a time. Just tinker with the code until you get it the way you want. Add the colors you want, font, URL's, etc. Now, (the code below is not HTML, it is called CSS) if you want to
change your link options for ALL the links on your website, put the WHOLE code into the head of your website;
<STYLE type="text/css"><!--
A:link{color:COLOR;text-decoration:none}
A:visited{color:COLOR;text-decoration:none}
A:active{color:COLOR;text-decoration:none}
A:hover{color:COLOR;text-decoration:none}
--></STYLE>
Just read the code and change it to whatever you want!
--------------------
4. BUTTONS
---------------------------------------------------------------------
Now I'm going to show you how to make your own buttons. To make a
simple pop up button use the code below;
<INPUT TYPE="button"
VALUE="TEXT HERE"
onClick='alert("TEXT")'></FORM>
To change the text on the button itself, put your text where it says,
TEXT HERE, right behind VALUE. To change the Pop-UP message, change
the part where it says TEXT, right behind the world "alert". Try it...
Now, if you want to link your button, use the code
i have provided below;
<FORM METHOD="link"
ACTION="URL HERE">
<INPUT TYPE="submit"
VALUE="TEXT HERE"></FORM>
We already talked about links before so, you should know what to
change on here! Now, to make your own e-mail button, use this code;
<FORM METHOD="link"
ACTION="mailto:[email protected]">
<INPUT TYPE="submit"
VALUE="TEXT HERE"></FORM>
You should also know what to do with this one too. Now, if you want
to change the color of your button (original buttons look ugly, use
color, heh), use the HTML code below;
<FORM METHOD="link"
ACTION="URL HERE">
<INPUT TYPE="submit"
VALUE="TEXT HERE"
style="font-family:FONT"
style="border style:solid"
style="background:COLOR"
style="color:COLORHERE">
</FORM>
This is all pretty basic stuff...you just have to customize it
to the way you want!
---------------------------------------------------------------------
5. MARQUEES
---------------------------------------------------------------------
A marquee is text that "scrolls" across your webpage in the direction
of your choice. Here are some sweet HTML marquee codes;
SIMPLE MARQUEE;
<marquee>YOUR TEXT HERE</marquee>
BOUNCING MARQUEE;
<marquee behavior=alternate>YOUR TEXT HERE</marquee>
MARQUEE WITH BACKGROUND COLOR;
<marquee bgcolor=COLOR>YOUR TEXT HERE</marquee>
CHANGE MARQUEE DIRECTIONS;
<marquee direction=right,
left,up,or down>TEXT HERE</marquee>
MARQUEE SPEED;
<marquee scrollamount=NUMBER>YOUR TEXT HERE</marquee>
MOUSEOVER MARQUEE SPEED;
<marquee onMouseover="this.scrollAmount=#"
onMouseout="this.scrollAmount=#">YOUR TEXT HERE</marquee>
---------------------------------------------------------------------
6. PICTURES/IMAGES
---------------------------------------------------------------------
Okay, you already know some of the basics to HTML. You customize your
text, change background colors, make your own marquee's, make your own
tables and everything! Now, you're going to learn how to add your own
pictures/images to your website! Now, to add a basic picture to your
website, use the code below;
<img src="URL OF PICTURE">
By using that, it should place the picture on your webiste. If you
want to change the size of your picture, tinker with the code below;
<table background=URL OF PICTURE height=NUMBER width=NUMBER><tr>
<td></table>
If you want to link your picture to another webpage use the following
code below;
<a href="URL OF LINK">
<img src="URL OF PICUTRE" border=0>
</a>
Just put the URL you want to link your image to in the place where it
says URL OF LINK. And by now you should know what to do with the rest
of the code!
---------------------------------------------------------------------
7. TEXT AREAS
---------------------------------------------------------------------
In this section I'm going to show you how to make your own text areas.
Text areas are good if you want to "show" HTML codes or other codes
on your website. If you put the code without the text area, the code
will be applied to your website. But if you want to show everyone
what the code looks like, you will need a text area to display it.
Here is what a basic text area HTML code looks like;
<textarea>YOUR TEXT HERE</textarea>
See, you just put the text that you want to be shown in the text area
between the two text area codes. Now here's a code to make the text
area a certain size;
<textarea rows=# cols=#>
YOUR TEXT HERE
</textarea>
By changing the numbers of "rows" and "cols" you will change the size
of your text area. Now, if you want a nifty looking text area with
colors check out the code provided below;
<textarea ROWS=5 COLS=15
style="background:COLOR"
style="font-family:FONT"
style="color:COLOR"
style="border style:solid">
TEXT TEXT</textarea>
You should know by now what to change, heh. Simply change the code to
make the text area look the way you want! Now, here's the text area
code that will allow just about every type of HTML to be displayed;
<ilayer name="scroll1">
<div id="scroll3"
style="width:100;height:75;
background-color:COLOR;
overflow:auto">
TEXT HTML TEXT HTML
</textarea></div>
You just change the size of the width, height and colors to make it
looks the way you want! Sweet, aye?
---------------------------------------------------------------------
8. BASIC TABLES
---------------------------------------------------------------------
Now I'm going to explain how you can make "tables". You must first
start off with the code below;
<table>
You can add a bunch of extra's to the table to customize it however
you want with the codes below;
bgcolor=YOUR COLOR
background=YOUR IMAGE URL
border=YOUR NUMBER
bordercolor=YOUR COLOR
cellpadding=YOUR NUMBER
cellspacing=YOUR NUMBER
It's all pretty simple really..."bg color" changes the background color
of the table itself. Background is if you want to add a picture as the
background of your table. Border is how wide you want the border of
your table to be. BorderColor is what color you want to make your
border. Cellpadding is the padding you want to make your table. And
cellspacing is how much you want your tables to be spaced apart. Here
is a full example of these code's together;
<table bgcolor=white border=2 bordercolor=red
cellpadding=3 cellspacing=2>
Just change to code however you see fit! I'm not losing you am I?
Alright, cool! Now, to add more rows to your table, insert the code
below after the first code listed <table>;
<tr>
The more rows you want, the more times you just put <tr>. If you want
a row with nothing seperating it, simply use the code once! Next you
should put;
<td>YOUR TEXT HERE</td>
And after you made all the columns you need, just add the code below;
</tr>
Now, once you've made all the rows you want your table to have, use
this code provided below;
</table>
Now, after you've compiled all this together, you should have yourself
a nice, simple table! If it all turned out well, good job! If it did
not turn out the way you wanted, go over the steps again until you get
it right!
