Macintosh Ideas Links Table Of Contents Quick Start Beginning Mac Email Start Eudora Guide Attach Files Attach Files Primer Attach Files AOL - - - - - - - Netscape Start Internet Service Providers - - - - - - - Construct Web Page Beginning HTML Fetch New Modules FAQ Troubleshooting "One" - - - - - - - Updates Plus Handy - "Frames" - Email Discussions - - - - - - - The "Alias" "Apple Menu" "Apple Menu Items" The "Desktop" "Fonts" The "Launcher" "Click Once or Twice"

Two basic technics: Construct your web page using BBEdit editing program View your web page using Netscape browser Learning: View Source Code for any web page you encounter Practice Some Skills

HTML = Hypertext Markup Language (Code) BBEdit = HTML Editor Netscape = Web Browser (HTML Code compiler) Source = HTML Code

Construction

1. Use the Basic Start Page to begin your page.

2. Constructing a web page involves
   getting yourself organized,
   starting with a good template (see Basic Start Page above),
   writing some basic codes yourself, and
   copy/paste technics (of appealing devices) with the proper link changes to fit your pages.

   

3. Getting organized is basically creating a place on your computer for your web page.
   If you haven't already done this, someplace on your Hard Drive, create a Web Folder and inside this Web Folder create another folder called images. Make sure you know "how to navigate" to this Web Folder (a common Macintosh technic).
   Create another folder, Web Site Archives somewhere on your hard drive for saving "Interesting Web Site Code" that you may want to use later.

   

4. Learn basic codes (below) for doing what you want to do - start simple and let your technics develop as you need/want to do more. The HTML devices for constructing pages are called tags. There are several excellent listing of HTML tags that one can print and have close at hand when making a web page.

   The most basic tags involve carriage returns (when you press the return key on the keyboard in a word processor). In HTML code, the computer will not read your pressed return key as such. It reads the text, no matter how much white space (space bar) or how many carriage returns (return key) you enter, as continuous text.

   To force the start of a new line, one enters <br>
   

   To force the start of a new line with an empty line in front of it, one enters <p>
   

   These two tags do not need closing tags although the WYSIWYG editors insert many useless </p> symbols into the web page code.

