Creating Your Own Website
Introduction | Basic Website Vocabulary | Three Parts to Any Website | Building Your Site | Getting Help Introduction What I have include here is pretty basic stuff, and I have intentionally glossed over some of the finer points because either you will not need them, or you'll pick them up later on. Feel free to skip to the parts you want to know about right now, but know the rest will be here to check on later. My intent here is to bring folks up to speed who are new to “looking under the hood” of web page creation. 
Basic
Vocabulary The “Internet” is a worldwide system of interconnected computers designed to easily transmit data among them in an uninterruptable manner. Each computer is connected to the others through a variety of alternate routes. The “Web” is that portion of the Internet that uses web sites. Other parts of the Internet include email, chat rooms (IRC), and dozens of other specialized services. A “Server” is a computer connected permanently to the Internet which hosts web pages and “serves” requests arriving from “clients” to see those web pages. A “Client” is you and me when we're surfing the web. When we click on a link, we, as clients, are making a request to a Server to view a web page. The Server then fetches that page and presents it to you to view (or,more accurately, to your browser). An “ISP” is an Internet Service Provider, the company you pay your bill to in order to get access to the web. There are hundreds of them, big national ones like Comcast, Verizon and AOL, to small regional ones like Great Works Internet (GWI), MidMaine Communications, and Kynd. A “Browser” is the software you use to view web pages on the Internet. The most common one is Microsoft's Internet Explorer (MSIE, or just IE) because it comes bundled with the Microsoft Windows operating system. However, there are many other free browsers out there, each with their own set of neat features, and all with fewer security holes than IE. Some of these include Firefox, Opera, Safari and Konqueror. Some, like Firefox, are both free and “open-source”, meaning that a worldwide team of programming geeks are constantly upgrading and improving it just because they love programming and love working in a non-cash-based programing community. They are the Davids going up against Microsoft's Goliath, and probably represent the future of computing. “IP” mean Internet Protocol, a fancy term for the agreed upon set of standards used by all those computers connected to the Internet (the servers) to pass data among themselves. “HTML” is short for Hyper Text Markup Language, hypertext being any text that has links in it. HTML is the set of instructions embedded in a web page that is understood by your browser and tells the browser exactly how to display the page you want to view. More on HTML later. A “Web Page” is a page written in html that is viewed with a web browser. A “Web Site” is one or more related web pages connected via links. A “Link”, or “hyperlink” is a word, phrase or graphic (picture, drawing, map etc.) that, when clicked on, send the user to another web page. Almost anything you place on a web page can be made into a link to anywhere on the Internet. You probably arrived at this page by clicking on a link. Links are the heart of the Web. “URL” stands for Universal Resource Locater, and is the generic term for how any point on the Internet can address and access any other point. URL is often synonymous with “Web Address”, and it's what appears in your browsers “go to:” gadget. “URL”, “domain name”, “Internet address” and “web address” are often used interchangeably, altho they actually have slightly different meanings. But most people will know what you mean. A “Domain Name” is a URL that you register for your use on the Internet. Snakeroot.net and Google.com are examples of domain names. More on Domain Names under “Three Parts to Any Web Site”. "FTP" means "File Transfer Protocol" which is a system for handshaking and transmission of files from the hard drive on your home computer to the hard drive on a Server's computer, or vice versa. You typically use an FTP program to transfer your web page to your hosting site on the Internet. FTP programs are sometimes specialized stand-alone programs, and sometimes embedded as part of a larger program, such as Internet Explorer. "Host" refers to the owner of some space you have rented on a server's hard drive where you have your website stored on the Internet so anyone can view it. “HTTP://” is a way of describing that what comes next is a domain name or Internet address. HTTP stands for Hyper Text Transfer Protocol, and alerts the software that “here comes a web page address”. It always needs the “://” after it, but often browsers will assume it is there if you just type in the domain name. “WYSIWYG” is a clever acronym for
“What you see is what you get”. It refers to software that lets you edit an
on screen version of what the final page will look like in the target media (on paper or
on the web). Word processors have been WYSIWYG for a decade or more, altho the early ones
in the 1980's were not. There are sometimes slight (or even major!) imperfections in how
faithfully what is on screen gets transferred to the target media, so some software or
some documents may not be truly WYSIWYG.
Three Parts to Any Website There are dozens of companies that specialize in registering domain names, called Domain Registrars. Your first task is to find one that is easy to use, not too expensive (i.e., less than $20 a year), gives you total rights over your domain name, and is otherwise compatable with your values. I use www.Gandi.net because they are a small company with the right values and their website is straight-forward to use, contains no advertising, and they provide lots of extras. If you Google "domain registrar" and you'll find lots of them. Beware of the cheapest of them, there is usually a reason. For example GoDaddy.com is a very cheap registrar, but a visit to NoDaddy.com, created by pissed off GoDaddy customers, shows you what you really get. Once you find a registrar you are comfortable with, you'll see that their home page offers you a place to check on the availability of domain names. You type in your choice(s) and choose whether you want it to be a .com, .net, .org, .us, .info or other domain type. The Registrar will then check the Internet registries and report within a few seconds which ones are available. If any are, then at this point you will be asked which ones you want to register. You can go ahead and do if you like; be ready with your credit card. A word here about domain names: they are all cAsE INSensiTive, so any possible combination of upper and lower case letters are equivalent. For human readability purposes, you'll probably always want to write yours like www.YourDomainName.com. Also, the "www." part is entirely optional, but does help to identify it as a web address when people see it written on your printed literature. The case insensitivity, by the way, extends only out to the .com and after that case is very important, so that www.YourDomainName.com/Store.html is NOT equivalent to www.YourDomainName.com/store.html and entering it the wrong way will get a "Page not found." error. Freebies that come with registering a domain name include email options. "Email redirection" is one option, which means you can be anyname@YourDomainName.com, which has no mailbox itself, but rather email sent to it is automatically and transparently sent to yourname@yourrealemailaddress.com with no further action on your part. You get 1,000 of these email redirections, so if your spouse, your mom, or kids want snazzier email addresses, they can all have one so long as there is a real email address to redirect mail to. In other words, email redirection addresses are like aliases. And it takes only a few minutes to change the re-direction target if you should ever change your real email address. You can also create several real email address mailboxes associated with your domain name, also in the form anyname@YourDomainName.com, where email will reside awaiting you to get your mail. These operate similarly to hotmail or gmail, and work well when someone has no other real email address, or if you want to keep emails relating to your website separate from your personal email. Once you have a domain name registered, you get to point it somewhere, such as where your home page lives. 2) Finding a hosting space. First check to see if your ISP provides you with "personal web space" with your account. If it does, you can probably host the web page there yourself and avoid the cost of renting more space elsewhere. Instructions on how to upload files to your personal web space can usually be found at your ISP's website. All you will need is at most five or ten megabytes of space for most websites. You will also find there what your real web address is so you can tell your browser where to find your website. My personal webspace is at www.gwi.net/~troberts/ so this would be the address I would fill in at my domain name registrar to point my domain name Snakeroot.net to. That is what I used to do, but I began hosting so many websites that I began renting my own webspace. There are many webhosting companies on the web. Some Domain Name Registrars also offer Web Hosting Space, but not all do, since they are completely different functions. If yours does, the easiest thing to do is to rent your web hosting space there. Often a Web Hosting Company will offer to register your new domain name for free for one year when you open an account. Hundreds of companies offering web hosting space can be found by googling "web hosting". Several things to look for in a web host are ease of administering your space, price for amount of space offered ($100/year/10GB is a typical amount), and reliability (percent of downtime of their servers, and frequent automatic backups of all data). 3) Making the page itself. Building your website Regardless of which authoring approach you use, it is highly recommended that you create a folder on your hard drive where the working copy of your website will live. In that folder, you will have another folder called “pix” or “images” where all your graphics will live. This keeps the first folder (your “root folder”) from getting crowded with all your graphics files mixed up among all your web page files. A large part of managing files easily is a properly structured filing system, as any secretary will tell you. As soon as you have saved your newly minted web page, look at it in a browser. (Usually opening your root folder and double clicking on the file will open it in your browser.) Look the page over to see if you really did what you thought you did. And, to be safe, it is a good idea to look at your page in more than one brand of browser, because they don't all render the html code in exactly the same way. Once your pages are ready to go public, they need to be uploaded to your web hosting area with an FTP program. On your hosting space, you will have created folders that exactly mimic what you have in your website's root folder on your hard drive. (1) Writing the code yourself: getting
your hands dirty. It is beyond the scope of this article to explain how to code in HTML, but I have written an HTML Cheat Sheet which explains the basics of web page structure and describes some of the html code you will need to produce the majority of the pages you will likely ever need. Below in the Getting Help section, I have listed several links to web page tutorials that I have found useful over the years. A trick I learned early on was that if I saw something on a particular web page that I liked—anything from a background color to a fancy placement of pull-down menus—I would look at the code that produced it by asking my browser to "View Page Source". Once I saw the code I could decide either "That's easy! I can do that myself!" or perhaps "That's way too complicated for me to understand. Maybe next year." One advantage to doing the HTML coding of your web pages yourself is that you have complete control of what your page is going to look like, and easily can make major or minute modifications at will because you understand the code that is producing your page. Another advantage is that the code to produce your page can be small and elegant, because when you get the page looking the way you want, you're done! Another advantage is that you use a program you are familiar with: your text editor (like NotePad or SimpleText) or your word processor to write the code. When you write the code directly in a word processor, you must save it as "text only" and always give the file name the extension ".htm" or ".html" Doing this allows any browser to see it as a web page. DO NOT "save as html" in your word processer if you have written the code for your page directly, or else the resulting web page you see will be your code for that page instead of the page you expected to see. The biggest disadvantage is that you have to learn how to write html code. But html is not a programming language, it is just a page description language designed for web pages. Thus it is much simpler to learn than a computer progrmming language like C, Pascal, or Basic. (2) Using Web Page Authoring Software:
the WYSIWYG approach. The biggest advantage of using web authoring software is that they were designed from the ground up to make web pages. That means they will give you a clear idea of all the features you can employ in creating your web page. There are two big disavantages to going the web authoring software route. One is the cost, which can be over a hundred dollars, although you can find shareware or freeware programs out there, but they usually won't be as easy to use or offer all the features that commercial programs have. The other disadvantage is that you have to learn a whole new program that just creates web pages. If you are making a lot of pages this may be worthwhile, but if you are making only six or a dozen pages for your own website, and then going back months later to do some updating or editing, you never really get the chance to become proficient at using a powerful program. Worse yet, you may delay making updates because of the hassle of navigating a little used program you are unfamiliar with. (3) Using a Word Processor: another WYSIWYG approach. The advantage to this approach is a relatively easy learning curve, since you may already know how to use most of the word processer's features from creating text documents. So, all you will have to learn is the special features that are peculiar to web pages, such as links, and of course to "Save as html" (or "Publish to html" in some programs). Sometimes the "Save as html" is a pull-down menu feature within in the dialog box that appears when you do a "Save As"; other times it has it's own line under the "file" menu. Using your wrod processer to create web pages also means you don't have to purchase and learn any new software. The disadvantages include the fact that the web pages created are often very large files, often five to ten times as large as they need to be to simply recreate in a browser window the page you made in your word processer. No word processer I have seen creates small, efficient files, because they include overly exact information on font size, letter spacing, positioning of objects and many instances of redundant html code. Altho the lack of elegance of the files thus created may not be of any particular concern to you, it does make editing them by hand in a text editor (option 1, above) very dificult, and folks viewing your page with a slow dialup internet connection will have to wait a few more seconds as all that bloated code is transmitted over their phone line. A further disadvantage is that you will have to learn parts of your word processor's features you never bothered with before, some of which can be fairly complicated. And since word processors aren't actually designed for web authoring, you can do things on web pages that your word processor doesn't tell you can be done, or aat least won't make it obvious how to do them. Perhaps the final disadvantage to using a word processor is their lack
of true WYSIWYG functionality. Word processors aren't really designed to be good web
authoring tools. The page may look fine in the word processer, but save it to disk
and re-load it into a browser, and the page doesn't look quite the same. Sometimes these
differences are slight, but sometimes they make the page completely unusable.
Getting Help |