Index
Comparison between programs
Inserting Images
Creating Links
Meta-tags, key to life itself
Welcome to the website design portion of GodotWeb. I appreciate your interest.
Take a look at this whole website. Does it look at least mildly complicated or impressive? If you are a pro or experienced with web design, you can tell that it is not complicated. But even if you aren't very knowledgeable about web design, and are a beginner, you can build a good looking website. And you do not need expensive software to do it.
If you think this website looks nice, you should know that I have only done anything with website design in the last six months, and almost all of my skills and knowledge comes from the last three weeks, when I have taken GodotWeb from a one-page site to a site with about 20 pages, graphics, links, a guestbook, a hit-counter, and listings with the major search engines.
And I have done that with very little knowledge of HTML, and
no knowledge whatsoever of Java or Perl. And you can too.
What is HTML? It is the language used for, basically, all
webpages. It stands for hypertext markup language. What that
means, is, well, I really don't know. What you and I need to know,
however, is that HTML is at its heart a text formatting system
that incorporates links to other files. All the graphics on web
pages are what are called 'embedded files.' These are really just
links to graphics that are not actually in the HTML document. The
web browser reads the HTML coding and then loads the graphics as
if they were actually part of the document.
For a better understanding of HTML than I could ever give,
please read this,
the NCSA (at UIUC) Beginner's Guide to HTML, a document
explaining it written for the NCSA. Note, however, that you do
not need to know any of this before you start building web pages.
If one wanted to, one could build webpages simply by writing in straight HTML, in a text editor such as Windows Notepad. However, no one who is sane does this, because it is slow and tedious. So what people, even the professionals, do, is use programs that auomatically generate the HTML language while they concentrate on the content.
To design a website, unless you are a masochistic programmer, you will need at least one program that can write HTML. Probably you already have it on your hard disk. In Netscape Communicator, there is Composer, which is overall a good basic web design program. Most new computers come with Microsoft Frontpage Express, the dumbed-down version of Frontpage. Also, Microsoft Word 2000 and later and Corel Wordperfect 9 or later will act as web design programs.
Here is my analysis of these 'cheap' programs:
Netscape Composer: This is a solid program, and I have done much of my web design with it. Its linking system and design are superior to those of its competitor, Frontpage Express. However, it lacks a direct HTML editor, so going back directly into the code is impossible.
Frontpage Express: This is a solid program, and I have done about half my web design with it. I find it to be slightly inferior to Composer in its design, although it does have some nice features. The only reason I continue to use it over Composer now is because it allows direct editing of the HTML code.
Wordperfect and Word:
These are souped up word-processors. I have really not used
either for web authoring. I hear that Word is superior to
Wordperfect in this respect. I do know that either can work quite
well; my friend Jonathan's
website was designed almost completely in Word.
My analysis? If you do not want to deal with HTML right now, get Netscape Communicator 4.5 or later (it is extremely cheap) and use that. If you want to deal with HTML, use Frontpage Express. Or, use what you have.
I do not know about any of the other programs available. If
any of you do, please contact
me and I'll include the info you give me on this page.
First, you need to get a homepage on the internet. Unless you have a server and wads of cash to burn and a pro to help you with tech problems, I recommend getting hooked up with a hosting site. There are many different options, from Geocities to Yahoo to Tripod to Xoom to Homepage.com. I recommend Homepage.com. It is not the 'best' site, but it is pretty easy to use without being annoyingly simple-minded. All the sites offer pretty much the same thing: 10 megabytes of space, free (xoom offers unlimited space). They all put banner ads on your pages to fund their operations. Tripod is annoying in that it requires pages to be updated once a month or else they will remove your site.
After you have signed up with a service, it is time to design a site. You have a few options. You can design it online, which is slow, and wastes your phone time, or you can design it offline and upload it later. I recommend designing a basic page online, following their directions, just saying that your page is under construction, what you will have on your page, and your e-mail address. I don't know why, but that is common practice.
Then, get offline, and proceed to build your site by using one
of the programs I have outlined (or any other program that you
have).
You may want to get a book to assist you on how to build a website if you are not the intrepid sort who learns by trying things without knowing a thing about them, as I am. I am not familiar with this particular book, but I would recommend the Dummies guide to Web authoring (I'm not sure of the exact title). I am familiar with the series and the books are usually good. (Although I would not recommend the Dummies Guide to Dating; unless you are a computer programmer, you probably know most of the stuff in there already.)
If you are familiar with word processors, most of the controls should seem familiar; I will not instruct you on the basics, but only on the web-centric parts of a web-authoring program.
Once you have written your first page of text, and formatted it, you will want to learn how to do a few basics, such as inserting graphics and linking pages.
Before explaining those, let me insist that you keep all the files that will go onto your webpage in one folder. There is very helpful. Also, if you have separate sections on your site that are quite large, you may want to have separate folders within your homepage folder for each section (for example, I have a folder on my desktop labeled 'homepages', which includes separate folders inside it for my three different homepages. Inside the folder for GodotWeb are five folders: Web Authoring, Godot, Computer, Photography, and Mike. This way, even though I have over 50 graphics on my site, I don't get them confused.)
Now, back to graphics. First, copy the graphics file you want to use to your website folder. Then, go to the 'Insert' menu and choose insert image. Then, enter the image's name or browse until you find it.
To create links between pages, first, highlight some text or an image and then choose to create a link, and then type in the page's URL.
One note of caution. If you are making links to outside pages, then use an absolute address (the full address, such as http://www.amazon.com). But if you are linking to your own pages, then use relative links. A relative link would be 'html.htm' from this page, and that would link to the page on HTML, in the same folder. To link to my photography gallery from here, the link would be '../photo/mike2.htm'
Relative links are better because that way, no matter where your pages go (your hardisk, homepage.com, some other web hosting service), the links will still work.
The one reason why I like Netscape Composer is because it is fairly easy to do relative links using Composer, and relative links seem to be the default.
Now, you know 90% of what web-authoring is about: plain text
with some formatting, links, and graphics.
The very basics: html code is comprised of myriad different 'tags' which are pairs of orders enclosed in brackets, such as <html> and </html>. The backslash (/) indicates that it is ending the orders of the original tag. There are several basic tags that everyone should know:
<html> - used in every HTML document, tells a browser that it is an html document. The <html> tag should start a document and the </html> should end a document.
<!--Words--> - enclose whatever you want in this fashion, and it will not be read as code or displayed in a browser. It is simply to make notes to yourself, the web author.
<head> - this describes the header of an HTML document, which is especially important for meta-tags, discussed in the section on attracting visitors to your site. Also, the title of a document is in the header section (it is displayed not on the page, but by the browser, usually on the top bar).
<body> - this starts the body of the page, and everything that is visible within the browser is within the body section. Use </body> to end the section.
<p> - this is to start a paragraph, starting it on another line with a space; no ending code is necessary for paragraphs </p>, but it is good to use it anyway.
headings - these denote a heading, with a larger font than most of the site. The size of the font is from 1-6 with 1 being largest (6 is actually smaller than normal text). The actual tag is in the form of <h#>Heading</h#> where # is any number from 1 to 6.
These are the barest basics. To learn more, visit NCSA, with
their NCSA
guide to HTML, which taught me almost everything I know about
HTML.
If you want to get a clue about what the code for a site looks like, most browsers have an option to view the HTML code.
Or, view the code from this page.
You don't need them, plain and simple.
Perl is a scripting language that is used primarily by business
to deal with the data they get when people fill in and send forms
from the web. Java is a programming language that is used to do
all sorts of things. However, all the basics and some pretty
impressive things can be done without using Java. (My site uses
no Java)
Now it is time to spruce up your site. I assume by now that you have a sight, up and running, and you have at least a slight knowledge of HTML. Here are some suggestions for adding to your site:
Hit Counter: Want to know how many people visit your site? Go to http://www.counter.com and sign up and you can get a free counter like mine. All you will need to do is copy some code directly into your page's HTML code.
Guestbook: go to http://theguestbook.com and sign up for a free guestbook. It is much the same procedure as getting a counter.
Site Search Engine: I am still looking for a free way to search just your own homepage. Sorry.
WebsiteGarage: this has a lot
of features to help your site, including a service to register your site
with search engines, for free. You have to be a netscape
netcenter member, though (but that is free, also).
This is the hard part. I still have not gotten many visitors. The thing to do is register with search engines. For this it is best to wait until your site is nice and worthwhile and close to done, or else no one will come anyway.
I have just begun the process of trying to attract traffic to GodotWeb.
First, I recommend checking out this document,
which is at ep.com. It has info
on how to sign up with various places.
Meta-tags, key to life itself
If you want people to visit your website, then, before you list your site with search engines, you need to play with meta-tags in HTML. None of the basic web-authoring programs that I know of will do this for you.
Basically, what a search engine usually will search is the meta-tag of an html file. This is a part of the code that does not show up on the page that has a title for the page and a list of keywords, as well as some other information that is less important. You need to have a good title and appropriate keywords for your pages or else search engines will not list your site.
The meta tags need to be inserted within the header of an html
file. Here is an example of the top part of HTML code from this
page:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="Author" content="Michael
Kirk Goode">
<meta name="description"
content="A primer on website building">
<meta name="keywords"
content="web, site, website, personal,
html, beginner, homepage">
<meta name="GENERATOR" content="Microsoft
FrontPage Express 2.0">
<title>Intro to Website Design</title>
</head>
The meta tags must be inserted between the <head> and
</head>. The non-highlighted parts of this your page will
already have. Do not change them. The first highlighted section
you can copy, and then just change the description and keywords
to fit your page. The title section, you will already have also.
You may want to change the title, though, because this is what
people will see when the search engine brings up your page.
Site Map
Home-----Photography-----Computers-----Waiting for Godot