Bill's 'KISS' (Keep It Simple, Stupid, like I do)
Introduction to web-sites / web-pages / web-servers and 'web-thingies' in general...
Introductory notes:  Bill's 'advice and opportunity cost':

This Introduction to Web-Concepts (and practices) "" jumps right in "" - and if there are words and/or phrases that you don't understand, there is a 'Web_vocabulary' in a separate page - click here.

However, - most of those words and phrases I'll link-to- from here on this page, and so you can go there (to the glossary) from this area when I first use a word or a phrase.  Then by using your browser's 'Back' button you can come back to this page, where you 'jumped' to the other page to learn more...

Additionally there are some software tools that you may already have  a familiarity with.  IF you don't - those terms, too, will be addressed by further explanation, the first time I use them... - so - Let's get Started - remember, the EASIEST thing about web-page / web-site / web-thingies is that they are EASY and SIMPLE (to start) _ with Mr. Bill's "KISS" Principle...

Recognize, also as you both read-through this documentation and as you build and publish and view your first web-page(s) - that you are delving into a realm that is rife with standards.  By working within certain guidelines and with certain standards you will have to learn compromise.  Even though standards are iconic documents, published well-in advance (mostly) of their needs, they are still interpreted differently by different programmers and companies.  YOU will need to (in order to have your web-site(s) read and viewed by the greatest number) have to learn to compromise and build web-pages based on the 'lowest-common-denominator'.  

The reason you do this is that you have NO CONTROL over who will view your web-site NOR over the hardware and/or software they may use to view it...    SO - by using the lowest common denominator for your web-page development and the 'bells and whistles' you use in it - you will be allowing a lot of people to view your web-page.

IF - on the other hand - you work within a corporate entity - that always has, for instance, Internet Explorer 7 and Microsoft's Vista operating system and you can guarantee that all your users will always have the latest and the greatest, THEN you can use the latest and the greatest in your web-pages. 


IF IF IF You want to 'cut to the chase' AND you want to build a 'professional' web-presence and have a business, but do NOT want to learn the 'nuts and bolts' of the technical details but you want to concentrate your energies (and limited time) to the business-end - then try these two links:   http://www.the-artistic-garden.com/workathome.html   and/or this one:   http://passion.sitesell.com.


Lastly - even though there is a KISS principle involved here - this is not a 'trivial' concept, nor is it short and sweet.  It will take you 'some time' to learn the concepts and become comfortable with the activities... You will have to 'work' - though it's about 99% mental - to learn this.  I won't attempt to 'lull' you into believing otherwise it's not something to take lightly...


One thing to consider is " What are (all these) Web Languages? " - a Primer on Web Languages is here .  - You'll be using HTML, but there are other, more exotic languages...


A Short Lesson in URL (web-link) basics is presented ' here ' - you may "THINK" that you know / understand this often over-looked concept - but there really CAN BE (though not always) a LOT of 'complexity' in a URL - read this  (very) brief page to learn more.

Very SIMPLE Introduction:    Web-site-creation and publishing involves three steps
                                    
-- each of which can be simple or complex...      -- in the 'begining' we'll keep them all  (VERY) simple.
So - I've outlined these steps below - and each can be way more complex than the brief outline here, but the bottom-line is that there are - really- only three steps - the first is probably the hardest...


1.) create the web-page file(s):

