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; YOUR TEXT HERE BOUNCING MARQUEE; YOUR TEXT HERE MARQUEE WITH BACKGROUND COLOR; YOUR TEXT HERE CHANGE MARQUEE DIRECTIONS; TEXT HERE MARQUEE SPEED; YOUR TEXT HERE MOUSEOVER MARQUEE SPEED; YOUR TEXT HERE --------------------------------------------------------------------- 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; 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;
YOUR TEXT HERE
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 ---------------------------------------------------------------------