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.
Other Programs:
Frontpage 2000:
Nifty, but the only problem is that it tries to do too much for you. Too
many of its nice features only will work on servers that are optimized for it
(with frontpage server extensions). And of course, most servers don't have
frontpage extensions (for good reason: they suck). Also, be wary, because many of its other
nice features will only work with Internet Explorer. Its best features are that
it will check your internal links and that it will change your links if you move
a page.
CuteHTML: A nifty HTML editor, free, that does many nice things for you. If you want to edit code directly, use this.
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.
Getting a site
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).
For more information on finding a home for your site
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/gallery/mike1/index.htm' This means that it the index HTML file in the folder mike1 in the folder gallery which is in the folder photo, which is in the home folder, which is up one level from this directory (the ../).
Relative links are better because that way, no matter where your pages go (your hard disk, 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.
However, I have to hand it to Frontpage 2000: it does links the best. And if you move a page from within the program, then Frontpage will automatically update all relative links to and from that page, automatically.
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, at least not yet, and does not quite have perl up and running).
More specifically, perl can be used to create search programs, hit counters, form parsing programs, shopping carts, and many other things.
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: Go to www.mycomputer.com where you will find lots of great stuff. I have used (though I no longer do use) a site search engine, a counter, and the site sign up service (all are free) for my site.
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.
Navigate GodotWeb
Home > Web Design > Website Design Fundamentals