YOU - the 'user or author' creates a 'raw ...html' file  with an ...html editor (sometimes called a  "" web page editor "" (a text editor is somewhat similar to your Microsoft Word software, but typically much simpler)  on your 'editing machine' at your home or office.    The resulting ...html file is little different from a letter or a Christmas list or a how-to file that you create with "Note Pad"(on Microsoft Windows operating system computers) or "Text Edit" (on Apple Macintosh OS "X" computers). 

'HTML" means 'Hyper Text Markup Language.  This is the 'language' that web-pages are written in.  You have no choice in this, you will not 'change the world' - if you want to write web-pages, then you will learn html.   

However you (mostly) do not have to 'learn' the 'ins and outs' of HTML, in most cases you can find a WYSIWYG (What You See Is What You Get (graphical)) editor for your HTML files.   This sort of an editor works very much like Microsoft's Windows' "Word" program.  It allows you to see the bold and font-size items that you create.  MANY people use Microsoft Windows' "Word" to create Web Pages (and then do a 'Save As' command to save the "Word file" as an ...html file.  YOU can do this, also, but there are risks, and you are really better-off to obtain and use an application that is really an HTML editor, and not Microsoft Word. 

You need to understand that the 'normal' name for a file that your web-server will load-up when a 'viewer' (of your web-site) enters a URL is ' index.html ' - (see more about ...index.html... in the section on "FTP" just below this section).



HOW to Edit / Create your first web-page:

- I've taken the liberty of creating some small / simple files for you to view on your web-browser (Internet Explorer, Firefox, Mozilla, Netscape, Safari, amongst others), AND every browser has a ' view source ' command (just look, you'll find it) - and you should use the ' view-source ' command in your browser to view these files...

IF you can't find 'view source' here's a little 'cheat-sheet' to find this very valuable command:
Let's assume you want to create a very very (VERY) simple web-page.   I've created a link from here (the page you are reading) to a VERY SIMPLE web-page.    Click " here " now and go to the first simple web-page example.  

Here's the 'raw ASCII text' file stored as ' simple1.html ' that displays when you click the above link:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 
      <title>A Simple Web Page</title>

</head>

<body>
A Simple Web Page<br>
<br> a bit of miscellaneous text <br>
<br> an updated link:&nbsp; updated on Friday, 15 December 2006 at 22:18 p.m. <br>
</body>

</html>

You'll note that I have made some 'HTML "Tags" (those things that look like this:  <title>   </title>) bold, and some are left non-bold.    This is me, not the html editor software - and the web-browser-client-software doesn't care, this is done solely to make things easier for you to read.. 

You should also notice that these "tags"  are in 'pairs' - some of which are 'nested', and if you are able to understand and see this 'structure' then you are well on your way to becoming a good HTML programmer / coder.    IF you need help, just e-mail me at: bill@vikingasia.org and I'll try to help you out.

Here's a (very short) explanation of the above items - (there are really only four) - and how they work...
the very first line is " <!DOCTYPE ... EN"> " which is a message to the web-client-software on the version (4.01) that it is to work with
now - here's a 'quick-keep-sake-note' - EVERY web-page will have all three of these sections - they may have MORE (a more complex web-page) but they will always have these three - and - just by finding and viewing these three sections you can 'understand' the web-page more easily!


Once you're done viewing the Simple Web Page, just click the left-arrow or 'Back' button to get back here.

--------------------------------

Here is a link to the same  web page, as above, but with a little-bit-more 'formatting' to make it look special

Here's the 'raw ASCII text' file stored as ' simple2.html ' that displays when you click the above link:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"
           <title> A Simple (2) Web Page </title>
</head>


<body>

<div style="text-align: center;">

<big style="font-weight: bold;"> A Simple (2) Web Page<br> </big>

<hr style="width: 100%; height: 2px;">

<div style="text-align: left;"><br> </div>

</div>

a bit of miscellaneous text<br>

<br>

<hr style="width: 100%; height: 2px;">an updated link:&nbsp; updated on Friday, 15 December 2006 at 22:21 p.m. <br>
<hr style="width: 100%; height: 2px;"><br>
<br>
 
</body>

</html>

Once you're done viewing the Simple Web Page, just click the left-arrow or 'Back' button to get back here.

--------------------------------

Here is another link to the same page, but with a ' link ' in that page that you can click-on to go to yet another web-page...

Here's the 'raw ASCII text' file stored as ' simple3.html ' that displays when you click the above link:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 
  <title> A Simple (3) Web Page </title>

</head>

<body>

<div style="text-align: center;">

<big style="font-weight: bold;">A Simple (3) Web Page <br> </big>

