icon

website tutorials ~ last updated 08.13.2002 - www.wolfyserver.org Right Click Enabled

dreamweaving - how to make a webpage - a comprehensive tutorial

The World Wide Web is without bound. There is a website for everything; from online novels to recipes to the underground. He who knows how to use it benefits the most. Those people know the right search engines, toplists, and sites to go to, but tend to keep it to themselves. The result? 80% of useless crap online from making money sites pretending to be warez sites, warez sites that only have gay voting, to script kiddie sites out there to steal your credit card number. Only a small part of this community is actually what you're looking for. The wrong thing to do is search for warez on warez.com (porno, banners, and more porno) and searching for roms on yahoo (see links page for good sites). My main point is that we are losing in great numbers the "good" webmasters. These are the ones that strive to help others instead of for financial gain. Laugh if you will, but how many sites have you went to had no banners, working links, detailed descriptions, and a friendly GUI? Compare that with the other "vote to download", "click and sign up to enter", download photoshop 6 here (aref="http://www.spedia.com/refid?asshole6987), <javascript = popup 9999 windows> sites. This script kiddie and fad follower generation (those who say linux rules but don't know why. we all know linux is praised with rock-hard stability among other things, and also i hate those lamers who have unoriginal AIM icons like Cut buddy, smoke buddy, Lick buddy, etc.) and with crackers and hackers becoming security analysts, truth and knowledge is being threatened by empty promises and quick pleasures. Ok, so you've decided to join the good side? Great! You don't know how to make a site? NFO file... control panels ... serial numbers? What the Hell? Don't worry everyone has to start somewhere and the sooner the better if you're going to make a hpvca site (with a disclaimer of course). With our faqs and html tutorials, you will have a basic understanding of this sort and then will be free to learn more elsewhere. Below are tutorials ranging from the first step to finishing touches. Good luck! (Right click enabled)

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 1 - Obtaining Website Hosting

No, people can't just access your C:/windows/desktop/ folder. Your page must have hosting for others around the world to see it. Listed below are the hosts I've used and descriptions.

http://www.7host.com - With brinkster.com becoming paid hosting, there are still many free asp/php and file hosts out there. 7host is is the current title holder for best free webhost. No banners, fast and reliable service, sufficient bandwidth, and 50mbs of space for your website files. HTML uploader provided and so is FTP access, provided ftp only for html files- you can upload .zip, .ace, etc in the html uploader.

http://www.lineone.net - Also no banners here. You can have up to 5 accounts, 10mb each. This is good if you post roms which have disguised names. They should be pretty safe. Speed is fast like brinkster, and upload is via a html uploader, though it's confusing to find a link on the main site.

http://www.liquid2k.com - This host is for html files and some pictures only. Zip files are not allowed and neither are any files above 100kb. It's useful if you just have to store some pictures temporarily there. Not for long term use as a file site. Nevertheless, for a html server- best of the best. It has hosted wolfyserver for nearly two years. http://www.liquid2k.com/woofies/mainfront.html

http://www.telefragged.com - A nice host for game sites and game sites only, no banners just a little cool hosting button you put on your site.

http://www.angelfire.com - despite much ridicule, angelfire has reliable servers and they're not all that strict. plus with the wolfyserver angelfire banner killer script... it's extra kudos.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 2 - obtaining html editor & bare bones

You have two choices - notepad or frontpage express; which are all included in windows. (go to control panels, add remove programs, windows setup, internet tools, to install frontpage express.) But this is wolfyserver and wolfy likes free stuff, so download macromedia dreamweaver 4 from www.macromedia.com and use the working crack, if you don't already have frontpage 2000 or xp. The Basics -

1. Notepad - Just use html and save it as 'All Files' and name the file like page.html or .htm. Use those extensions and it will be automatically configured so you can preview it in IE or netscape.

2. Frontpage or Dreamwaver - You don't have to care about basic html, formatting, text can be all done with a graphical interface but I will explain how to make a website with html code and notepad.

