"Building a Web-Page" HOW-TO

by: Bill Schell (e-mail: bill@vikingasia.org); last updated: Thursday, 8 August 2002

Introduction: In the past several months - I've spent some time helping people get acquainted with the whats / wheres / hows / of building their own (simple) web-site. In the past 5-6-7 years I've built probably 50 or 60 web-sites. I hope I can help you with your introduction to the wonderful world of building your own web-page.

the basics: First - lets outline some terms - so that we both know what the terms mean - some of them have had a lot of mis-use in the industry...

Web-Browser-software (sometimes called a "Web-Client"): this is the piece of software that someone 'surfing the web' has on their PC or workstation. Tthe most common names for this product are "Microsoft Internet Explorer" and "Netscape Navigator". There are some other minor brands like OmniWeb - but unless you use some fairly esoteric operating systems you will almost always 'browse or surf' the web with either Netscape or Microsoft's product(s). Further - this is the browser-set that you should make certain that all of the web-pages you write can be read adequately with..

Web-Server-software: this is typically something called "Apache" - this software server runs on the "Web-Server-hardware" - which can be almost any hardware, Intel, Macintosh, Sun, HP, IBM, etc. etc. etc.) The Apache product uses the "open source model" and it is a free product. There are, again, other sources of Web-Server-software, but the Apache is the most prevalent. The Microsoft product in this category is called "Internet Information Server" or IIS for short. - it runs only on Microsoft operating systems (Windows 98, Windows NT, Windows ME, Windows 2000) and only on Intel-brand hardware. Netcscape also makes a Web-Server-software product, but it comes in such wide and varied configurations that names are too complex to mention.

Summary: Web-Server-software is simply software that runs on a server(hardware) that responds to incomming (from the network - ultimately from the Web-Browser-software somewhere) requests to send-back-to the Web-Browser-software, some "web-page" (that file with the ...htm or ...html name). In the simplest form this is all that Web-Server-software does.. Remember too, that in most instances there are at least two connotations for "Web Server" _ one for the Hardware, one for the Software, - but in 'most cases' when people refer to a "Web Server" they are referring to the combination of hardware & software.

Web-Page: (file with name ending in ...htm or ...html) this is a file that you will create, 'your web-page' - it is created with, in most instances, a glorified "text-editor" or a word-processor that has the ability to save "plain text" files with the "html 'tags'" in it. This is the file you're going to create to make your "Web Page", and you will typically create this file (web-page) on your 'home or office' computer (some computer that is local to you - has a local hard-disk).

FTP: "File Transfer Protocol" - this is a network-utility that all computers have, by default, and it is the method that you will use to move your web-page-file (...htm or ...html) from your local computer to the web-server(hardware) computer (where I hope you already have an account) and then people can access your "web page" from the web-server-hardware computer via the Web-Server-software running on that computer and their Web-Browser-software running on their computer.

Provisio: - more complex web-pages include a number of other active and passive components, including, but not limited to:

1. gif (graphics files (typically diagrams, not pictures))
2. jpeg (graphics files (typically photographic based images))
3. asp files ("Active Server Page" - a Microsoft term that allows data to be exchanged
4. java and it's many other forms, javascript, java applets etc. - Java is a programming language that extends what the original html specification intended. - It allows web-pages to do a lot of things that they were not originally intended to do.
5. SSL / HTTPS: both "protocols" (standardized methods that Web Browser & Web Server software talk to each other in order to secure the information that flows back and forth between the server and the browser.
6. The ONLY item from this list I will mention is how to include simple jpeg or gif graphics - beyond this you will have to attend a course or purchase one of the many good books on the market.

What you will need to build & publish your web-page(s): (once you build and publish one - you'll want to do more!)

1. an ISP account or some other way to access the "Internet" so that you can both publish your web-page and so that others may view it with their "Web-Browser-software"
2. a local computer - almost any computer will do -
3. a web-creation / editing software tool (Microsoft "Front Page" / Netscape" Composer" (a component of Netscape Communicator (of which Netscape Navigator (the Web-Browser-software is also a component))
4. the 'FTP' utility - again - almost any computer you have will include this utility...
5. time to work through this - it will probably take you at most about 30 minutes to create a very simple web-page and check it for erros, publish it (FTP it to your "Web-Server-(hardware)" computer and then check it's validity with yourWeb-Server-software from your computer
6. something to say? - this may seem redundant or odd - but you need to have some concept, thought, or information to convey to others on the web- otherwise why are you here?

Step One - create a title & a horizontal rule to separate the title from the body-text

1. Open either Microsoft "Front Page" or the Netscape "Composer" component - they are both used to build web-pages in a "point & click" environment.
2. 
   
3. Microsoft's Front Page: This software, which is readily available from Microsoft, has some 'flaws'.   You can choose to use this software - but you should understand that Front Page generates "non-standard" HTML code that is not able to be maintained, edited, updated, or changed by other software tools.   Microsoft uses a concept called "embrace & extend" - which means they adopt an "industry standard" and then add a proprietary extension to it - so that no other software tools can interact with the Web Page you create.   Remember that you - who create(s) a web-page may or may not be the person, who, over time (the next month, year, etc.) who maintains the site.    IF YOU, as the person who gives 'birth' to this web-page can guarantee that everyone who follows you will use Front Page, go right ahead.  However, if you, and/or your organization is part of a regional or international group, then you probably can't guarantee that Front Page will be used, and it's proprietary nature will prevent anyone who doesn't have or use
4. Front Page to be able to interact with the web-page Forever.  That's a long time...  This is very much like giving birth to a child.  Once you create a web-page it will live-on - maybe with your blessings, maybe without...  
5. 
   
6. Netscape Communicator's Composer: from the "File" menu pick "New" and then "Blank Page"
7. I don't have "Microsoft Front Page" - so - unfortunately - I can't give you similar directions for this product, however, I would hope that from the commands I've given you for Netscape you could probably figure out how to use Microsoft Front Page and/or other similar web-editing tools that you might have access to.
8. once you get a blank document, click in the top of the document and type something of this sort, without the quotes... "George Smith's First attempt at a Web Page"
9. then - highlight the text
10. Netscape Communicator's Composer: find the "alignment" box to the upper right of the web-page-editing area, and pull-down that mini-menu and select the "centered" text
11. that should give you a nice heading - but it's probably too small - leave the text highlighted, then find something like "format" =>"text" => "font" (or maybe "size") and blow-up the text til it fills about 60% - 80% of the width of the page
12. Once you're satisifed with the size of the title-text, then click some where in the blank-window - to de-select the text and then click below the text and the cursor
13. somewhere in the "Format" or "Add" menu(s) should be something about a "horizontal rule" or 'line' or 'separator'.
14. Netscape Communicator's Composer: - there's simply a small piece of a horizontal line in the top portion of the menu-bar -you can just click once on that and it will add one of these now, it should show-up underneath your title. Afer you've put the horizontal bar / line in there - then click below the line to de-select everything, and...

Saving your file:

• NOW: - you've put "a bit" of work into this - lets not lose it - because your computer crashes, so, go to the File menu, and click "Save As"
• - all your web-pages should be in a separate directory at the "root" level (top level) of your file system) - maybe create a new folder "WebPages" and then "SaveAs" this web page you're working on in that folder with a name something like "Test1.html".

Step Two: create a "body" text-area:

• Now we'll add some text - below the centered title & the horizontal line.
• so - just click your mouse - and start typing something like:
• "Introduction: This is the first attempt I've made at creating my own Web-Page."

Step Three: - build a "footer" area:

• then add another horizontal line

then something like: "by: George Smith; last updated: Today's Date"

• then add another hoizontal line
• then do a "Save"

Now - you've created a web-page, your first of many...

Testing your web-page locally:

Netscape Communicator's Navigator:

• Lets 'test' it with the existing web-browser you already have on your computer:
  • Netscape Communicator's Navigator: "File=>Open=>Page in Navigator
• and browse your file system to find the file & open it.

Microsoft's "Internet Explorer":

• Lets 'test' it with the existing web-browser you already have on your computer:
  • Microsoft's Internet Explorer: "File=>Open File
• and browse your file system to find the file & open it

FTPing your WebPage to the "Web-Server-hardware":

This is where things may get 'tricky' - so stay with me and we'll try to get you through it.

You have accomplished several steps so far, - created your page, saved it - & viewed it with a local browser from your local hard disk. The next step in the process is to "publish" your web-page on a "Web Server(hardware)" so that others may view the file with their web-browsers from wherever they happen to be.

so - let's do this - we'll assume you're using a "PC" with some form of "Microsoft" operating system:

go to the "Start=>Run" box and type in "command.com" - that should give you a window with a "C:\" prompt

in there you'll want to 'change directory' to wherever you've saved your web page files - we'll assume it's something like: d:\WebPages, so the commands you'll enter at the "C:\" prompt would be:

• c:\ >d: [return] (you will type what is in bold-face)
• d:\ >cd WebPages [return]

Now - we've gotten you into what is called the "local directory" where your web-pages are stored, just to verify, try doing a "dir" on this directory - it should show you something such as:

• d:\WebPages> dir [return]
• test1.html <= filename of a file
• test2.html <= filename of a file
• . <== this single dot represents this directory
• .. <== this two dots represents the 'parent' directory
• d:\WebPages>

now - you'll be wanting to enter the "ftp" command - and you'll have to know the name of the ISP where your web-pages will reside -

• d:\WebPages> ftp myhost.myISP.com [return] (you will type what is in bold-face)

• ftp:> username: < my-username> [return]
• ftp:> password <my-password > [return]
• ftp:> cd public_html [return] <=== "public_html" is the 'default' directory on the ISP's host computer (Web-Server-hardware) where you will store your web-pages (...html files)
• ftp:/public_html> bin [return] <=== this command puts "FTP" in the "binary" mode so you can transfer any type of files you want - graphics, text, html, etc.
• ftp:/public_html> put test1.html index.html <=== note you're giving the file two names here - the reason you do this is that on your local computer you want to call the file "test1.html" to differentiate it from other html files you will create. However, about 98% of all web-servers use a 'default name' of "index.html" to load the page from a given directory. When someone accesses your home-page with their Web-Browser-software, you want them to get the 'default home page' in your 'public_html' directory - so when you transfer the file that is called "test1.html" on your local computer to the Web-Server-software/hardware computer, you want to 'rename' it as 'index.html' and by typing in the ftp command the way I've shown it here - the ftp command will auto-magically rename the file as it transfers it.

Now - having said all this about re-naming the file to "index.html" - lets 'assume' that you have or want to have several different web-pages on a single ISP account - how do you do that? Here's how:

your 'main' web-page might be located on a server called "server1.myISP.com"

it would typically be in a directory in the "users" area, so the 'real' (on that computer) path to your directory for your html files would be:

server1.myISP.com/users/myname/public_html/index.html

HOWEVER, if you give the URL to your web-site to someone - the URL they would type into their Web-Browser-software would be something like:

http://www.myISP.com/~myname/

what this should tell you is that the "server1" and the "users" and the "public_html" are all 'default' in the Web-Server-software on the Web-Server-hardware, so that the user(s) / client(s) of your web-page don't have to remember to type all that 'stuff' into their Web-Browser-software...

so- FURTHER: to having more than one web-page - here's how you build that structure on the ISPs web-site/server:

in your directory: /users/myname/public_html

you create some new directories (use the "mkdir" command in ftp):

• ftp:public_html:> mkdir topic1
• ftp:public_html:> mkdir topic2
• ftp:public_html:> mkdir topic3

so that your directory structure on the Web-Server-hardware looks something like this:

then in your directory at your ISP's Web-Server-hardware you should have:

• /users/myname/public_html/topic1 <== directory for 'topic1'
• /users/myname/public_html/topic2 <== directory for 'topic 2'
• /users/myname/public_html/topic3 <== directory for 'topic 3'

SO - if / when you want to build separate web-page-topics - you merely create the new directories and the ...html files on your local computer - and when you "FTP" those files to the Web-Server-hardware computer, in your FTP you do a "cd public_html/topic1" if you are up-loading-files to the topic1- web-page, and if it is the 'main' page for 'topic1' then you'll want to "ftp my_topic1.html index.html" once you have cd'd into the appropriate directory.

One of the key things to remember when doing "FTP" is that you need to know where (what directory) you are FTPing FROM and what directory you are FTPing TO. - Once you learn about the different directories, & how to FTP to/from them, you're pretty well on your way to putting the files where the general public can access them.

Some Administrivia:

Here's a collection of things you might want to think-about / consider, but a lot of this depends on what the audience is for your web-site and what sorts of people you want to access it.

there's a whole bunch of "hidden" things going-on behind the scenes when people access your web-site. Further, when/if you want someone to be able find your web-site in a 'search engine'... The concept behind all this is "Meta Tags" - and there is a way you can 'set' these (as opposed to letting them 'default') by finding something like this:

Netscape Communicator's Composer: Format(menu)=>Page Properties and/or Format(menu)=>Page Title

Dreamweaver: Modify(menu)=>Page Properties

------ this is the end of this file at this time (Thursday, 08 August 2002); more information to follow later -----------