H.T.M.L. H.E.L.P.
(How To Make Lovely, Harmonious,
Electronic, Lasting Pages)
<![CDATA[<bgsound loop="infinite" src="Rhapsody.mid"></bgsound>]]>
(The song you are listening to is "Rhapsody in Blue".
This is one awesome piece of music! But, if you must,
to turn off the music, right-click on the arrow and click "stop".)
"Where Do I Begin?"
You may be where I was in early 1998 regarding the whole matter of building web sites. That is, you admire and even envy beautiful web sites and think it would be great to have one, but can't imagine how a person would go about building one. If so, you've come to the right place! And even if you know how to build web sites, you may be interested in reading about how The Evergreen Refuge came to be. Maybe something I have found or experienced along the way will help you too! I selected this theme for my "web help" page, since I honestly feel that a personal web page should and can be a reflection of the person who has built it. It takes time to get to that point, but it is fun and is NOT hard. You can do this!!
I have been on the Internet since late 1997, and I spend so much time online that I can't imagine being without it! I started out with AOL and mainly used some of the message boards there and found a few E-mail pals I enjoyed exchanging letters with. It was, and still is, fun to get an instant response instead of waiting days for the snail mail! Then I found GeoCities - which, as you probably know, has remained one of the top hosts of free web sites. Back then, in early '98, GeoCities was not part of Yahoo and, in my opinion, had a much more personal feel to it. The web site addresses were much longer - my first address there was something like http://www.geocities.com/Heartland/Village/5279. But you could go to an actual online "street" and pick out your "house" (web address) and also click on other people's "houses" to visit their sites. I really miss that. But anyway, I surfed through the "streets" for awhile (mainly in Heartland, the home/family area) and, really on a whim, I signed up for a free web site - not knowing the first thing about HTML (web site programming language) or anything else about building a site. But GeoCities promised to give beginners like me the resources and help to get started - and they did! They, and other free web hosts such as Tripod and Angelfire (I will mention others later but those are the three largest) usually provide pre-made templates where ALL you have to do is fill in your text. So that was my first site! I chose from the few graphic backgrounds, buttons and bars they offered and wrote a few paragraphs about myself. They even walked me through adding the guestbook. I didn't know what to call my page, so I called it Teri's Cyber Home - how original (not). I looked at my page and thought, "Well, I have an actual web page, but it's really boring! I want to use the graphics and backgrounds that I want to use, not the couple of choices they provide for me, and I need to know how to find them and set them up. HOW do I go about doing that??"
Let me preface this by saying that although I am aware of web site building software such as Microsoft Front Page and others, I have never used them and don't know anything about them. You don't need them!! From the little I understand about them, they also limit the user to the styles and templates they provide. More importantly, since you apparently don't have to use even simple HTML commands, if you insist on using them, you will never learn how to make your site a reflection of YOU. There are only a very few, very simple HTML commands you need to know in order to make an attractive site, and I will summarize them below. My site was built entirely using Notepad as my "file editor". I feel this is the only way to go! I used to own four web rings (gatherings of like-minded web sites) and often heard from people who didn't know how to copy and paste the web ring code to their web page. I always feel badly when people are unwilling or afraid to learn a few simple commands to enable them to alter their own site. It is NOT hard!!! (I also want to mention the importance of saving ALL your HTML code for each of your pages on a CD or external USB drive, and also save all the graphic images you use on your site to USBs, CDs or an external storage service; I highly recommend Box.net, but there are others). I have heard horror stories about people whose web host suddenly vanished or suddenly "ate" their site, and they had no backup on disk to upload to a new host -- they had to start from scratch. Don't let that happen to you!)
HTML 101
So here I was, wanting badly to improve and expand upon the one simple page I had "built". The first thing I did was to search online for basic HTML instruction. There are many good links online, so I won't go into great detail on those here. I don't even recall the one I learned from - it may not exist any more. But the only two you may need are Webmonkey and Lissa Explains It All, an amazing site maintained by a young lady who was only 11 when she started it and is still a teenager! It is subtitled "HTML Help for Kids", but is not just for kids - a lot of site builders use and benefit from her clear, friendly instruction. If you want to start with something quicker, here is a good reference page that lists many basic HTML commands. To get started, you need to know how to insert links and graphic images. You can learn the rest later. You also need to know that all HTML commands are enclosed between pointed brackets like these: < >. I will list the most basic commands below:
All web pages start out as follows:
<html>
<head>
<title>This is where you put the title of your page, which appears in your top bar of your web browser.
(There is sometimes other stuff in the "head" section, but you can learn that as you get fancier.)
</head> (You ALWAYS end an HTML command with the same word inside the pointed brackets but with a slash - "/" - in front of the command.)
Now you are going to insert the commands for the graphic background, font, and font colors you want on your site. Here is an example of what this looks like (of course, you will substitute the name of the background you selected - more on that below - and the font, font size and text colors you want to use.
<body background="Bluebg.jpg" bgcolor="#0000FF" body text="#FFFFFF" link="#000000" vlink="#FFFF00" alink="#333333" font face="Dream Orphans, Lucida Casual, Trebuchet MS, Times New Roman" size=3>
The numbers represent the hexadecimal names of colors. In the example above, 0000FF is blue, FFFFFF is white, 000000 is black, FFFF00 is yellow, and 333333 is a dark gray. "Bgcolor" is the background color that loads before the graphic background and can be used on its own if you don't feel comfortable yet uploading graphic images. "Link" is the color of unvisited links on your sites, "vlink" is the color of visited links, and "alink" is the color links turn when visitors click on them. Here are a few tools you can use to pick out colors to use on your site - since you want to make sure that the text and link colors you select show up well on your background. There are many web page color charts online - the one I use contains 1,536 colors and is here. But what you also need is a tool to show you what your background and text colors will look like on a page. I had a couple of favorites I used to use linked below. Unfortunately, they seem to have disappeared sometime in '05. You can find usable free gadgets to use for this purpose by typing "web page color selectors" into google.com or another search engine. Here are a couple of OK tools that do the job. If you find others, let me know! (I especially would like to again find a color tool called "Brian Hall's Color Picker").
Dougie's Color Picker - The color choices shown on the page are limited to 216 colors. However, by selecting specific colors using the wheel linked below and plugging those color codes into this page, then clicking "display colors", you can see exactly how your selected colors will look together on your page.
Color Wheel - Slide your mouse around on this wheel till you find the exact color you want. Have the color picker above open in another browser window, go over there and type in the 6-digit code of the color. Repeat for your background, text and link codes, then click "display colors" as described above to see how it looks!
Backgrounds, Graphics, Fonts
The first two years my site was in existence, I only used "tiled" (unbordered) backgrounds. I was afraid to try backgrounds with even one border along the side, though I liked them, since you have to use a table instruction (so your text won't run into the border) which seemed hard to me. (It's not, besides which I discovered the wonderful world of "copy and paste" - more on that soon.) But I do recommend you start with the unbordered backgrounds that cover the whole screen. There are some very pretty ones available and many sites to find them. My favorite site for tiled backgrounds, Still Waters Graphics, seems to have left the Net (if anyone knows their whereabouts, let me know) but another backgrounds site I recommend is Lacefairy. She also includes divider bars and buttons (to use for E-mail links, next page links, etc.) that will harmonize with the backgrounds. When you find a background, divider, etc. you would like to use on your page, right-click on it, then select "save background as" (or "save picture as"). Save it to your hard drive or a floppy disk. Then upload it to your web host's file manager (there should be an "upload files" button, which then gives you 5 or more boxes to browse for and insert the filename from your hard drive or floppy of the graphic images you are uploading).
I did also stumble upon the largest site for tiled backgrounds I've ever seen: Grsites.com. You definitely need to check this one out. You can easily make your own buttons and bars to contrast or harmonize with any of the 5,800+ backgrounds they offer, then store in a folder you create on their site. There is so much there to play around with that you could easily spend hours there, and all the tools are there for you to be able to create your very own original graphics set for your site. Unlike the designers linked below, who rightfully request that the graphics they create not be taken and used to create other sets, you can take and use anything that catches your eye on Grsites.com; all they ask is that you provide a link to their terrific site on your web page.
As for fonts, you will note the above example shows five fonts. My chosen font (which I created my site in and prefer it be viewed in) is Dream Orphans, which is not installed on all computers. So I also list additional fonts. In the above example, the page will appear in Dream Orphans if that is on your computer, or will appear in the next font listed that is on your computer. So list your chosen font first, and if it is not a font normally installed on computers, include a link (such as the one at the bottom of all my pages) for people to download that font so they can view your site as you intended. I love fonts, and it is so easy to add new ones - just save it to the fonts folder on your computer (on Windows, it is usually C:/Windows/Fonts - sorry, I know nothing about Mac). But also list the more common font as above, so people can view your site in that font if they don't want to download your preferred font. Concerning font size, I believe they range from a -7 to a +7. I used size "3" in the above example. However, I personally use headline sizes throughout my site, even for small print, since it appears bolder than regular type. The size I mostly use is <h3>; the small print at the bottom of my pages is <h4>, and my headlines are <h1> or <h2>.
A command to make a graphic image (other than a background) appear on your page would look like this:
<IMG SRC="Imagename.jpg"> - Obviously, you would substitute the name of your graphic. By the way, most graphic image files generally end with the file extensions of either .jpg, .gif, or .bmp. Now, let's say you want people to click on a graphic image you uploaded to get to another page (on your site or elsewhere). Here is what that would look like:
<A HREF="http://2mhost.com"><IMG SRC="Imagename.jpg" border=0></a><br>
Click above to visit my web host!
The "br" is the code for a carriage return, and the "border=0" should be included when using a graphic for a link; otherwise there will be a border around your graphic the same color as your links text. When you insert this code, the "A HREF" (link command) and "IMG SRC" (image command) won't show up, only your picture will. When a visitor to your page clicks that picture, they will be directed to the site you specified in the link command. You insert a text link in the same way:
<A HREF="http://2mhost.com">Click here to visit my web host!</a>
If you type this into your Notepad just as it appears above, the first line will be an underlined link reading "Click here to visit my web host!" which, when clicked, will bring you to the site of 2Mhost, my web host. The "A HREF" command and brackets won't appear on your page; just the link itself will. There is a 4-character symbol you can use to show a < bracket and a > bracket instead of typing the actual brackets themselves in the text version above, that causes it to be just a text representation and not a live link. If this is clear as mud, don't feel badly, since I just learned this trick in May '06! Contact me if you get stuck and I'll try to explain it better.
The last HTML instruction I am going to give you here is how to end your page - there is much more you will want to learn as you go, but what I have shown you here is all you really need to know to get started! At the end of your page, again with the pointed brackets, you will have:
</font>
</body>
</html>
One last caution about HTML commands is that if one doesn't work the way you intended, or you get a row of text instead of a link, it is probably something as simple as accidentally omitting one of the pointed brackets or a quotation mark. I have done that many times - everyone has. All links MUST be enclosed in quotation marks, and all commands must be enclosed in pointed brackets. If one is accidentally left out, the command won't work or will appear incorrectly on your page.
Themes and Getting Beyond The Basics
Now you have the tools you need to get you started building your own first page. But you may still wonder - what do I write about? How do I make my site a reflection of ME? I told you how my site started out. I didn't have a name for it. I didn't have a clue what to write about other than a couple basic paragraphs about myself. You WILL think of ideas for pages to add, I promise you. You WILL think of creative ways to set your site apart and make it special. It may not happen right away, but as ideas occur to you, write them down. Since I had been known as Teri most of my life (though I don't use that name much anymore except by a few people who've known me for many years), I decided to use the acronym "T.E.R.I." to name my site - Teri's something something Inc. - T.E.R.I. I came up with Evergreen, since Washington is the Evergreen State. OK - Teri's Evergreen something beginning with R - it didn't take long to come up with "refuge". (And "Inc." for the I, but soon dropped the "Inc.") In spring '03, when I started going by my legal name, I changed the name to "The Evergreen Refuge". The first pages I thought of to add were my Christian testimony/marriage page, my furballs page and my interests page. Those and my index page were all I had for awhile. The other pages, I added gradually over the last few years as the ideas for them came to me. It will happen that way for you too! You may want to play around with using acronyms to name your pages as I have done, or you may have other ideas!
Eventually, you will probably want to try using the many beautiful bordered and layered background sets that are available. I am going to tell you the secret of how I have been able to evolve into using mostly multi-layered graphics sets, which I feel give the rich and elegant yet friendly look that I strive for. I referred above to "the wonderful world of copy and paste". That is mainly what I do! I am NOT a huge HTML expert. I definitely do not have all the coding memorized to put together these wonderful graphics. And I absolutely do not have the artistic ability to design graphics myself. (I greatly admire people who do, and I am going to recommend below my favorite providers of free web graphics.) When you find a graphics set you want to use, here is all you do: on Internet Explorer, on the "View" menu, select "Source" (I imagine Firefox and other browsers have a similar menu command). The HTML code used on that page will appear on your Notepad! Then it is mainly a matter of keeping the table commands at the beginning of the site (you will "tweak" those to substitute the title of your page and your text colors and font), removing the code for the text and pictures in the middle (you will insert your own text and commands here), and keep the table commands at the end of the page. You will learn fairly quickly what the commands are that you need to keep in order to maintain the format, and which ones you remove to insert your own text. That's basically all there is to it! (And most of the graphics sites I recommend below do also have tutorial pages on their sites so that you can understand the basics of how to set up the tables to use their sets.) Once you have the HTML the way you want it, save to your hard drive. Then highlight everything, copy it by hitting "ctrl" and "C" at the same time, open your new page on your host's file manager; with your cursor at the top of the new page, hit "ctrl" and "V" at the same time to paste everything onto the page, and click "save". Then look at your new page and tweak where necessary!
Following are what I consider to be the cream of the crop of designers/providers of layered and bordered background sets; you will find their work used throughout my refuge. Click on their names to check out their beautiful work.
Magnolia D Web Designs
Moon and Back Graphics
Luvdalot Graphics & Design
Beverley Lu (formerly Nightfire) Graphics
(DelilahDesigns.com would have been on my short list - but I'm sad to report that this wonderful site has vanished from the Internet. The graphics on my Inspiration pages were created by her, and I would have loved to have the opportunity to utilize more of her elegant designs. I'm also sorry to report that my other favorite design site, Lil Kitty Graphics, has likewise vanished from the Net sometime in '06.)
And remember - ALWAYS credit your graphics provider on the same page where you use their graphics. This can be done either with a text link ("Graphics by Name of Designer", but make it a link with the A HREF command as instructed above) or a button that was included with the set (using the instruction above for using a graphic image for a clickable link). Here are several other graphics providers I use or have used that also do beautiful work:
Until Then Graphics
Sindy's Creations
Dreamwork Designs
Lady Care Designs
Graphics by Inge
Graphic Gifts
Creations by Dawn
Graphics by Penny Parker
Backgrounds by Marie
Guestbooks, Web Hosts and Domains
You will probably want to add a guestbook to your site and ask your visitors to sign it. It's fun to see who has visited, where they are from and how they found your site. If they left the URL of their site, you will want to return the visit. Some web hosts such as GeoCities provide their own guestbook and walk you through how to set it up. But I prefer to choose my own guestbook provider; there are several. The biggest are HTML Gear (formerly GuestWorld) and Bravenet. But I like to customize my guestbook with extra questions (as you will know if you've signed mine) and I don't think theirs are customizable. If you want a simple guestbook with just a slot for E-mail address, URL, and comments, feel free to check them out. There are many other free guestbook providers, such as Christians Unite, but I feel the best guestbook hosts are GuestPage and Phaistos.
At the beginning of this page, I referred to the three best-known free web hosts. There are many others. You can Google “best free web hosts” and several lists will come up of hosts you can research. Some that seem trustworthy include 000webhost.com, yolasite.com and byethost.com. In fact, I am adding mirror copies of my site to the first two of these hosts just in case I was not able for some reason to renew my paid web host and/or domain. (Those URLs will soon be added to the opening page of evergreenrefuge.org.) But I really don’t recommend using a free host as your one and only host. I expect their servers may go down more often than a paid host. I worked hard on my site and I want people to be able to get in at all times!
There are three web hosts I have used and that I very highly recommend. If you want a host that specializes in Christian-oriented sites, my former host, Hosting Truth, costs a reasonable $5.99 per month for 100 MB space, and their customer service is unsurpassed. I seldom had a problem but when I did, the owner, Scott, E-mailed me back, usually in less than a half-hour, with a clear solution that worked. How cool is that! I did recently make the difficult decision in August 2017 to return to my previous host, 2mhost, mainly for budget reasons. They charge a mere $2.75 per month for 5 GB space, use the same user-friendly file manager as Hosting Truth (CPanel), promise to never raise their price, accept only family-friendly sites, and also have responsive customer service. Two years later, I decided to switch once more, this time to MochaHost, which is top-rated, with 24/7 customer service, AND even lower priced, at $1.95 per month for a 3-year term (and at my age, I like not having to think about renewal for 3 years!). You cannot go wrong with any of these hosts!
As I mentioned, I own the domain name evergreenrefuge.org. To use most web hosts, such as Hosting Truth or 2mhost, you need a domain name to transfer to them. Think of what name you would like to call your site, then go to one of the domain registrars (NameSilo.com is the one I use), enter the name and see if it is available. If it is not available with a .com, .net or .org ending, it may be available with one of the new URL endings which include .us, .biz and .info. Go ahead and register the name if it is available and you're sure it's what you want - then you just need to change the name servers to those of your chosen web host. Easy instructions are provided for doing this at NameSilo or whatever other registrar you use. But note that some registrars charge up to $35 a year though they provide basically the same service. That's why I use and recommend NameSilo; they charge less than $11 per year to renew my domain.
Some Final Words of Encouragement
If you have read this far because you want a web site and didn't have a clue where to start or what to do, I hope I have been of some help! I have never written an instructional page before, so I hope I was clear in everything I tried to explain here, and that my experiences and the links I provided will be of help to you. If there is anything I should add or clarify, or if you have been inspired by this info from a fellow former novice and have built your first page as a result, please let me know - I would love to see it! To me, picking out just the right graphics and theme for a web page (and now that I know how to install music MIDIs, finding the tune to go with it) has become a creative outlet, much like my crocheting. I hope, now that you see how doable it is to build a web site, you will get as much satisfaction from building yours as I have with mine. Happy building!!
The above tracks link to the "Web Train" section of a terrific web ring alternative called "The Rail", which seven sections of The Evergreen Refuge have joined effective Dec. '08. Click the left or right arrows to visit like=minded sites belonging to the "Web Train". If you have your own web site, click the tracks to learn more about "The Rail". It's a great way to generate traffic for your site and get acquainted with similar sites!
  
"Dream Orphans" - official font of The Evergreen Refuge - download here
Music MIDI from Davecat's MIDIs
|