All html files start with <html> and end with </html> To end a code, the key symbol is "/". After the html begins, the <> symbolize the word "begin", we have <head> and </head> The header is just like your heading in a test or something. You can display the title, what kind of html editor was used, background colors and all that, which will be mentioned later. Next comes the body section, which is just what the name conveys. This is the bulk of your html document and has for example, pictures, text, movies, marques, etc. To start it, we type again <body> and end it with </body>. Because the <html we started never got ended, until we were finished with the body, all that is left is to close it, so type </body>. In frontpage and dreamweaver, you don't have to worry about any of this. In fact, those using editors and know this already and skip to like tutorial 13. Below is an example of what we've accomplished so far.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 3 - title and metas

Of course we want to name this page, so that IE will show the name in the title bar. Simply go to the <head> section, and after the start point, put <title>what you want the title to be</title> and the end to end it.

<html> <head> <title>Welcome to wolfyserver.org!</title> </head> <body> </body> </html>

also located in the head section, is the meta description. meta can tell the visitor what editor was used or provide a brief description and keywords search engines use to find your site, if you choose to list it. And a tip - put keywords that are general and you think people will type, such as site, cracks, free, etc.

Type between the <head></head>: (separate description from VALUE with a return, so value will be under meta)

!*remember, when copying html code, always copy into notepad, and recopy back, if the code is not in a text box such as the one above. this is because the code will merge with the text style and color on that page*!

<META name=description

VALUE="we have the latest file cracks & software for today's software, aim booting, live chat, exploits, and much more.">

above is the description i used for wolfyserver, just change the text.

<META name=keywords

VALUE="netzero crack, altavista crack, audiocatalyst full version, dfx cracks, site, website, punting, booting">

And above me is the meta keywords code for search engines, just separate words or phrases by commas. Characters are unlimited so you can put as many as you want, but remember, no false claims.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 4 - background image, bg music, bg colour

Now to add some spunk to your white page. If you are using frontpage, right click anywhere on the screen and click 'page properties' and it's simple from there on. If you are using notepad, read the below.

The computer recognizes colors as numbers, like 255 is white, but html does not usually use the 255,255,255; instead it uses hex symbols for colors- they are 6 characters long, composed of numbers and letters, and you can separate them by commas and have two in a group, or just connect them together, which is much easier. when using hex, use # in front of the numbers Use the color rule for text and other backgrounds as well:

white= #FFFFFF black= #000000 lightblue= #6699FF and so forth

Or you can just do "black" "white" and use text to substitute, although the browser will only recognize common colors. Now for the background, we use the code

<head> <body bgcolor="#6699FF"> </head> *From this text box, you can directly copy and paste code because it is in default font and color.

in between the <head></head> section. All you have to do is set the numbers. To find a color, use programs like photoshop which displays the hex number or microsoft paint.

!*remember, when copying html code, always copy into notepad, and recopy back, if the code is not in a text box . this is because the code will merge with the text style and color on that page*!

Now onto a background picture. I first assume you know that when you post a page with a picture online, the file location will be http://... instead of C:/windows/desktop. If you don't change it to your webhost address or at least remove the c:/ heading, the file will not be found, same thing goes for hyperlinks which will be mentioned later. Most hosts let you just link to a picture by putting picture.gif instead of http://www.liquid2k.com/udomain/picture.gif. so it's much easier and you don't have to worry about broken links because all you have to do now is upload the picture - the server address will automatically be affixed to the picture.gif. Now onto that background picture-

the code would be: just delete the <body> and insert this in place.

notice that the file says

file:///C:/WINDOWS/Desktop/final_wolfyserver/finishedbanner.jpg

This works for now, when my page isn't online, but when it is, i just delete everything before finishebdbanner.jpg, don't worry if it shows an x, because once you post it online (remember to upload the file AND the picture) it will show up. The correct form is <body background="finishedbanner.jpg">

Last stop, background music! This goes in the head section of the document.

When linking to music try not to use spaces, use hyphens "-" or underscores "_". Online, just change the link from D: to just genie_in_a_bottle.mp3. To make it loop more change the 1 to any number. To make it keep playing change "1" to "infinite". And I wouldn't recommend having mp3s playing in the background since they are so big and not everyone has an mp3player (winamp rules!). Next step - take a break, come back to wolfyserver tomorrow.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 5 - fonts and lots of colours! (& font sizes)

