WEB PAGE BUILDING 101
Creating a web site consists of Building a set of web pages and then Publishing them to the web.
Simple to say – not so simple to do.
Unless you break it down into smaller steps.
A PAGE IS NOT ALWAYS JUST A PAGE
HOW DO I PUT IT ALL TOGETHER ?
LOOK BOTH WAYS BEFORE CROSSING
BUT IT’S ONLY A SMALL CHANGE !!!
Let's start with Building a web page.
You can use a variety of tools to build a web page.
Each has it's own advantages (and disadvantages).
Corel Draw
+ excellent graphics toolset
+ does html syntax checking
- I don't know how to use it
MS Word
+ excellent for text
- limited graphics
- limited html features (anchors, links,
...)
MS Publisher
+ excellent for large documents
- most good web sites don't use large
documents (pages)
MS Front Page
+ excellent for html features (anchors,
links, ...)
+ manages entire web site - not just a
single page
+ allows editing of raw html code
- yet another application to learn
WorldNet Web Site Builder
+ templates provided
+ lots of gadgets
- lots of garbage
- NOT as simple to use as they would have
you believe
- have it THEIR way
WorldNet Personal Web Page Wizard
+ simple to use
+ nice set of (optional) simple gadgets
- limited graphics
The bottom line is - any of these tools (and many
others as well) can be used to create
a page in html (Hyper Text Markup
Language). Each has it's own
advantages.
Once a web page is created, another of these tools
can be used to edit it (as long as it is
still resident on your PC). It still remains an html page.
The html page doesn’t care what tools or techniques
were used in its creation.
An html doc, is an html doc, is an html doc …
For example:
Last night I used the Page Builder Wizard to create a
very simple page with a hit counter.
I then published it to my own (junk) page at:
http://home.att.net/~tgduff
I used Internet Explorer to confirm it worked; and
then did a view source (with Internet Explorer select the
SOURCE option under the VIEW menu)
to see how it was implemented [a single (albeit long) line in
the html code].
Key Technique 1: Plagiarism is allowed (encouraged) on the World Wide Web. If you see something you like on any site,
don’t be afraid to open the html source text to see how it was done. You may be able to Copy/Paste the actual
html text snippet into your new web page and achieve the same effect for
yourself.
Key Technique 2: Have a “playground” set aside that you can experiment with
without endangering your actual site. You’ll learn a lot more if you can try new things and not have to
worry about blowing up the site you’ve already invested so much time in.
Then I went back to the ~hosnj web page I had created
(in Bayville 2 weeks ago using MS WORD).
I used MS Front Page to edit that page.
With Front Page you can edit the resultant html code
directly.
I added one line from my own (junk) page from above.
Finally I used WorldNet's HTTP File Upload to put the
revised page back into WorldNet.
It's not important that you follow each of the steps
above but I wanted to make the point that
each tool had its own purpose and sometimes it's
easier to use several tools than to try to use
only 1 tool from beginning to end.
However, the
variegated lineage of this file caused lots of unnecessary baggage to be
included in the resultant html text.
Some of that baggage caused the jpeg image to not display properly. To clean house I started over using just MS
Front Page and rebuilt the page from scratch. The jpeg image now displays properly.
Just to play safe, I created an “archive” directory on WorldNet (~hosnj/archive) into
which I copied the old “index.htm” file before I uploaded the new version. See “BELTS & SUSPENDERS” later in
this document for a better way to protect your web site from yourself.
The second part of web page creation is to Publish
the finished page to the World Wide Web (in this case WorldNet). Again there are several tools that may be
used but I’ve found the easiest to use is
HTTP File Upload which is available at
http://publish.att.net/cgi-bin/pp_upload or by looking in WorldNet’s -
Personal Web Pages - Do it Yourself - File Uploading -
HTTP File Uploading.
The starting page of any web site is typically stored
in a file named “index.htm”. This file
is copied to the user’s home folder, which for WorldNet is found at http://home.att.net/~username . When
this URL is requested by a web browser, the default action of the ISP is to
return the file ~username/index.htm and of course all related files required by
the base file. This page is referred to
as the “HOME PAGE” of the user. This
home page typically provides links to other pages either within this user’s web
site or possibly to off-site locations.
Web viewers can access a particular web page within
the site by following these links from one page or another (navigating) or by
accessing the page directly if the fully qualified URL is known.
The example above for locating the HTTP File Upload
utility illustrates this capability.
We’ll revisit this topic again in a few minutes.
I’m getting a little ahead of myself so let’s take
some time for some background …
The basic element of information storage in a
computer system is a file. Files are
used to contain all sorts of information: text documents, pictures, music,
movies, and even other files. Files
that contain other files are called folders on Macs and Windows systems ( or
directories on UNIX systems ). In fact
folders can contain other folders as well as ordinary files. It is common to store ordinary files several
layers down in a hierarchy of nested folders.
This hierarchy is typically expressed with a series of slash-separated
folder names.
(e.g. C:/Program Files/Microsoft
Office/Office/WINWORD.EXE means
that the file, WINWORD containing the EXEcutable program that is being
used to create this document can be found in a folder named Office,
which in turn is found in a folder named Microsoft Office, which in turn
is found in a folder named Program Files which in turn is found in a
special folder named ‘”/” . This
special folder, /, is termed the “root” of the file system – basically
the starting place for all files on the disk. The disk which contains this root
is the “C” disk – denoted by the “C:” in this example.)
Microsoft, in Gates’ infinite wisdom, has from the
days of DOS used the backslash “\” to denote the folder-file separator. Thus you’ll see things like:
C:\Program Files\Microsoft
Office\Office\WINWORD.EXE
on Windows systems.
This concept of changing standards is termed INNOVATION
and is to be revered. !!!
The idea is nonetheless the same to us mortals.
While I’m in the mood for Microsoft bashing, I should
mention that DOS likes 3 character extensions on its files. Thus you will sometimes see files like: mywebpage.html or mywebpage.htm. I guess Mr. Gates told his team to “Get the
‘L’ out.” ??? I’ll try to use the 3
character “.htm” filename extension in this document but we all know it’s
really “.html” .
Lets talk a bit about where all this stuff goes when you
“publish” it.
OK now we have a naming convention of where to find
files on a disk. Let’s extend that
concept to the Internet – only now we have to deal with thousands of systems
each containing thousands of files.
Let’s use a ‘.’ (dot) to separate the various parts of the naming
structure.
(e.g. www.worldnet.att.net/ says on the World Wide Web
there is a WORLDNET system which is part of AT&T which
is a NETwork service provider enterprise). We can add a protocol (language) that we wish to use with this
system, Hyper Text Transfer Protocol (HTTP),
and we get: http://worldnet.att.net/ which we call a URL (Uniform Resource
Locator).
We can go deeper into this site by specifying the
exact page (file) we wish to view.
(e.g. http://worldnet.att.net/comm_center/newsgroups/ will show us the NEWSGROUP page
within the COMMunication CENTER folder of WorldNet.)
As an Internet Service Provider (ISP), WorldNet
allows it’s subscribers to create and store Web pages on it’s system that can
be accessed by anyone in the world with a computer. WorldNet sets aside one of its systems ( home.att.net ) to be used for this
purpose. Folders are created on this
system for this purpose and given the name of the subscriber (e.g. ~tgduff, or ~pszabo, or ~hosnj ). The ‘~’ indicates that this is a user’s name. Where it is actually placed on WorldNet’s
many systems with thousands of disks is not important to us; WorldNet always
knows where ~tgduff is actually located – that’s all that is really necessary.
The ‘~’ is really just shorthand for “the place
where files are stored for user …”.
The actual location might be more obscure :
(e.g. maybe it’s really:
worldnet.att.net/animals/vertebrates/mammals/bears/grizzly/tgduff )
and WorldNet might just move it around on us
from time-to-time to help them balance their storage space needs.
Isn’t ~tgduff easier ?
Notice that the URL,
http://home.att.net/~tgduff/ has a trailing ‘/ ‘ which suggests that
~tgduff is a folder (which it is). But what is the file within that
folder that will be accessed ? If a
file is not explicitly specified in the URL, WorldNet will look for a file with
the name “index.htm” or “default.htm”. Even the trailing ‘/ ‘ is optional.
Thus virtually every site you will visit on the WWW will
have one page (file) with the name index.htm (or occasionally
default.htm). Your site should be no
exception. This is the home page of the
site. Other pages (files) at this site
are usually accessed from links residing on the home (index) page so the viewer
does not need to know their actual name.
Publishing to the World Wide Web is as simple as
copying (uploading) files into this home folder.
Believe it or not, that’s all there is to it. Put an html file in that folder an it is instantly
accessible from anywhere in the world !
You’re now part of the World Wide Web !
One key concept with web site creation is to realize
that with conventional desktop publishing a document like this one typically
consists of many pages all contained within one file.
In web publishing, a site typically consists
of many pages each of which in turn is comprised of many files.
For example, one file may
contain the basic structure and text of a web page but separate files are used
to contain each of the picture images shown on the page. Also other files referenced from the base
page may implement other features of the page such as hit counters, off-page
links, dialogue boxes, etc.
Adding a picture to a web
page created in html consists of uploading a jpeg or gif image
into your home folder and adding the appropriate links to the html page. Most web page creation tools will handle the
html links and even let you copy/paste you favorite picture into your page. However depending which upload tool you use
you may have to upload the image separately from the html document. I like WorldNet’s HTTP File Upload mentioned
earlier – its easy to use and it lets you control what is uploaded. But it only uploads one file at a
time.
I still need to explore other tools which should be
able to upload all files for a site with a single invocation. Stay tuned …
Most Web authoring tools
will let you construct a page by copying/pasting various elements into your
page. If these elements are of
different types (e.g. Text and Pictures), the application should create
separate files (one for the Text and one for each Picture). These files should be created within a
common folder on your local hard drive.
(There may be folders created within this folder to hold some of these
elements which is equally acceptable).
We just don’t want the stuff scattered all over.
Let’s think of this working
area on your hard disk as a staging area for your real web site. We’ll call it a NODE. This NODE
can exist anywhere on your system you wish.
(
e.g. C:\windows\personal\myweb ).
You may have as many NODEs
on your system as you like (disk space permitting).
You may use these NODEs
to store multiple versions of your web site. This way you can recover from
accidentally uploading a bad set of web pages by uploading the older set again.
There is no convenient way to
download all of the files needed for a web site back to your computer so an ounce
of prevention is to always keep
the master copy of your files in a NODE on your computer dedicated for
that purpose.
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
The folder structure within
a NODE should match exactly the folder structure of your real web
site.
Given this structure,
publishing to the web is just a matter of copying the contents of the NODE (all
files, as well as all sub-folders, and all files and sub-sub-folders
that they contain …) to your web site.
The naming conventions used
in populating this staging area with files and sub-folders need to be preserved
when uploading to the web site. This is
because the generated html code will reference these files and sub-folders by file
name.
Changing the names of
the files or folders will break the html code.
Although these files cannot
have their names changed, they can be moved as a unit.
Think of the staging area (NODE)
as a container, the whole contents of which are to be copied up
to a web site. Containers within the
base container are likewise copied up; but NOT the base container
itself.
The Carpenter’s Rule: Measure twice. Cut once.
Most web development
applications provide tools to detect and diagnose problems before you upload to
the www.
Use them.
Remember that certain
off-site features (like counters) will not work locally until you upload your
site to WorldNet.
On the other hand, one thing
to watch for are local references that will work while still on your computer
but not once they are uploaded to WorldNet.
An example of this might be
an html reference to a graphics file on your computer that IS NOT
contained within your local NODE.
For example if you see (in
the html text) something like:
… <img border="0"
src="C:\Mydocuments\picture.gif" >…
it will not work once
installed since your C: drive is not accessible from WorldNet. Even if the file picture.gif IS uploaded to your home folder on
WorldNet, it will not be used since you are telling it to go elsewhere.
The html text should read:
…
<img border="0" src="picture.gif" >…
which says “get the file
from the same place this html text is
(i.e. your home folder on WorldNet).
Of course picture.gif needs to be uploaded to your web site just like any other file.
In short, you should NEVER
see “C:” in any html text you upload to WorldNet.
You can use the SEARCH
command in your html editor to look for the offending “C:”
If you have been a good
little web developer, you should by now have one NODE on your computer
with a COMPLETE copy of ALL the files which are currently on your
web site.
You do, don’t you ?
Also, you should have ANOTHER
NODE which contains ALL the files which are needed for your NEW-IMPROVED
WEB SITE II, including the files which are UNCHANGED from the
original.
Both NODEs will have
their own index.htm file as well as all the other required files.
If you agree with the above
statements, then it is safe to proceed.
If you feel uneasy, go to
the BELTS & SUSPENDERS strategy.
Otherwise continue.
Although it is possible to
do incremental updates to a web site one file at a time, it is also easy to
create problems for yourself that way by mixing and matching the new and old
files. This is especially true if the
file names are changing.
Remember that html links
work based upon the filenames – not the file’s content.
So that if the new index.htm file has a link to the new
page_2.htm , but that
file on the web is actually the version from the previous web site (with
different content) you may not be pleased with the result.
* One exception you may choose to make is your
.gif or .jpeg files.
They don’t usually change and they are rather large, so you can save
some upload time here.
There’s no such thing as
being too careful.
If you are not comfortable
with the GO FOR THE GOLD approach, then you should try the following
strategy:
* One exception you may choose to make is your
.gif or .jpeg files.
They don’t usually change and they are rather large, so you can save some
upload time here.
I know, I hear it all the
time. OK you don’t always have
to go through all the steps described above, but I do recommend a few
precautions even for a small change to just one file.