All products are trademarks of their respective owners. Site, content, style, tutorials, and art © MMII-2K3 thatbiggbadwolfy. All rights reserved. Any form of file leeching is prohibited. Plagiarism of layout, art, or poetry & prose are frowned upon, and such intolerable acts will face the appropriate consequences. Please read the disclaimer for the wolfyserver.org site and its subsidiaries. Made with FP·XP and DM·MX.
|
website tutorials ~ last updated 07.23.2003 - www.wolfyserver.org Ctrl+C to Copy & Paste |
|
|
|
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. A person 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 forced 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 disabled for all pages; simply hit Control + C to copy and Control + V to paste. Macs: The Apple Key + the letters.)
|
|
- 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.
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 <body bgcolor="#6699FF">
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>
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: 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 <small><small><small><small><small>ddd</small></small></small></small></small> and a big font would be: <big><big><big>ddd</big></big></big> 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   with or without <p></p>. Here's what the formal looks like: <p> </p> 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 <a href="http://www.wolfyserver.org"> 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:
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.
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.)
|
|
- 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.
|
|
- 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.
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. 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 - |
|
|
|
|
| |
|
|