<hr style="width: 100%; height: 2px;">

<div style="text-align: left;"><br>  </div>

</div>

a bit of miscellaneous text<br>

<br>

a ' <a href="http://www.vikingasia.org/BeachWeb">link to our Beach Web page </a>

' to another web-page<br>

<br>

<hr style="width: 100%; height: 2px;">an updated link:&nbsp; updated on Friday, 15 December 2006 at 22:27 p.m. <br>
 
<hr style="width: 100%; height: 2px;"><br>

<br>

</body>

</html>

Once you're done viewing the Simple Web Page, just click the left-arrow or 'Back' button to get back here.

--------------------------------

Try these links / web-pages - look at them - use the ' view source ' command of your web-browser, to view these simple page(s)...   Then, when you have viewed and studied them, come 'back' here to continue...




HOW to 'add pictures / graphics':

Here's a link to the same page as those three pages noted above - but this time the 'basic' page has an image embedded in the page.

Here's the 'raw ASCII text' file stored as ' simple4.html ' that displays when you click the above link:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>A Simple (4) Web Page</title>

</head>

<body>

<div style="text-align: center;"><big style="font-weight: bold;">A
Simple (4) Web Page<br>
</big>
<hr style="width: 100%; height: 2px;">
<div style="text-align: left;"><br>
</div>
</div>
a bit of miscellaneous text<br>
<br>
a ' <a href="http://www.vikingasia.org/BeachWeb">link to our Beach Web
page</a> ' to another web-page<br>
<br>
<br>

<img alt="" src="SM.corner.sm.w.jpg" style="width: 400px; height: 412px;"><br>
here's an embedded image in this simple (number 4) web-site<br>
<br>

<hr style="width: 100%; height: 2px;">an updated link:&nbsp; updated on Friday, 15 December 2006 at 22:29 p.m.

<br>

<hr style="width: 100%; height: 2px;">

<br>
<br>

</body>

</html>

Once you're done viewing the Simple Web Page, just click the left-arrow or 'Back' button to get back here.

------------------------------------

Here's yet one more link to another page with an embedded image, and that image is - itself - a link to another page

Here's the 'raw ASCII text' file stored as ' simple5.html ' that displays when you click the above link:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>A Simple (5) Web Page</title>
</head>
<body>
<div style="text-align: center;"><big style="font-weight: bold;">A Simple (5) Web Page<br>

</big>

<hr style="width: 100%; height: 2px;">

<div style="text-align: left;"><br> </div>

</div>

a bit of miscellaneous text<br>

<br>

a ' <a href="http://www.vikingasia.org/BeachWeb">link to our Beach Web
page</a>

 ' to another web-page<br>

<br>
<br>

<a href="SM.corner.lg.w.jpg"><img alt="" src="SM.corner.sm.w.jpg"
 style="border: 2px solid ; width: 400px; height: 412px;"></a>

<br>

here's an embedded image in this simple (number 4) web-site

<br>
<br>

<hr style="width: 100%; height: 2px;">an updated link:&nbsp; updated on Friday, 15 December 2006 at 22:29 p.m.

<br>

<hr style="width: 100%; height: 2px;">

<br>
<br>

</body>

</html>

Once you're done viewing the Simple Web Page, just click the left-arrow or 'Back' button to get back here.

----------------------------------------------------------

A short lesson in Internet (Image File)  Etiquette:
Once you learn this lesson and can remember it every time you insert an image or a link  to an image or a digital movie into your web-site you will be well on your way to keeping the network bandwidth down and your user's experience 'up' so they will be 'happy campers' to visit your web-site(s).   This is not to say you should include NO images in your web-page(s) but you need to be careful to learn good etiquette and techniqe in order to reduce bandwidth use and keep your users / viewers 'interested' in your web-page(s).



Now - you know everything there is to know about how to make 'simple' web-pages and how to embed images in those pages and how to link from your 'simple' web-page to some other places...



