How To Make Your Own Shanice Web Site
- Equipment & Materials
A. Computer System - This is obviously the most important tool that you will need in creating your web page. Although you can probably get by using a 90Mhz Pentium PC with only 16MB of RAM, I'd recommend using at least a 300Mhz Pentium II PC or better with 64MB or more of RAM. For Mac users, a 350Mhz iMac with 64MB of RAM should be sufficient enough to do the job. However, if you're able to afford a very fast system and want one really badly, by all means get the fastest one that you can afford with more memory.
B. Software - If you are going to do any kind of web design work, you will most likely need to get your hands on a graphics program like Photoshop, Paint Shop Pro, GIMP(for Unix only), etc. So far, I've only used Photoshop & Paint Shop Pro and although both are pretty good programs, if you're on a budget I'd recommend Paint Shop Pro. While Photoshop may have a lot more useful bells and whistles, you can actually make some pretty decent graphics & icons with Paint Shop Pro and at a much lower price. There are also HTML editors that you can use to help you build your web pages like Netscape Composer, Front Page Express, Dreamweaver & much more.
C. Books - Although it's certainly much easier to let WYSIWYG(what-you-see-is-what-you-get) HTML editors do most of the work for you when building a web page, if you really want a better understanding of HTML, you will need at least one good HTML book(hell, I got 3!) that you can learn from.
D. Shanice Material - This can be photos, multimedia files, biographical information, etc. Remember, if you "borrow" photos from other Shanice web sites, it's always a good idea to ask the person you're borrowing from first. Why? Well, to put it quite simply it's just the polite thing to do. You also have to keep in mind all the time and effort that goes into making a web site and speaking from personal experience, a big chunk of it goes into scanning photos and tweaking them with programs like Photoshop & Paint Shop Pro. Don't be shy because a lot of the other people I know who run Shanice web sites are pretty cool and will be more than happy to let you use some of their pictures for your site but you have to be nice yourself and always ask first!
- Jeff's HTML Tutorial Crash Course
A. The HTML File - All web pages are basically text files and are saved as either .htm or .html but .html seems more common in my personal experience. The .html extension tells the web browser what kind of file it is and how to interpret it.
Here is an example of a filename for an html page: index.html
Now index.html is automatically the default page for the first page on whatever server that your page is on so let's say for the sake of argument that your page is located at the URL address of www.jefftoyiscrazy.com and your user id is me. People can reach your page by either typing
http://www.jefftoyiscrazy.com/~me
or
http://www.jefftoyiscrazy.com/~me/index.html
Typing up either one will bring you to the index.html page so there is actually no need to type in the second one but what if you decided to put your Shanice page on a page other than on index.html? No problem. All you have to do is decide on a filename for your Shanice page and use it. So, let's say you wanted to use the filename myshanice.html for your Shanice page. Here is an example of an address path that would lead to your Shanice page:
http://www.jefftoyiscrazy.com/~me/myshanice.html
B. Creating Your First Shanice Page - Okay, now it's time to get to work. First, I will show an example of typical HTML code that you may find in a .html file and then I will show you an example of what the actual page looks like in a web browser.
HTML Code Example 1:
<html>
<head>
<title>My First Shanice Page</title>
</head>
<body bgcolor="white" text="black" link="red">
<center><h1>My First Shanice Page</h1></center>
<br>
<center><img src="SHANICE5.JPG"></center>
<br>
<center><a href="nothing.html">Biography</a> | <a href="nothing.html">Discography</a> | <a href="nothing.html">News</a>
</body></html>
Click Here To See My First Shanice Page Example
C. Explanation of HTML Tags -
<html></html> This tag indicates that it is an HTML document. Whenever you create a new HTML document, you always put a <html> tag at the beginning and a </html> at the very end of the document just as was shown in the example above.
<head></head> This tag contains meta information like the title of the document, description information and keywords so webcrawlers from search engines will know what kind of information to put into their database about your web site. The <head> is generally placed after the <html> tag and is ended with a </head> tag.
<title></title> Within this tag, you would obviously put the title of your HTML document which will be displayed in the title bar.
<body></body> The body tag contains the content of your HTML document such as text, images, multimedia files, etc. You can also set & alter certain attributes like the color of your text, background colors and or patterns, and links. To do be able to enter these attributes, you would have to the enter the following:
<body bgcolor="white" text="black" link="red">
The bgcolor attribute sets the color of your background which you would either enter the color that you want in text or you could also enter the hexadecimal number code for the color. Although setting colors in text should work, the best way to make sure you get the exact color that you want is to enter the hexadecimal number for the color code. If you're not sure what the exact number you need to enter for the color code, you're not alone. I don't even know them myself so if you do a search on the web for "hexadecimal color codes" you should be able to find a site that has a table listing of all or most of the number codes.
Here's an example of how you would enter the hexadecimal number color code for tan:
<body bgcolor="#D2B48C">
You can also use images for your background and to do that you would enter the tag this way:
<body background="myimage.gif">
<center></center> This will align everything you put within the tag to the center. Don't forget to put a </center> at the end of what you're centering otherwise everything you have on your page will be centered.
<h1></h1> This tag is the header tag and is used to make your text look larger and bolder. The number size of the text ranges from 1-6 of within the header tag with <h1> being the largest and <h6> as the smallest size. Again, don't forget to end the tag otherwise all of your text will be the same size.
<br> This is the break tag and what it basically does is start a new line. In other words, if you were entering text on a word processor, you would hit the enter or return key on your keyboard to maybe skip a few lines. In HTML, you would have to use the break tag in order for the web browser to be able interpret that you're skipping a line or two. Unlike the other tags I mentioned earlier, you won't need to end the break tag with a </br> because it's not necessary to do so. You can try it out if you like but it won't really do anything so don't worry about it.
<a href="nothing.html"></a> This is used to put links to other web pages. The href="nothing.html" part is what will take you to a subpage within your web site bearing the filename "nothing.html" or whichever filename that you decide to give it. If it were a link to another site that is not on your server then you would enter it this way:
<a href="http://www.yahoo.com">
<img src="SHANICE5.JPG"> This tag is used to display images on your web pages.
A. Coding HTML By Hand or With HTML Editors - Whether you decide to use an HTML editor to make your Shanice page or code it all by hand, it is a personal preference and only you can decide which is best for yourself. But in my personal opinion, if you really want to learn and understand HTML better, I'd recommend typing in all of the code by hand. I know it sounds tedious, time-consuming and dreadful but it's not really all that bad. Sure, it's easier to use something like Netscape Composer, Front Page Express, or Dreamweaver to build your pages, but it's not as challenging and I'll tell you why. With a WYSIWYG(what-you-see-is-what-you-get) editor you can cut, paste, and format text & images with the greatest of ease like it was a word processor. However, typing up the HTML code manually by hand forces you to learn how each tag works because if you don't understand the tags and you don't have an HTML editor, then you won't be able to build your page.
B. Be Very Careful About Using Color Photos For Your Background - The biggest problem that arises whenever you decide to use a color photo for your background is that it will most likely clash with your text. In other words, if your text color is set at black, the text that goes over the dark areas of the background will be difficult to read. If your text color is set at white or some other bright color, then it will clash with the bright areas of the background...either way you just can't win. I would recommend that you avoid using color photos altogether for the background of your pages but you're all more than welcome to try and then you'll begin to see what I mean.
C. Take An Internet/HTML Class - Having an actual live person around who can explain terms and concepts to you in succinct detail is always a plus so you may want to consider enrolling in a class that covers HTML and the internet. Rates for taking these classes will vary from place to place but if you are really on a tight budget, you may want to try checking the classes and tuition fees at your local community college.
D. Questions & Comments About This Tutorial - Keep in mind that this little tutorial that I put together is not complete by any means and I apologize if any of if you find it a bit confusing. Explaining things step-by-step is not exactly one of my strong points but hopefully what I put together here will be adequate & comprehensible enough to help get you started. If you have any questions about how to do something, all of you are more than welcome to e-mail me at unofficialshanice@excite.com anytime and just ask away. It may take me a day or two to get back to you depending on how busy I am, but I will try to help you all out if I can. There are also many web sites that explain HTML a hell of a lot better than I'm able to so you can always do a search on Yahoo! for "HTML" and get more than enough entries that you can use for reference. As I stated earlier, there are also many good HTML books that you can learn from so if you have the time, patience & enthusiasm, go for it! But above all else, have fun!
Good Luck,
Jeffery Toy
Back To The Main Extra Goodies Page