5. Learn to link pages together and to link inline images. These are very common technics.

   Keep all your .html files in the same Web Folder so you won't have linking problem.

   Keep all your .gif and .jpeg files in the images folder again so you won't have linking problems.

   1. Learn the HTML tags for links

      <a href="filename.html">reference words</a> (Same site tag)
      <a href="http://www.xxxx.com/location/filename.html">reference words</a> (Different site tag)

      The first part between < and > is the start of the tag. If the link is to a page on the same site (or folder), use the same site tag. If it is on a different site, the whole URL must be used!
      Don't forget to close the tag with </a>
      Notice the <start> and </stop> differ since the stop includes a forward slash.
      An example: start bold <b> and stop bold </b>
      Most HTML tags come in pairs: start and /stop.

   2. Learn the HTML tag for images

      <img src="images/imagename.gif">

      Notice that there is no closing tag for images
      Notice though that I recommend placing all your images in a folder called images and thus you seen the images/ before the image name.

      There are a couple of basic things to learn here about locating a file or image. Remember that you will store this web page on a Unix system which uses directories instead of folders. Directories function just the same so don't let the name confuse you. The important thing is that one must always tell the computer where to look for the filename.html or the imagename.gif. It will assume the file to be in the same directory (or folder) unless indicated differently.

      Forward or inside:

      Folders inside of folders (Directories inside of directories) are located with the forward slash. This Web Folder/images/imagename.gif is proper except that we are already in the Web Folder so we don't need to reference it.

      Backward or outside:

      The most basic one to learn here is to move out or backward one level (you will not need this now but remember that you have heard about it when you see it again). The tag ../ (i.e. two dots followed by a forward slash) directs the computer to move out one directory (or one folder)

      Suppose that within your Web folder, you created a second web system. Inside this web system you create a web page and you want to access an image that is in the original images folder (which is in the Web Folder - did you follow that?). The image tag would be <img src="../images/imagename.gif">. Study that one or at least remember that you saw it.

   3. Build a library of "Interesting ways to do things":
      Do not be afraid to "borrow" the code from a page that you like. "Surf the net" with a more discerning "eyes" an notice "how" things are done. When I see a technic that is unique or appealing, I save it to my hard drive in a folder called Web Site Archives. Learning how to use your web browser to do this is the topic of the View Source section of this article.

   ---

   Viewing the results

   1. BBEdit Lite does not have a "view results" of your code work as part of the program (some other editors do). I would still suggest to "view your results" using the following technics because this is the way others will access your page and you "want it to work the way you want it to work" in Netscape and Internet Explorer, the two standard web browsers.

   2. Netscape and Internet Explorer are important applications to be able to use locally on your own computer. Many people do not realize that these are applications like any other application and they can be used "without going online". Please note that statement and understand it!

      One must learn a technic for launching these applications without causing a connection to the ISP and the internet. Simply clicking on the Netscape icon on the Launcher will automatically open your internet connection and cost you online time (money and telephone line tie-up) while you work. This is why the America Online Browser is very impractical to be used as a web construction tool. With AOL3, the Web Brower is not an independent application but requires that one be "on line" for it to be used.

      

      I use all three of these technics to Launch Netscape in a personal way:

      Technic 1

      1. Make your own personal startup web page,
      2. locate it on your computer, and
      3. configure Netscape to startup from this page.

      Preparation

      1. Download this personal start page and
      2. Place it on your desktop (or where ever you like).
      

      (NOTE: Clicking on the above hyperlink (i.e. a hyperlink is underlined) will download the personal start page to your computer. If you have everything configured properly, it will expand and be in your downloads folder for you to use.
      While we are stopped for downloading, I recommend to download these two image files and place the expanded .gif files in your image folder, that you created above, so you will have some image files to work with later. ImageFile1 and ImageFile2)

      3. Configure Netscape to use this (above) personal start page:

      1. Launch Netscape (it probably will go online for now)
      2. In the File menu select Open File
      3. Locate (using regular Macintosh technics) your personal start page (from above) on your Desktop (or where ever you placed it).
      4. Click Open and Netscape will open this page
      5. In the Location window, select and copy the URL that is there (this should be the URL of the personal.start.html on your computer - if you don't understand it all at this time that is OK, just copy it using command c keyboard shortcut)
      6. In the Options menu, select General Preferences
      7. With Netscape 3, Select Appearances and notice Home Page Location
      8. Paste your URL into this Home Page Locaton and close the window
      9. Anytime you startup Netscape by clicking on its icon in the Launcher, it will start up with your local page and will not go online
      10. Go "off-line" now and try it out to see if you have done this correctly

      

      The Technic: To start up Netscape without going online and to start your local web page.

      1. Click on Netscape in the Launcher and
      2. Netscape should startup with your personal start page.

      Technic 2:

      Learn the Macintosh drag and drop technic for launching an application by dragging and dropping a file on top of the icon of that application.

      Yes, any application can be launched using the above technic. I use this technic all the time since I keep different versions of applications on my computer and I don't always want the computer to decide how to open an application by just "double-clicking" a file. (The computer will usually open the file in the newest application and sometime this is not what is desired!)

      If the Launcher is used, the above technic is easy. If a computer user does not use the Launcher, things become much more difficult and I won't even get into that here. As you can tell, I consider the Launcher a basic Macintosh tool. Go back and learn to use it if you haven't done so! Launching Applications.

      

      The Technic: To start Netscape without going online and to open a specific .html file,

      1. locate any .html file on your computer (I suggest using the personal start page that you downloaded above) and
      2. drag and drop the .html file on the icon of Netscape on the Launcher.
      3. Netscape will startup with that webpage (.html file).

      (Of course if you have no .html files on your computer, this technic is not yet possible. If you begin to build web pages, you will shortly have .html files to work with.)

      Technic 3:

      This is a technic to Launch Netscape saved bookmarks. I personally do not use this technic to Launch Netscape locally but to go to specific web sites directly.

      Preparation

      1. Launch Netscape
      2. Open the Bookmark File (command b or Window menu / Bookmarks
      3. Option Drag and Drop any Bookmark in the list to the Desktop. It will take just a moment for the bookmark alias to be created. This Netscape bookmark can be placed anywhere that you want after it is created.

         (Option Drag and Drop Technic is:
         1. Hold down the Option Key,
         2. Click on the icon of the Bookmark and hold down the mouse button,
         3. Drag the Bookmark to the Desktop, and
         4. Release the Mouse button and the Option key.)

      

      The Technic: To Launch Netscape and go to a specific web site,

      1. Double-click the icon of the bookmark.
      2. Netscape will Launch and will open the web site.

      It really works! I have a whole file of these bookmarks that I use when I want to go "online" to a specific "web site". Infact, in System 8, I have these in a "Pop-up Window". Very convenient!!

      IMPORTANT NOTE:
      Once Netscape is launched locally, any .html file can be opened in the File menu / Open File.

   ---

   Learning HTML code by "Viewing Source" Code

   This is a technic that we all use to "share" and "understand" the code that makes a web page work. It is easy to do and, with study, it can make one very aware of HTML, Dynamic HTML, JavaScript, Images, etc. technics used by web authors of any page.

   Built in to both Netscape and Internet Explorer are the tools to do this. AOL browsers do not have this tool (at least the Macintosh version doesn't have it). Another reason to make sure you are using one of the standard web browsers.

   The Technic: to view source
   The basic technic is simple but very expansive.

   To use this technic is just to use the View menu and either View/Source, View/Document Source, View/Frame, or View/Frame Source. The code is all there to be examined.

   Any part of the code can be selected (using standard technics) or the whole page can be copied by selecting all and copy (apply the technic learned on the Basic Start Page article to save any web site code to your home computer).

   What to do with copied code becomes part of a more advanced technic than is intended in this article and may be covered at a later time.

   HINT: The links have to be changed to work effectively on your home computer and the web page images have to be saved.
   HINT2: Click and hold down the mouse button on any image in any web page for some options - I think you will see how you can save any image to your home computer.

   ---

   Practice your acquired skills

   From here it becomes a matter of learning by doing in making web pages. Don't be afraid to experiment and view the results. There is much trial and error as one learns new code and how to do interesting things like "tables", "frames" and "forms" to make the web site more interesting. You have enough information to begin constructing:

   Start basic and let your technics grow.

   Build a simple web page:

   1. Use the Basic Start Page (basic.start.html) that you saved to your computer by opening it in the BBEdit application.

      I hope you know how to use the basic technics of selecting and replacing text because that is what you will do below. Select the text and replace it with new text. Do not mistakingly delete any of the HTML code tags or the page will not work.

   2. Change the Title of the Page (Basic Start Page)
      
   3. Change the same words in the Heading (Basic Start Page)
      
   4. Enter some text in the Body of the page where it says (This is where your actual web page is entered). NOTE: When you want a carriage return, you must enter the proper tag at the end of the line (you do remember those basic tags don't you)
      
   5. Change my email address to your email address
   6. Change the bogus date to the correct one
   7. Save the resulting page (Save as...) with a new title ending in .html
      
   8. Now open that new page using Netscape to view your results!

   and put in some graphics.
   

   1. Open the page you created above
      
   2. Someplace in the body of the text enter the image tag, <img src="images/xxxxxxx">
      
   3. Locate your images folder that you created above
      
   4. Notice the name of one of the .gif files that you downloaded
   5. Replace the string of xxxxxx in the the img tag with the name of the .gif file (include the whole name including the .gif)
      
   6. Save (not Save as...) your page again
      
   7. Return to Netscape and click the Reload button!

   then link another page.

   1. First, make another new page just as you made the first one and save it (with a different name)
      
   2. In the Window menu of BBEdit, return to your first page.
      
   3. Click somewhere in the body of the page (you know, anywhere between the <body> tag near the top and the <body> near the bottom) where you want the link to your new page to appear.
      
   4. Enter the hyperlink tag, <a href="nameoffile.html>LinkName</a>
      
   5. Save (not Save as...) your page again and
      
   6. Return to Netscape and click the Reload button!
      
   7. Click on your Hyperlink to see if you were successful.

   Make it all work on your local computer.

   Create a hyperlink in the second page that takes you back to the first
   Use the second image in your image folder on one of the pages
   Add more text and try some different formatting.
   Explore some of the tags for lists and tables (I will write about these later).

   Once you have a basic skill level,
   then make a real page(s) that you will want to put on a server (the topic of the next section of this article).

   LIKE THE WAY THAT YOUR WEB PAGE WORKS!
   Don't be in a hurry to be a "pro" before you know the basics but be proud of your work. When you finish your web page, check it thoroughly on your own computer to make sure the "links" and "images" all work correctly. Check it with both Netscape and Internet Explorer if you can. You may notice that you need to make a few minor changes in the code to make your web page work "as you want it to work" in both browsers. There is no substitute for a thorough check of your web page on your local computer before "placing it on the server" (the next topic - Fetch).

   Relax, have a cup of coffee and look at some of the web site source codes and some of the web sites helps links provided in these articles to observe some more standard and advanced web page technics. Thank you for reading this far!

   ---

   Back to Make A Web Page

   Onward to Placing A Page

   

   ---

   The location of this page is: http://my.pclink.com/~dthomas/macintosh.ideas/basichtmlprinciples.html
   Email to: dthomas@pclink.com (David Thomas)

   Page Installed: 23 April 98

   
   Counter Installed 17 May 98