Now we know from tutorial 4 how colors work, you know the pound key # and 6 hex characters, numbers, or letters all produce a color to use in your document. A font is almost the same thing. But first, let's get one thing clear. all colors are a mix except the original red, blue, yellow (did you know if you overlap those 3 you get white?). That means you don't have to have purple, you can just mix it; meaning a computer can decipher what color the hex is trying to show. Fonts are independent and come in many wild designs. So before choosing a font, make sure your visitors have it in their c:/windows/fonts folder. If you downloaded a new font, most likely it's not going to show on a visitor's browser, it make just become old boring default (times new roman). (also notice that this font i'm using right now isn't in your system folder but still you can see it?)

Here are some things about colour, if you're interested in art, or skip down a few lines:

Red, yellow and blue are called primary colors. Orange, green, and purple are the secondary colors, and are a mix of the two primaries on either side. In fact nearly all colors can be mixed from the primaries; some ways of mixing colors are- cross-hatching (shades of colored pencil are laid on top of each other), colors appear darker or lighter, depending on how hard you press down with your pencil or crayon, wax crayons can be blended with a finger, and felt-tip colors can be blending by overlapping groups of tiny dots (color printing). Note that the more colors are mixed together, the duller they become. The colors that are opposite each other on a color wheel are know as complementaries. When placed side by side they bring out the best in each other.

Now let's get to know how to use fonts and then fonts with colors. Start a font by using <font face="a font">. Now name that font in the quotations. Let's use arial for example. Next we add the text right after the >. Then just close it with </font>

<font face="Arial">ddddd</font>

Experiment with different fonts and names. You'd be surprised that the browser recognizes that many names. Now, let's try that with colour.

The only part that needs editing is the <font face="Arial"> part. Simply put a space after "Arial" and type color="#3399FF" for example (light blue), and then close it with a >. So the finished product would be:

<font face="Arial" color="#3399FF">ddddd</font>

to make the font text either smaller or larger, you use the keywords "big" and "small" with triggers <> and </>. so a small font would be

and a big font would be:

use the same amount of close triggers as beginning ones, notice we have 3 on each side. that's about it, move on to the next section.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 6 - indents, spaces, and returns

even spaces need their own little html code. it's very simple, simply put:

-where you want the space to be, for example, in between the <font></font> triggers or anywhere you want a space in the body. Now for indents. A tab is simply 3 &nbsp with or without <p></p>. Here's what the formal looks like:

returns are just as simple; <p> </p> is the code, use it at the beginning of a new line, preferably because of efficiency.

*remember, copy code into notepad first, to discourage mixing of font and color on this page with actual code*

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 7 - hyperlinks

now that we have a website we can go online. one must remember, you must link to the full target file with full name. if i was to link to page2 i would not just right page2 but page2.html. if this was an audio file, the extension would correspond with the correct type of media; mp3, rm, what have you. also, as mentioned before, if you're linking to anything you've uploaded or anything that is yours, be sure you link to the location as well. if page4 was on brinkster.com, i wouldn't put page4.html but http://www.brinkster/myserver/page4.html. however if you are linking to a website, like mtv or wolfyserver (which is much easier), simply put the .com address in, omitting the http:// is also allowed.

to start a hyperlink, simply start off with <a href= , then start quote " and type in the address, then end quote ". so you will have

but we're not done yet. next, after the >, put in the text you want users to see and with the link embedded. for example clickhere!, you see wolfyserver is embedded. after your text, end the code with </a> so our finished link would look like:

<a href="http://www.wolfyserver.org">wolfyserver</a>

to take this even further, we are going to add font and color to the link.

<a href="http://www.wolfyserver.org"><font color="#3399FF" face="Arial">wolfyserver</font></a>

just by looking, we can see all you do is insert the font and color code inbetween the <aref> and </a>. consult tutorial 5 for a recap.

