So, you want to make a website?
1. First, think about what you want your site to be about. There are fanfic sites, like Drastic Measures and fanfiction.net; cliques or clubs, like the BtVS Writers' Guild; or, if you want, you could have a general site, whether it be about a show/movie you like, or even just about yourself and your life.
2. Next, if you don't already have one, you probably need to find a web development program. Now, for beginners, if you have at least Windows '95, search for a program called Frontpage or Frontpage Express on your computer. It's not much, but it gets you on your way. Another good one, good for most levels of web developers, is something called WebPage 2.0, available at any computer store for about $40. (Trust me; it's worth it.) Or, if you have MS Word '00, you can just use that, and save the pages in HTML format. It's in a WYSIWYG formula, which is W.hat Y.ou S.ee I.s W.hat Y.ou G.et. Whatever you use, stick with it, until you know more about web designing to be able to use the more advanced programs like Dreamweaver
3. Now, once you've picked the HTML program you're going to use, you need to also need to find a nice little graphics program, because a website with only text and no graphics is something boring to the typical web browsing person. Now, you can go low end, and get something like Pain Shop Pro (retail about $129 USD for Version 9), or you can go slightly more high end, and get something like Adobe Photoshop (retail about $649 USD for CS1 and $599 for CS2 preorder)
4. Now, you want to create some content for your site. Now, depending on the type of site you're doing will depend on the type of content you want. Now, the foremost thing you need to know is ease of navigation. When you're starting out, I wouldn't suggest more than two or three levels of navigation. What I mean by that is that you have the main, first level navigation (using my fanfiction site Drastic Measures for example) you have links to the top that read
Awards, Fanfic Archive, Linkage, Site Stuff, and Home. Now, mine are in what is known as an image map, but, for beginners, just use text links. But, that's just the first level. If you clicked on, say, Fanfic Archive, then you get the second level of links, which read
Crossovers, Fic Helpers, Main Story Index, Stories by Author, Stories by Title, Series, and Home
Notice that I always make it easy to be able to find your way back to the home page, should you ever need to.
Finally, for information on the third level of linking, if you click on Fic Helpers, you get another list that reads
Book Jackets, Character Pix, Character Summaries, Fanfic Fanatics, and Prophecy Times
You'll also note that, not only do I have a link back to the first level, but I also have a link back to Fanfic (the second level). This makes it easier for the person navigating to have a choice to either go back one or two menus/levels, as he pleases.
5. Now, once you've got a few pages together, you need to find a web provider. One that's nice, along with no popups, is web1000.com. It gives sites out for free, with unlimited bandwidth and 50mg space. However, only people in the USA and Canada can view sites on that server, so think about your major client base. Or, you could be smart and choose either trap17 or astahost. Also, if your URL is kinda long, get a shorter, redirectional one at cjb.net, which also redirects your email.
6. Now, if you would rather go with a paid server with no popups and extra features, I recommend either netrillium.net or compuhosting.com for the server and godaddy.com for registering your domain name.
7. Now, if you've used one of the HTML programs I've mentioned in #2, somewhere in the tool bar is something along the lines of 'view HTML'. Now all you have to do is cut 'n paste. If not, I know that angelfire and geocities/yahoo, at least, have both basic editor, where you really don't need to know HTML, or advanced editor, where you use pure HTML, or, like me, CAP (cut and paste).
TA DA! You've got yerself a website! Now, go tell your friends.
Do's and Don'ts of Web Sites
* First, and most importantly, DON'T COPY! It's also known as stealing. People have worked for HOURS on these sites, and, you should take the time to make yours unique.
* DO use good sites, or sites similar to yours, as models. Then, ask yourself what it is about that site that you want to emulate (copy)? Is it the design? The graphics? (If so, ask the webmaster/mistress how they do them. Trust me, it's a humungous compliment!) Figure out what they are, then do something similar. (Not exactly the same, though. Goes back to the 'don't steal' bit.)
* Along the same lines as the not stealing bit is the no direct linking. For example, say that you're joining a fansite on the anti-drug campaign and you want to put one of their buttons on your site. The proper thing to do is to right click on the graphic, and click "save picture as", then upload the saved picture to your website. The reason for that is that direct linking, or "hot linking", to that graphic causes a strain on the bandwidth of the person holding that image.
* DO link to other sites. Along with the previous one, if you like a site, LINK TO IT! That shows people you admire what that site's about, or what they're doing.
* DON'T forget ALT tags and text-equivalent menus. There are some people who turn off graphics to make things go faster and, if you have graphics but no alt tags, then they don't know what graphix were links and which were just pix. Here's how you put in an ALT tag:
CODE
<img src="example.jpg" alt="Example">
* As you get more experience, DO use more graphics and multimedia, but DON'T go overboard. If your site takes too long to load, then people won't be prone to going to your site. One good way to avoid doing that is, if you have something like a pix gallery, use a graphics tool to make a smaller version of the pic, called a thumbnail, and link it to the larger pic. Example:
CODE
<a href="http://www.pix.com/example.jpg">
<img src="http://www.pix.com/smallexample.jpg" alt="Example">
<img src="http://www.pix.com/smallexample.jpg" alt="Example">
* DON'T abuse netiquette. This could cause your web provider to delete your site without telling you, which, with some providers, they can legally do. To learn more about netiquette, go here.
* Don't forget to test your pages on the 'net. Make sure they work the way you want them to, and check and double check all links.
* DON'T forget the basics: your email address, a site map (a list of all the internal links to your site, if the site is rather large, say, at least 10-15 pgs.), give credit where it's due, and be willing to redo things that people advise you about (ie. broken links, pix not showing up, etc.).
* DO ask for feedback, i.e. put up a guestbook, and ask ppl to sign it. (But, don't expect too much.)
* DON'T be afraid to ask for help. Understand that there are always going to be people smarter than you, but, also, that there are people who aren't as smart as you that you can help. If you know someone who can help you with your site, ASK THEM. If they have the time, they'll probably be glad to set aside some time to help you out.
* DO publicize your site, by signing up for banner exchanges, and getting people to put your banners on their sites.
Tips & Tools of the Trade
* Start small. Don't expect to be able to do something of the caliber of some of the bigger sites if you're just starting out. Also, don't have a ton of pages with nothing but 'coming soon' on them. People don't like that. Just put up the links to the pages you have, and add the links as you create the pages. (NOTE: I've been doing this for eight years now, and, believe me, I'm still learning new tricks every day!)
* If you want to make your website look more spectacular, invest in a graphics program like Paint Shop Pro or Photoshop (what I use). That way, you can design your own graphics the way you want them, not how other people may design them for you.
* Try, try, try. If someone suggests something that they've done, and you like it, do something similar for your site. If you don't like how it turns out, fine. Go on to something else.
* Keep the color scheme of your entire site the same, and yet, easy to read. Don't pair fuschia and neon green. One of the best ways to do it is to have a dark background, like dark gray, and a light text/link color, like white or pink. Make the titles big, but not too big. (Having title size of no more than 14 pt type is just fine.) Conversely, make the regular text smaller than the titles, but still be able to read it. (NOTE: One way to check that is to check each page as you work on it in your browser window to see how the browser reads it. If it works, great. If not, back to the drawing board.)
* Read, read, read. As you can, get books on HTML and websites. You'll find lots of neat tips in them to help make your site better. (And, if you're lucky, it'll have a CD in it with shareware and stuff like that!) A couple of good ones I've read are Creating Web Pages For Dummies by Bud Smith & Arthur Bebak and Creating Cool HTML 4 Web Pages by Dave Taylor.
* If you sign up for a lot of webrings, put them on a separate page, not the main page (but let the webring masters/mistresses know.), since the graphics many webrings use tie up download time.
* Before you start your site, lay out what you want on the page/site, and where you want it, etc. Don't just go in and start throwing HTML tags around willy-nilly. Take a little time out to plan out your site, and it will come out MUCH better.
Cool HTML Tricks
These are things I've picked up from different sites. If you like the idea, go ahead and try it. (What you add is in this color.)
* If you want your background to stay in one place, you add this to your <body> tag:
CODE
<body background="img.jpg" bgcolor="#??????" text="#??????" link="#??????" vlink="#??????" bgproperties="fixed">
It's the "bgproperties='fixed' " part that keeps the background in one spot.
* If you want your links to have a lil line above them, do this in the <style> tags:
CODE
<style>
<!--
/* Style Definitions */
a:hover {color:#??????; text-decoration:overline; }
--!>
</style>
<!--
/* Style Definitions */
a:hover {color:#??????; text-decoration:overline; }
--!>
</style>
It's the "a:hover" tag that makes it possible. In the "color" section, you add a color, usually something like white or black, Now, if you want both a top AND bottom line, you just add "underline" to the text decoration area, like this:
CODE
a:hover {color:#??????; text-decoration:overline underline;}
</style>
</style>
* If you want your links to have a background color, you add this to your <style> tag:
CODE
<style>
<!-- /* Style Definitions */
a:hover {color:#??????; bg:#??????; text-decoration:overline; }
--!>
</style>
<!-- /* Style Definitions */
a:hover {color:#??????; bg:#??????; text-decoration:overline; }
--!>
</style>
A good hint is that, whatever your link color is, you put that in the "bg" tag.
Well, hope these have helped you out at least a little. Good luck with your site!
