JUNKIE'S WEBMASTER PAGE FOR DUMMYS

CONSIDERATIONS | Q&As | SAMPLE CODE | GLOSSARY | JUNKIE'S FAVE LINKS
ASK THE JUNKIE | WHAT I USE

Over the past year I have received a lot of positive feedback about the Heartland. The common message is "I wish I understood HTML so I could have a great site like yours!" The thing people don't realize is, 2 years ago I was totally HTML illiterate too!

I was very fortunate to have a fantastically patient mentor who got me started in the right direction. Trabbie O'Malley (of U2 Universal Webring and U2SAT36 website fame) was kind enough to teach me all the basics. Since then I've had formal HTML schooling, where I learned some advanced techniques including complex linking and framesets.

I've decided to dedicate this page to pass along some of the tricks of the trade that you might not have known to ask about otherwise. After all, if you don't understand HTML, how can you know what questions to ask about it? Maybe this site will help answer some of those questions for you. (If you're looking for Javascripting, CGI, or DHTML tips, this is not the place for you - there are plenty of help sites to be found out on the www. though.) I'll be adding more to this page as we go along. Use the feedback form at the bootom to get your questions answered or to offer contributions for this page.

FIRST THINGS FIRST: SOME CONSIDERATIONS

WEB DESIGN/LAYOUT: Oh to be an electronic artist, it pleases the soul! If you really want to be an effective webmaster, you better have some sense of design and layout. Probably my biggest gripe about most do-it-yourselfers is the horrible (and sometimes frightening) page designs. If you have more than 2 or 3 font styles on your page, YOU'VE COMMITTED A CRIME! Sometimes less is more. No, let me repeat, SOMETIMES LESS IS MORE. Please make that rule #1 - and I personally have a hard time adhering to that rule myself! If you're going to use a wallpaper image as background under text, please dont use kaleidescope looking imagery with lots of colors. It's impossible to read font over some of those backgrounds or to find a font color that doesnt blend into the images, and I have to ask WHAT WERE YOU THINKING?? Solid colors, textured designs, and my personal favorite, watermarked images (I use many of these at Heartland - see the Home page or the Trade page to get an idea) - these are the best things for backgrounds. When in doubt, simple solid color backgrounds with contrasting font colors work best (this page for example, white background, black font - you might choose black background with white font for high contrast). On the subject of fonts, sure there are thousands of styles out there - this doesnt mean they all look good on a web page. Some insanely ugly fonts that are completely unreadable appear online. They should be outlawed! If your mother cant read the font you used, then CHANGE IT! bY ThE WaY, ThIs iS sTyLe Is VeRy AnNoYiNg To ThE ReAdEr AnD tHeY pRoBaBlY wOnT cOmE BaCk!!!!!!!!

HTML EDITORS: Writing HTML can be done in a plain text editor like Notepad or Wordpad (if you have NO life at all and want to write ALL the code by hand). Since I happen to have other things to do besides write code, I use an HTML editor. An editor (I am using MS Front Page 97) is the easiest and fastest way of getting your page done in a graphical user interface (GUI) where you can see the end result while you are building the page. Angelfire, Geocities, MSN and AOL (to name a few) all offer this type of GUI construction zone. This might be what you are using now in fact, but you haven't mastered the art of 'tweaking' to make them do what you want. Even if you are using the guided tutorials, it still helps to know some basic codes to overcome the common problems.

BROWSER TYPES: I have been tracking browser useage for the past year through my site. More than 60% of everyone who views the Heartland is doing so in an Internet Explorer web browser (you know, the little blue "e" icon on your desktop?). The second most popular browser of choice is AOL (which baffles me). There are other browsers out there (Netscape, Web TV, Apple, Solaris, etc etc), and all browsers are not created equal. Your page will look different in different browsers because they read the code differently and the page sizes vary because of tool bar layouts. You may want to keep that in mind.

COLOR SETTINGS, MONITOR SIZES AND SCREEN RESOLUTIONS: If you're wanting to get down to the serious nitty gritty of design layouts and color schemes, know that most people are still using 800x600 screen resolution with 64 bit true colors. Have you ever visted a site where you had to scroll across the bottom of the screen (how annoying!) to view the whole page? It's probably because the webmaster used their super big screen settings when building the page and didn't fix the code to be read on smaller monitors. Heartland is built on 800x600 resolution.

CONNECTIVITY: Everyone loves the heavy graphics and embedded sound files... and then there is the almighty MP3 or MPEG file downloads (if you can still find free sites that let you store them there!). All this stuff is great, but if your typical visitor is (like me) on a 56k dial up modem connection, it will take FOREVER for your pages to load and for files to tranfer on download. My connections are pretty good for 56krap, with download speeds of around 14 minutes for a 6MB file, for example. If you're using DSL or high speed cable, you're able to open a page as quick as a click on the link and your 6MB download will take about 30 seconds. Big differnce, huh? So it is recommended that you keep your graphics to minimal screen size (if its bigger than 800x600 then its too big) and use .jpg file extentions instead of .bmp (see the Glossary for more info).

FTP UPLOADING: If you plan to create a web page with lots of pictures and graphics, then an FTP uploader is a necessity. I don't know how I would survive without mine (I use Bullit Proof - a relatively inexpensive software application you can download online). FTP (file transfer protocol) sounds pretty scary to the "unwebucated" user. It's really not. If you can copy/rename/move/delete files using Windows Explorer, then you can handle an ftp uploader. Most freebie web hosts only allow you 1 - through 10 files to be uploaded at a time. If you are using 56krap dial up modem, you already know this is as time consuming as designing the actual site. Not acceptable. FTP allows an unlimitied number of files to be transferred at a much higher rate of speed (because of highly technical stuff that you probably dont care about anyway, so I won't bore you with the details). If you're looking for a free ftp client, you might try ReGet FREE v 1.8. I've never used it... let me know what you think!

back to top

Q&A's

Q. - WHY DONT MY THUMBNAILS WORK?

A. - Could be a lot of things. Did you upload the picture to the web host? Check your list of files in your web host's directory and see if it is there. Did you type in the file name EXACTLY as it appears in your directory? {File names are case sensitve & space sensitive. It is recommended that you do not use file names that contain spaces. Use an _ underscore or - hypen instead.} Did you type in the correct file extention (maybe you typed in .jpg instead of .gif)?

Q. - WHY DONT MY SAME-PAGE LINKS WORK?

A. - (This is supposed to be a link that jumps from one place on a page to another place on the same page, like the ones on the top of the page and the "back to top" links.) Did you use a # symbol in the link code? Did you place a bookmark with the name code at the jump to point? This code is also case sensitive.

Q. - HOW DO YOU GET TEXT TO WRAP WITHOUT USING BREAKS { <BR> } ?

A. - Use a table and set it's width (I find setting by pixels rather than percentage to be the method of choice most of the time). So your next question is 'how do you do that?' to which I will reply, see the sample code below.

back to top

 
SAMPLE HTML CODE

I'm not going to go overboard with tons of examples here, mostly because there are thousands of sites out there to assist you with different scripts. So I'll just show you a couple basic things and try to explain them in simple terms. You will see the explanations of the code in green font - the text in green font should not appear in the actual code! Things in bold are like accessory features that add style to the HTML. These things are usually manually adjustable by you, the editor.

CODE TO WRITE A TABLE: The graphical representation is shown on the left, the code that created it & the explanation of that code is on the right. Rule of thumb with table tags: any tag that opens must close. <table></table> This is an example of the opening <> and the closing </> part of the table code. This repeats with tr and td as well.

This is a table with 2 rows (horizontal) and 2 columns (vertical).
   
   
<table border="4" cellspacing="4"> [border="your number size" - this sets how wide the border of your table will be. if you want the border to be invisible, change the number to 0. cellspacing="your number size" determines the distance between cells. see glossary if you dont know what a cell is. you could also use bordercolor="name your color" to set the color of your border, but you will need a color chart to get HEX color codes]
<tr>
["tr" stands for table row... in other words, this is the first row of your table. nothing gets filled in here... the good stuff goes on in the td part]
<td>
[your stuff goes here - images or text. this is the first cell in the 1st row of the table.]</td>
<td>
[this is the 2nd cell in the 1st row]</td>
</tr>
[since i see this tag, i know this row has ended]
<tr>
[this tag starts a new row, this is the 2nd row in this table]
<td>
[this is the first cell in the 2nd row - put your stuff here]</td>
<td>
[this is the 2nd cell in the 2nd row - put your stuff here]</td>
</tr>
[since i see this tag, i know this row has ended]
</table>
[since i see this tag, i know this table has ended]

back to top

GLOSSARY
A better suggestion is to use webopedia.com... but here goes.

CELL - as in spreadsheets or Access databases, its a little box that contains text or pictures in a table.

HOST (webhost) - The people who store all your web pages & files. Angelfire, for example, is a web host.

UPLOADING - what you must do to be able to see your pages and your images in an internet web browser. It means to copy files/pictures from your PC to the web server of your host.

back to top

JUNKIE'S FAVORITE WEBMASTER LINKS:
I used all of these over the last year or two, some I still use today. Check them out - you'll be glad you did!

BRAVENET
Bravenet has the BEST online utilities and add-on applications (guestbooks, forums, polls, TONS of extra goodies) that I have found. Extremely user-friendly tools for the newbie and the lazy alike. Best of all, they are incredibly reliable. Their servers were recently upgraded and are super-secure.

ABSOLUTE BACKGROUND TEXTURES ARCHIVE
These folks have really done their homework. Find any color scheme you need for background, borders, lots of design accessories here. If you dont have photo editing software, this is where you should be.

FLAMING TEXT.COM
Create your own buttons and animated fonts. Cool toys here.

GIFWORKS.COM
I just stumbled on this one today - look for some new graphics at the Heartland from this fantastic site! Make your own GIFs, or choose some of theirs.

IRFANVIEW
Funny name, great thumbnail generation application. And it's FREE. This one is not exactly the easiest to use at first... practice makes perfect!

PROGRAM FILES.COM
Just go there, you'll be glad you did. Lots of software and utility downloads, many are free or offer free trials.

back to top

ASK THE JUNKIE
So now my friends, here is your chance to talk back. Got a question? Need a code? Comments? Corrections or disagreements? Sound off! Fill out the form below. If I don't know the answer I'll try to find it. Check back to this page to see if I posted your message. =)

NAME:
EMAIL ADRS:
WEBSITE THAT NEEDS HELP:
COMMENTS / QUESTION:

back to top

AS IF YOU CARED...
This is a list of the software programs, utilities & hardware I use to create the Heartland.

back to top