for a cool trick, you can use this code i'm about to show you to open a new window once someone clicks on it, good for preserving the page and using another one.

simply take <a href="http://www.wolfyserver.org">wolfyserver</a>, and after the .org, put a space and target=newwin, and then close it with a >. so:

<a href="http://www.wolfyserver.org" target=newwin>wolfyserver</a>

just one little thing before we finish, to make a horizontal line,

the code is <hr size="1" color="#6699CC"> , where you can both change the size and color code to fit your needs.

fuck another thing before we're done, here's how to get scrolling text, or a marquee.

<marquee direction="right" loop="1" scrollamount="9" scrolldelay="87">ddddd</marquee>

the direction is which way it scrolls, change between left or right, remove the loop="1" if you want it to loop forever (separate items by space for direction, loop, etc.) Scroll amount and delay control speed, fiddle around with that, and after that is the text; then you end it with an end trigger.

congratulations! you are done with wolfyserver basic html tutorial course!

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 8 - placing an icon next to address or in favorites

many people have asked me how do insert an icon into an IE internet address- like you see a E page next to most websites, but some have distinctive graphics. i didn't know either until a friend told me. first, use a .ico (icon file) maker such as microangelo at www.download.com and download the crack in the cracks section. alternatively, go to http://www.favicon.com/ for an online java applet gif maker (kind of complicated to export or import your own graphics though). secondly, put the icon file into your domain's directory. now insert this script in between the <head> and </head> part of your html document.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 9 - java script prompt and open window for voting