Building - Editing: Frames-Based-Web-Pages:
Click here to go to the 'Frames Tutorial'.   Frames Based Web Pages are more complicated to write (at first); but eventually you'll understand they give you (the author) more flexibility and give the viewer / user more, faster, easier navigation and utility in their web-experience viewing your site / pages.  The "Frames Tutorial / Introduction" is a separate web-page and is not - in itself 'Frames Based' but has some links to some good examples.



2.) FTP the file to the server:

This is where your understanding of the FTP process / software begins to be 'key' to your efficient use of time and network bandwidth (especially if you are using a slow (dial-up) connection... The 'activity' (the verb) of moving a file from one place to another 'manually' (by directly 'interacting' with the software (FTP) and/or even with a GUI is a key component of your web-presence and your ability - as a person, with some skills and knowledge, to keep your web-site current, active, useful and productive for those who view it.

There's really 'very little' in terms of your 'needs' here - you simply (in 99% of all cases) want to move the file(s) you have created and/or edited from your 'home-based 'editing machine' to your web-server at a distant location.    Once your file(s) are there on the server, then someone, somewhere, (anywhere, actually) in the world, with an internet connection, can access those files you've just FTPd to the server.

The 'KEY' component of this 'activity' is that you UNDERSTAND a 'directory or file structure' on BOTH your home-editing-computer as well as on your WebServer computer.

A 'KEY' to this 'understanding' is sometimes helped, a bit - with a 'picture'...

I'll build this picture with text-words to make it easer to see, but if you do NOT 'get the point' make sure to ask questions because if you don't understand this - the people viewing your web-site will get the dreaded "File Not Found" error and that is something you hope to avoid abusing your web-site-viewers with:

ON your 'home-editing-machine' - you might want something like this:

Some 'main-level' directory is your 'home-base' regardless of your computer-platform (Windows, Macintosh, Linux-Unix)  lets just call that directory 'joeuser' where 95 % OR MORE of your 'personal' files will be stored, and the directory called 'joeuser' is most probably going to have been set-up-for-you when you (or someone else) created your userID on your computer.

So - let's assume you're in the 'joeuser' directory:

   you want to 'make a (new) folder' (or new directory) probably called something like "Sites" or "WebSites" ...

so - if you look at that 'path' it should look something like this:


on Microsoft Windows (most any recent version)  it might be something like this:
        c:\Documents and Settings\joeuser\Sites


on Apple's Macintosh "OS "X"" operating system (which is really a form of (BSD) Linux) it might look like this:
        //Macintosh HD/Users/joeuser/Sites     <== this directory structure is actually placed there for you by the operating system when the userID and it's directory is created


On  a Linux or Unix computer it might look like this
         //users/joeuser/Sites/         or - even - perhaps                   //home/joeuser/Sites


Now that you have your 'Sites' directory, you can build / put / create new web-pages within that directory simply by creating new folders (directories) inside the 'Sites' folder (directory) and  - within each of those folders - create a whole web-page.

you might want (initially) to create - say - three web-pages:

   Personal
   Business
   Hobby

so - (using the Macintosh example from above  - here's what things might look like

then - once you create a set of ...html files (on your home-editing-machine) - those files might show up like this
(again, using the Macintosh example)
Now - that we've helped you through this 'logic' a couple of notes...

1.) the 'index.html' is a 'common' file-name for the first-file that is loaded when a server looks in a particular directory.   In this case the 'index.html' is the file that the Apache web-server-software uses.  Since Apache has about 80% of the market share for web-server-software; other companies that build web-server-software have also begun to use the 'index.html' as the first file to open when the web-server-software looks in a directory on the web-server.  So - That's what we'll call that first file to load in any directory (remember studying URLs way up above!)


2.) the '...hmtl' is the most common way that Linux-Unix (Macintosh) computers name files - with a four-character extension.   ONLY Windows computers use three characters (...htm) in their file-names ....   Be Forewarned, though, that for compatibility that even Linux-Unix computers can read and understand the three character extension system(s)...      BUT Windows will not 'digest' four character file-name extensions.   Again, - just a bit of 'web-trivia' - more than 2/3 of the world's web-server-software / web-server-computers / web-server-hosts are 'Linux-Unix' computers - some are Microsoft Windows computers but their numbers are declining.

 In 'general' you want a web-server-computer to be very very reliable (especially if you have a hundred web-sites on a given computer) so most are Linux-Unix, not Windows, simply because Linux-Unix is more reliable, stable, it's 'up-time' is considerably higher than that of a Windows-based web-server...


We've been talking 'mostly' here about what your 'home-editing-machine' directory-file-folder structure looks like.  When you move files from your local computer to your web-server-computer - you need to have an understanding of how the 'directory-file-folder structure' is on that computer, also.

IN ORDER TO "Keep It Simple, Stupid" - Mr. Bill does something VERY STRANGE here, - he makes the directory structure on the remote (web-server-computer) look JUST LIKE the directory-file-folder-structure on his LOCAL computer.

AND - yes - this works VERY VERY Well if you have only 5-10 web-sites that you deal with / keep up / edit files for.   It will not work (well) if:

    a.) you support 20-50-100 web-sites
    b.) you use a LOT of Java, php, perl, J, PostGRESQL, MySQL,  in your web-pages (that is if they are really complicated) etc. etc. etc.
    c.) have an extremely complext web-site (you probably won't get there reading THIS web-site)
    d.) you have a VERY small hard disk on your LOCAL machine and a LOT of images (which tend to be big!)


