💾 Archived View for gemini.spam.works › mirrors › textfiles › uploads › htmlguide.txt captured on 2023-01-29 at 12:54:10.
⬅️ Previous capture (2020-10-31)
-=-=-=-=-=-=-
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 ? of Violent Work Of Art 2002
---------------------------------------------------------------------