there are some java scripts that just prompt internet explorer or netscape to display a message or news. this one here asks whether you would like to vote or not (not the forcing one! that's neither supported by me nor the hpcva lists), and then if you click 'ok', it will direct you to like cyberarmy top lists or elite top lists. again insert this script in between the <head></head> parts of your document. currently, my website does not use this script because it is kind of annoying, and we're like the only site who doesn't use them, and i'd like it to stay that way. (or just use leave site cookie enabled popups. hehe)

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 10 - completely disabling right click with no prompt

yes there are many scripts out there that shows a message every time you right click on the html page. maybe they don't want you stealing hyperlinks or image files, or just being complete assholes. btw, you can do anything either way to 'steal' or 'borrow' their links, pictures, or scripts. file :save page as or click view: source. What's unique about this script, is when you right click nothing happens. it won't annoy your visitors and is a subtle reminder of your private copyrighted information. this script is from my friend visual blind - his new website http://www.x2ice.com INSERT this code in between the <head></head> sections of your html document. this will work for IE 4++ only, not too bad because everyone uses internet explorer. (top 3 browsers at wolfyserver are IE 5.5, 5.0, and 5.01.)

[FrontPage Save Results Component]

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 11 - hyperlink rollovers and dynamic effects

As you may have noticed on wolfyserver.org. Most of our links have roll over effects. they change into our official colors (orange and dark red) when you mouse over or get underlined. Here is a very simple script that can add flavor to your site and make it appear professional. Insert this between the <head></head> parts of your html document. Please do not use our exact colors.

[FrontPage Save Results Component]

<STYLE>A:link { COLOR: #6699FF; TEXT-DECORATION: none } A:visited { COLOR: #6699FF; TEXT-DECORATION: none } A:hover { COLOR: #ff9900; TEXT-DECORATION: underline } </STYLE>

variables in this script are the colors. A:LINK COLOR: #6699FF is what color your hyperlinks will originally appear to be. Text decoration is if it is italic, bold, or underline. A:VISITED is the color of a hyperlink after it is clicked. try light colors for professional websites. A:HOVER is the color of the link when your mouse is placed over it. You should use a different color for hover and link to get a roll over effect. Or, you can choose to leave the color the same but have a text decoration such as underline or bold. numerous combinations. find one you see best fit.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 12 - maximize window script

before, there was a script that made the window go full screen without any buttons and such. in addition, a splash screen was needed to set the parameters, so when users clicked on the button, it worked. but this time, we have one that upon entering a page, maximizes the page, still leaving us with all the buttons and IE console. this is very usefull if you are using frames pages and best viewed at full screen like our site.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 13 - no right click, yes IE prompt

this is the one where a message appears once you right click. make a joke, or say something vulgar. or at least help the world by saying "Don't Smoke"

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 14 - kill frame script, getting stuck in them

If you have website, chances are you've got banners for free domain hosting. Not at brinkster! hehe. Anyways, I still had to register for namezero's free .com registration. They gave me a bottom frame ad script, which i removed with java script. Everyone hates getting ads on their page, especially ones that don't go away. V3's come.to run.to and others do the same thing, so you can make visitors feel like they are going to a professional website other than some porn infested britney site. put this in-between your <head></head> section of the html this is also usefull if you don't want your site to get stuck in someone else's frames.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 15 - stylish and colorful scroll

notice our sexy scroll bar? yep, want to know how to do that? simple, just use this script and hex color code! Only IE 5.5 supports this, but most users according to my stats, 87% use IE 5.5. just change the #colors into like #cccccc or your choice color.

insert in between the <head></head> sections of html document.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 16 - webbot time modified.

this is a feature in frontpage express and 2000. you can modify this timestamp but basically this is the code, for more options consult frontpage express, 97, and 2000 programs.

05/14/01

insert in between the <body></body> sections of html document.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 17 - hide status bar display

Congratulations! Now you're ready to move on to layout design and all the other stuff. Below is a simple way to discourage prying eyes from leeching your files - or, just a script to help your site's aesthetics. Combined with the no-right click script, and a frames page (so no one can just click view source)- this is a great entry-level script for security measures. Here's how it works: When people mouse-over your links, nothing will be displayed at the bottom of the Internet Explorer address bar. Very useful for hpvca sites!

insert in between the <head></head> sections of html document.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 18 - spawn popup window with size and button parameters

This script opens a popup window of your liking: the size and the buttons displayed. This is very useful if you just want information prompts - or disastrous if you use these pop-ups for financial gain. Hopefully not the latter? First insert this script into the body section of your html page.

insert in between the <body></body> sections of html document.

Now insert this script wherever you want the link to appear. The example given is our contact and biography page's popup. Also included into the script is a mouse-over display containing text of your liking. That is, when you put your mouse over the link, a helpful caption will appear.

<a onclick="NewWindow(this.href,'welcome','643','475','yes','center');return false" onfocus="this.blur()" title="insert your mouse-over display here" href="www.wolfyserver.org/aboutme.html">wolfyserver.org 2k3 productions</a>

insert in between the <body></body> sections of html document. this is after the first script.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 19 - preload images before entering

If you use rollover images, you know that when hovered upon- the images switches to another one; however, if your connection is below DSL or Cable, there's a slight delay. Thus, this delay ruins the effect of a color transition. What many do is have a preload image script which loads images before showing the html page- so they are stored in your browser's cache- hence no delay or ugly picture loading window. You can use this for mouse-overs or preload all the images you want. For example, if you want visitors to see your menu bar as a whole, without waiting for pictures and background pictures to load, or if you want your front page banner displayed first- then use this script. We use it on the front page with the logo. In fact, we preload around 20 images even before you enter the wolfyserver.org home page!

Replace the <body> header. modify the body background colors. they are combined with the preload in this script.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -

tutorial 20 - automatic page refresh

Probably the most useful feature for tagboards, fake-counters, or banner exchanges- the automatic page refresh scripts reloads the page without the user pressing F5 or the refresh button. Most website visitors are lazy as it is- so it is your job as a webmaster to force them to refresh a page; obviously, you have a good cause. Now there is a bit of logic behind this script. With this, the page will only refresh once. But what if you have a tagboard in a frame (as us) which needs updating once in a while? The script basically refreshes the page to another html page. If you have this script in that (another) page, and they refresh towards each other- it's an endless chain right? That just about solves your tagboard problem. The numerical value is in seconds. For the wolfyserver.org tagboard- our refresh is every five minutes with a button so you can refresh manually as well.

insert in between the <head></head> sections of html document.

- WARNING THIS TUTORIAL MAY NOT BE REPRODUCED IN ANY WAY WITHOUT CONSENT -