441 lines
15 KiB
Plaintext
441 lines
15 KiB
Plaintext
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;
|
||
|
||
<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 (i will give you
|
||
a link to a website with Hex Codes on them to help you out at the
|
||
bottom of the article);
|
||
|
||
<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://www.slipknot1.com/logo.jpg"> 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 (I will
|
||
put a link below with some good .midi files of them for you). 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;
|
||
|
||
|
||
|
||
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;
|
||
|
||
<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! 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;
|
||
|
||
<font face="FONT">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;
|
||
|
||
<font color="COLOR HERE">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;
|
||
|
||
<font size="SIZE HERE">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;
|
||
<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:NAME@EMAIL.com"> YOUR TEXT HERE</a>
|
||
|
||
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);
|
||
|
||
<a href="mailto: NAME@EMAIL.com?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! 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;
|
||
|
||
<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...
|
||
Pretty cool, huh? 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:name@email.com">
|
||
<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>
|
||
|
||
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;
|
||
<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!
|
||
|
||
---------------------------------------------------------------------
|
||
9. LAST WORDS
|
||
---------------------------------------------------------------------
|
||
Okay, now that you know all the basics of HTML you should be able to
|
||
make your own fully functional and nifty looking personal webpage! Be
|
||
proud, you now know the basics of HTML! Well, I really hope this was
|
||
able to help someone. Below I've listed some websites that may be able
|
||
to help you further in your HTML knowledge hunt! ;)
|
||
|
||
---------------------------------------------------------------------
|
||
10. HELPFUL LINKS
|
||
---------------------------------------------------------------------
|
||
Here are a few good links that can help you in the field of HTML.
|
||
|
||
www.coloryourprofyle.com
|
||
(hex colors, alt codes, aol profile help ((aol sucks ass))
|
||
|
||
www.lissaexplains.com
|
||
(html, javascripts, css, hex codes, tons more ((nice site!))
|
||
|
||
www.webmonkey.com
|
||
(tutorials on many various programming languages)
|
||
|
||
www.corruptfx.com
|
||
(excellent all around site)
|
||
|
||
---------------------------------------------------------------------
|
||
All information was provided entirely by Violent Work Of Art
|
||
Article copyright <20> of Violent Work Of Art 2002
|
||
---------------------------------------------------------------------
|