O.K. so here is how you want your   """ Web Server Computer's """ file / folder / directory structure to look like. 

On 'about 90%' OF ALL Web Hosting Company's machines - you'll see  the 'root'  (or 'home') directory on your server will be named something like this: '.../joeuser/public_html   (we're assuming you're using 'joeuser' as your Web Hosting Company account-name)


Underneath the '.../joeuser/public_html' directory (Folder) - you will most probably want this sort of arrangement (assuming you are using the //Macintosh file - folder - directory 'structure'...
This 'same directory structure' on your home-editing-machine AND on the Web Server will make your life much easier in terms of remember where things are and where files should be...

When editing your files on your 'home-editing-machine' you make selections, insert images and links all relative to the local-directory in which your ...html or ...htm file resides.   IF you put or 'fix' the 'base' of your web-page in a particular directory (as noted above) and name your 'initial' file  """ index.html """, and put all your  files in that directory - folder, then you will remember where everything is and you'll create web-pages that are easy to design and easy to debug because your web-server's file-folder-directory structure is the same in both places.  

ONE of the biggest obstacles that most people have with web-server / web-site work is that the directory structure in the two places (home-editing-computer and web-server computer) is different, therefore harder to understand.  One of Mr. Bill's methodologies for keeping it simple is to engage in this 'trick' and it really really helps your understanding and keeping things straight...

keep this 'little trick' in mind, and if you have questions, make sure to ask- that's what I'm here for.!!!




3.) VIEW the file from the server, with your browser software.

Your web-browser-software is 'most probably' one of the following software tools:
 Regardless - the 'generic' name for this type of software is a "Web Browser Client".

By using the web-browser-client on your computer to view / browse your recently edited, completed, FTPd  web-page, you are 'testing' the web-page to make sure:
 Your web browser client software is typically NOT the same software that you use to 'edit' the ...html file.     NOTE that this CAN be the same software but it is typically not.    Some software is really good at browsing (viewing web-pages).    Some software is really good at editing web-pages.    VERY FEW pieces of software are really good at both.    If you find one that is really good at both, then let me know, because I have not yet found that nirvana (yet)?  The only one I know that DOES do both - and a passable job of each is the Mozilla browser / Composer, noted above...



The only thing left to do, now, is to share your web-page-access-URL with your friends, relatives, family members and other hangers-on who want to view your web-page / site / etc....


updated: Fri_17Sep21; revID: 2f