THE NEWBIES GUIDE TO BASIC HTML
written by; Violent Work Of Art
---------------------------------------------------------------------
-CONTENTS OF THIS ARTICLE
---------------------------------------------------------------------
0. Introduction
1. Basic HTML Codes
2. Fonts
3. Links
4. Buttons
5. Marquees
6. Pictures/Images
7. Text Areas
8. Basic Tables
9. Last Words
10. Helpful Links
---------------------------------------------------------------------
0. INTRODUCTION
---------------------------------------------------------------------
I wrote to this tutorial to help newbies who are interested in
learning HTML. This is just a simple tutorial to inform people
of the basic HTML codes and functions. If you don't know what HTML
is let me explain in a quick line or two. HTML is a markup language
that is used to create hypertext and hypermedia documents on the
World Wide Web. Basically it is used to make the website's you see
everyday online. By the time you finish reading this whole article,
you should know the fundamental basic's of HTML and know how to make
your own personal webpage! Now instead of writting a bunch of other
pointless stuff let's get straight into the dirty work! Oh and please
forgive me if there are any typos!
---------------------------------------------------------------------
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;
The Title Of Your Website Here
Everything On Your Site Will Be Here
Now, if you want to to change your Body Background color simply put
the following code into the "body" of your webpage (i will give you
a link to a website with Hex Codes on them to help you out at the
bottom of the article);
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;
For the IMAGE URL, put in the URL your image is currently at. For
example, 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;
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 (I will
put a link below with some good .midi files of them for you). Now
just add the code below;
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;
This may not look like "normal" HTML code, but it is...when put in
any area of your website, it will make a simple space.
Now, if you wish to make a line simply put in the following code;
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! If you have a bunch of "cool" fonts already uploaded
on your website, it may not be best to use them. Other people may not
have those fonts uploaded in their computer. For example, if you
uploaded the "Sickness" font used by the band Slipknot and put that
on your website, it may show up as normal "Arial" font to people who
do not have that font uploaded on their computer. So it is best to
stick with the original fonts already installed on your computer.
Now, to change the font type of your text simply put in the following
code below;
your text here
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;
your text here
Pretty simple here, 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;
your text here
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;
your text here
Make your font ITALIC;
your text here
Make your font UNDERLINE;
your text here
Put a SLASH through your font;
your text here
---------------------------------------------------------------------
3. LINKS
---------------------------------------------------------------------
Okay, here I'm going tell you the basic's of links. To link a line of
text use the code below;
YOUR TEXT HERE
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;
YOUR TEXT HERE
By doing that, someone can email you by simply clicking on that link!
Pretty nifty, aye? 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);
YOUR TEXT HERE
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;
LINK TEXT
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;
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;
Just read the code and change it to whatever you want! See...HTML isn't
all that hard now is it? :)
---------------------------------------------------------------------
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;
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...
Pretty cool, huh? Now, if you want to link your button, use the code
i have provided below;
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;
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;
Again, 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;
BOUNCING MARQUEE;
MARQUEE WITH BACKGROUND COLOR;
CHANGE MARQUEE DIRECTIONS;
MARQUEE SPEED;
MOUSEOVER MARQUEE SPEED;
---------------------------------------------------------------------
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;
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;
If you want to link your picture to another webpage use the following
code below;
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;
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;
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;
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;
TEXT HTML TEXT HTML
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;
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;
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
;
The more rows you want, the more times you just put
. If you want
a row with nothing seperating it, simply use the code once! Next you
should put;
YOUR TEXT HERE
And after you made all the columns you need, just add the code below;
Now, once you've made all the rows you want your table to have, use
this code provided below;