As promised--in this, the second part, we'll use a web page editor to build your own Home web page. There are many web page editors --all design to create HTML code, automatically, as you go.  If you are familiar with using Window's or word processing tools,  you'll find that the clickables and processes of the web page editor are nearly the same. Choose your web page editor carefully. Some web page editors let you switch in and out of the HTML mode .. and this is useful because you can use this feature to better study  raw HTML code. Keep learning HTML. This language is being enhanced (viz. XML) to make it a more useful on-line processing language in the future. Because we are about to create an actual web page, I will go into many necessary details  and the "not so obvious" parts of the web page making process. The example page, below, is not elaborate. Artistic, design, content and style considerations are missing.  Obvious editing options are left to you to discover and will be ignored in this short article. On the other hand, what I have chosen to discuss, is basic .. and may not be obvious to the beginner. The downside to all this is that these details may appear to overwhelm the beginning page maker .. but remember, the process is really very simple.  The best advice I can give is to follow each step, below .. go slow .. and trying new options, first, on a practice page. Please note that some of the examples, here, are semi-active and perform as if they were on their own web page .. that is, you can click on the blue-colored text-links, while you are reading this article (assuming you are also connected to the Internet, of course). Let's get started. First we need to think about how to organize your web page resources .. so let's assume, for purposes of discussion, that we'll eventually have many images, icons and URLs .. and we need to talk about file management. Next we build a web page .. and talk about lists,  tables,  inserting images/icons, and creating links to other places in your web page and external URLs. Then comes the day when you " Publish" your web page .. and this includes testing your hyperlinks, checking  spelling, testing links, and images and, of course,  viewing the completed web page on the World Wide Web (because of length, this item is not discussed, here.) The good news is that web page editors give you opportunities to easily change things as you start to see your page developing. As a beginner, don't be overly concerned with the way your first efforts start to look or problems that you will run into. The computer is a great teaching machine. It is more important that you broad-brush your first work .. than get bogged-down in details. Do the easy, obvious stuff first, get the content down and the web page making skills will grow quickly as you ask yourself how to do this or that. Once you have a "talking relationship" to your editor and are familiar with process of building web pages .. I recommend that you find an experienced web page maker or take a class to advance your skills. The first step is to create a useful directory-file structure to manage your resources that support web page making. You'll need a folder for all of your work and resources. I would create a sub-folder called, "Test," which will be used to build and keep practice pages for exercising different HTML features.  Next I would create another sub-folder called, "Master," which is used to hold your completed,   ready-to-publish web page(s) and images that you upload to your ISP. "Publish" means to upload your web page files to your ISP (or Internet Service Provider) for display on The Internet.  Your master-folder should be kept as an exact copy (i.e. mirror image) of the files at your ISP.  (This article will not discuss the "FTP" process used to uploading files to your ISP) Side-Bar: As a rule .. always prepare your page in a "working folder" .. then later, copy the completed files into the "Master" folder .. then upload files in the "Master" folder to your ISP.  This redundancy acts as a backup in case things go wrong. --- --- --- Once you get beyond your initial web page making experiences, you'll see that you will have to manage your many web page resources. For this reason, create additional subfolders (such as: "Pics," "Icons," and "Docs" ..  etc. ) which are used to house collections of images, Icons and documents that can be used to prepare your web page content.  For example, I save interesting icons as I come across them on the Internet. Finally, create a working (sub)folder for each web page theme. The content of a working folder will look quite like it's counterpart in the master "Master" folder--but here, you are free to keep temporary backups and make changes (and mistakes) as you go. Whatever your schema, always, always, always  make backups. as you go.  We'll name our example working folder,  MyPage, in this article. --- --- --- Let's make a web page. The first question is, "Do you want to create a single or multiple page theme?"  In this article, we'll create just one page and think of it as our initial "Home page."  Not to worry, later we'll show you how to make links to other web pages. Normally, your first web page must be named, index.htm, only. This index-page is the "front door" into your web page collection. Index.htm is "The" page that is always displayed, first-- by default-- by each Client's browser as they visit your web site. Side-bar: Later, if you develop other theme-pages .. then just rename your original index.htm file to "theme1.htm" (or some such name) and create a new index page which contains links to each of your theme-pages. I'll show you how to make links to these web pages, later. Of course, you will develop your own web page management style.  But at this beginning, I recommend the following conventions. Web page and image names that appear in your HTML are case sensitive (at your ISP)  and HTML reference names *must* match actual file names, exactly.   As a rule, use lowercase file names for most web page and image files. I allow uppercase characters to appear in names of major pages, only. Remember,  even though your home computer may be case insensitive, most ISP (usually a Unix computer) computers are case sensitive .. and what works at home .. may not work at the ISP's computer.  Side-bar: Sometimes images (viz. broken icons) and sub-pages seem to disappear  after being sent to your ISP.  If this happens the reason might be a case-name mismatch, an easy error to make. To check for this possible condition, display the file names, side-by-side, using your FTP software .. and look for case mis-matches. Prefix each image/icon file name with an "x" and each document file name with a "y." For example, let's say that the web page, "yPlanets.htm," uses a picture of Mars, called "xMars.jpg"  Later, this prefix notation will cause all images and all subpages to be grouped together, respectively.  This little trick helps you visually match and locate files by name on your home computer against same-names on the ISP's computer, later.  For a small web page, this doesn't much matter .. but on a normal web site, with lotsa files, well ... Chaos! At the beginning, place all of your files (htm, images etc) in only one directory (i.e. don't separate then, now, into many sub-directories). This will greatly simplify the initial file management process. Much later, as your experiences grow and your web page becomes more complex, you'll want to structure your file system in a logical way. Right now the focus is learning to use the Editor to build a web page. Side-bar: Remember, the folder and subfolder structure in your "Master" folder must match the directory and subdirectory structure at your ISP site. If you expect to publish recurring editions of your page (e.g. as a newspaper or series publication), prefix all images and content file-names with a unique code .. lest the components get mixed with other components.  This "trick" helps you to easily identify material that needs to be checked-by-name, collected, deleted, or archived at a later time.  For example suppose you are publishing the 233rd edition of your Neighborhood Newspaper. prefix each image with "233" such as "233MurtleTree.jpg." One last comment: Web page Editors are used to create, edit, and view web pages using WYSIWYG (i.e. What You See Is What You Get) technology.  This feature is similar to that found in popular word-processing packages such as Microsoft Word and other Windows applications. These types of editors generate the "look" of your web page .. as you go. In addition, as the web page building process proceeds, web page editors automatically generate raw HTML code according to Hypertext Markup Language standards .. but the code is hidden from view. In otherwords, you do not see raw HTML code .. as you build your web page. Your focus is on using the edit features, only. (View Completed Page) How to Create and Save a New Web Page .. As a rule, you should always start a new piece of software by learning how to start and stop it .. and this is what we'll do now ! First open up your web page editor .. <Start> <Programs> <Microsoft FrontPage> .. for example: Note: Windows 97 and 98 come with a deluxe version of Microsoft's web page editor called, "FrontPage". Although this article is based on "FrontPage," a Microsoft product, I will try to make the descriptions as general as I can. To Create a New web page .. Click on the  File tag .. then click New. The New dialog box will pop up.  Since this is our first web page, select Normal Page and click OK. Immediately, the edit screen will appear (see below). Type the word "top" on the first line. "top" will be used,  later, as a bookmark. Let's quickly look at some edit options. For example, you can select (or suppress) various tool bars using the View tab and checking off the one(s) you want to use. Run your cursor across each icon and tab--pausing to view it's name--so that you can become familiar with the purpose and location. You'll find a tab counterpart for each icon on the tool bar. For example: File,  Edit,   View,  Insert,  Format,  Tools, etc. If one catches your interest, click on the Help tab and look it up. Be smart .. use the Help tab often ! To Save this page .. click on the File tab and choose the Save As option. The Save As dialog box will appear.  Note that "top.htm" file name is in the default "File Name" box.  Since we don't want this to be our file name .. change it to the mandatory index.htm .. and save it in your working folder, named, C:\MyPage. It is a good idea to save each unit of work, before continuing Side-bar: A few  ISPs manage their user's web page space differently. It is possible that your ISP might require a different name--other than the standard, index.htm, as your initial web page. Call and ask your ISP about their procedure for installing and accessing user-created web pages.  You will need the name of the initial web page, the host ID, and the path to your web page directory. Also ask if other special FTP setup codes are required (such as port number) You have just learned how to start and stop the web page editor .. congratulations !   Opening and Editing an existing web page Open the web page, again, by clicking on File tab .. then choose Open and the Open dialog box will pop up. (If necessary ) navigate to your web page folder, C:\MyPage and select, "index.htm" The page will appear with "top" written in the top-left corner of the page.  Leave it there .. we'll need it, later.  Advance the cursor to the next line. To add a "Header" message .. I want my page to open with a greeting .. so type "Welcome to my Web Site !"   then press ENTER. Side-bar: When you press, ENTER, you create a new paragraph break. Next, highlight this message with your mouse-cursor. On the tool bar (3rd line) look for the popdown menu labeled, Normal, then click the down-arrow and select " Heading 1 " This will create a standard HTML heading. To center this Heading, click on  the center-icon, to get: Now save your work. If your editor has the ability to view the raw HTML code that has been generated .. do it now. In my case (see below), I clicked on the HTML tag, located at the bottom of my Front Page Edit screen.   Editing the index.htm file To gain a little more editing experience let's display a bulleted list of names of your favorite animals. Later this can be expanded by adding more items .. or .. converting these items to  hypertext links to other web pages (Wow, we'll do this later, also). But for now .. now let's keep it simple. To Add a Bulleted List First, advance the cursor to the next line -- just below the Header-message. Click the right-indent icon .. and type,                         Here are my favorite animals:  .. <enter> Click the bulleted List, icon   to begin a bulleted list. The first bullet will be displayed. Type "Cat."  The working screen will look like: Here are my favorite animals Cat  <-- blank bullet appears.. ready for next item! Each time you press <enter> a new blank "bullet" will appear, automatically.  Enter other items--one after another--(without having to pause and re-click the bullet icon each time. For example, Here are my favorite animals Cat Dog Bird        <-- since this extra bullet is not needed,                 press <enter> a second time. to get: Here are my favorite animals Cat Dog Bird      <-- that extra bullet is deleted .. and the cursor  ends up here Besides typing a list, you can use the ol' copy and paste routine to copy text from other sources ..  just as you did in your favorite word processing package or elsewhere.  If you had chosen to create a numbered list (using the button the process is the same but the  list will look like: Here are my favorite animals Cat Dog Bird Where the number-prefix was added, automatically, each time you added an item.  Inserting additional items: Too often .. you may want to insert additonal items that you had forgotton when you first made this list. Not to worry. Just place the cursor at the beginning of the item name that is to be moved down and press <enter>.   That line and all others will be pushed down allowing for the insertion .. and .. the bullet-numbers will be automatically updated.  The same hold true for deletion. Your screen should now look like this .. and .. the corresponding HTML code looks like this (View Completed Page) Almost forgot .. be sure to Save your work By the way .. both of the bullet types have a "pull down menu" counter part under the tab, <Format> Side-bar: Bulleted listing looks easy, right? Wrong! Quite quickly you may run into problems. For example, when you try to edit a list (moving the whole list left/right, splitting a list into two lists, adding/inserting other members, adding a sub-list etc.) it may seem to fall apart .. but there is a logical process that you still need to discover. I strongly suggest that you set up a text page and practice bullet-list-editing. The time you spend doing this will save you much time, later .. and keep practicing 'till you see the (hidden) logic here. Hint(s) .. use the left/right indent icons to move the list left/right. Also try the align left/center/right icons to do the same. Don't be surprised if the list seems to fall apart .. learn to put it back together again .. using the <enter>, <enter>+<enter>,  <enter>+<shift> and <edit>+<undo) tab .. trust me .. these key combinations will become your best friend, when you want to change a list. Lets talk Tables now. Tables are arrays of cells organized in rows and columns. But  ... in Web Page editing ... They are not just for spread-sheet like arrays of numbers, anymore ! Tables are mainly used to control the layout of web page components, and organize and group content (text and images) systematically. In this example, we'll even look at putting tables inside tables .. and images inside of tables. Side-bar: HTML allows page-content to "float" around the page. For example, a display of text and images on one person's computer screen may look different on another computer screen. You can minimize (but not eliminate) this effect by using tables to control placement of your content. Uncontrolled images are especially sensitive to this effect. I strongly recommend that you place most (if not all) images inside a table's cell.  Side-bar: Because of this (necessary) effect, always (re)view your web page using low, medium, and high screen resolutions and make adjustment, as needed.  To Create a Table First, advance to the next line on your working page. Next, shift the cursor to the extreme left side margin of your page .. this establishes a known starting point .. this is is important, if you want tabled-layouts to line up, later.  Hint: Use the left-indent icon   and the left-align icon     to move the cursor to the extreme left edge of the page. Click the Table tab and select Insert Table option. When the Insert Table dialog box appears, set: the Rows field to 2 the Columns field to  2 the Border Size field to 1 <-- to produce a thin edge line Keep other settings, as is, for now .. where: Alignment .. allows you to center or left/right shift the whole table Specify Width .. sets the horizontal width of the whole table (in percent) Cell Spacing .. sets the geometric width of space between cells Cell Padding .. sets the margin-width between text and cell edges Click OK. Side-bar: Table Tip about  Table Grid  vs. Table Borders When setting the border size to "0", a dotted table-grid will be displayed to help you see the table layout .. in the edit mode. This dotted grid is only a guide .. when the page is displayed by a Web browser, the dotted grid will disappear Our first table looks like: Cat Dog Bird Cat Dog Bird   Items placed into grid cells are controlled by table/cell parameters where each cell acts (something) like a mini-page. To insert a Table inside another Table .. set the cursor inside a cell .. click once ..then click on the Table tab and select Insert Table, again (note that the last table parameters used will appear, again. Changing Cell Parameters .. In the above example, all text-content is left-justified. If you want to center the content of all cells,  first highlight the table by: Move the cursor, slowly, to the left edge of the Table .. until a black arrow appears Next dragging the cursor along the left edge of the table until the entire table turns black.  now the entire table has been selected. Click on the Table tab and select   Cell Properties. When the Cell dialog box pops up, set horizontal alignment to"Center" to get: Cat Dog Bird Cat Dog Bird   You can also change just one cell. Set the cursor in the "Bird-cell" and click, once.  Then click on the Table tab and select Cell Properties. When the Cell dialog box pops up, set horizontal alignment (of the Bird-cell only) to "Right" to get: Cat Dog Bird Cat Dog Bird   Did you notice that the small table within a table .. did not change? You can change a column of cells: Set the cursor on the top edge of the table .. just above "Cat."  When a black arrow appears, click the cursor and all cells in that column will be highlighted. Then click on the Table tab and select Cell Properties. When the Cell dialog box pops up, click on the horizontal box and set it to "Left" to get: Cat Dog Bird Cat Dog Bird   There are many other table/cell options. For example you can also add or delete rows or columns (using the "cut" option) and change table parameters such as cell color. Set up a test page to try each of these options. I mentioned that tables should be used to control images. This is easy to do: Start by clicking on the yellow-cell, below. First we want to center the image. Click on the Table tab .. then Cell Properties .. then Horizontal Alignment .. and finally click the down arrow and select the Center option.  The cursor should now be in the center of the box.  Next click on the Insert tab and select image. At this point, the Select File dialog box will pop up. Clicking on one of the listed image files (.jpg, .gif etc) to get: Cat Dog Bird Cat Dog Bird But .. the image comes in as too big .. and this effect "scrunches" all of the other cells. To resize the image .. click on the image again .. and the "handles" will popup-highlighted in the corners and mid-edges. Next click on one of the corners (only) .. a double headed arrow will pop up. Hold the mouse button down .. and the image will increase/decrease in size,  as you move the mouse. Try it! top Welcome to my Web Site! Here are my favorite animals Cat Dog Bird Cat Dog Bird Cat Dog Bird Back to the Top of the Page   (View Completed Page) Bookmarks, Hyperlinks, URLs In this last section, we'll talk about the most important feature of HTML. It is called, hyperlinking.  This feature allows you to jump to hyperlink-highlighted (blue) words/phrases on your page using Bookmarks; bring up another one of your web pages; or jump to someone else's web page--somewhere out there in Internet-land.  This last hyperlink is called a URL. To create a bookmark: Remember that word, "top" we typed on the first line of your page (i.e.located in the upper left corner)?  Using the mouse, highlight it, now .. and click on the Edit tab. Next you will see the Edit popup menu. Click on the Bookmark option and you will see the Bookmark Dialog box. Ignore the automatic default .. and enter "Top." You have just created a reference point on your web page .. and the word "top" (on your web page) will have a faint blue underline.  Any word, or phrase or string of characters appearing on your page can be used as a Bookmark using this process. This feature gives you the ability to cross-reference text, pictures and URLs. Note that the name of the bookmark does not have to match the text on the page. i.e. compare "Top" vs top We have just identified a bookmark. We still have to set up a hyperlink which points that  bookmark. First place your cursor somewhere on your web page and type in (or highlight) an appropriate phrase such as, "Back to the Top of the Page" (or some such remark) that refers to the bookmark..  Highlight it. Again click on the Edit tab and now select the Hyperlink option. The Create Hyperlink Dialog box will appear, Enter "#Top" on the line marked, "URL."   When this process is complete your phrase, "Back to the Top of the Page" will be colored, blue. This phrase becomes a clickable (Note: the bookmark, itself, is not clickable) .. and will cause your cursor to jump to the top of your web page.   In other words, this process allows you to move around bookmarked word or phrase appearing on your page--an important feature.  This bookmarks process is also used to jump to other bookmarks located on other pages which might be located on other URLs--a very important feature. --- --- --- To create a hyperlink:  The process to display another one of you web pages is a little  simpler. First decide on a location, word or phrase to queue up the user.   Highlight it.  Then click on the Edit tab. Select the Hyperlink option. When the Create Hyperlink Dialog box appears, enter the name (path) to one of your other web pages. As an example, let's assume that you have a "Bird" page, elsewhere .. and that you want users to jump to it by clicking on the word, "Bird" .. located in your, "list of favorite animals" -- that we created earlier. The hyperlink looks like this. Note - This time the bookmark "#" symbol does not appear in the Hyperlink address. --- --- --- To create a WWW-URL: Use this process to access external web pages .. located outside of your directories .. elsewhere in the world. Again the process is similar to creating a Hyperlink, above. As an example let's assume that you don't have a "dog' page .. but you want your user to access someone else's page about dogs .. say "http://www.dog.com/"   If you know the address,  just repeat the process above  and enter the appropriate URL-address.  However ... ... most URLs are very complex .. and some are rather long. To save yourself alot of grief, later, I recommend that you always logon onto the Internet, first, go to the appropriate URL of interest, then <Edit><Copy> it's URL using your cursor. Next bring up the Create Hyperlink Dialog box and Paste the copied address into the dialog box -- This URL looks like this.  This last process can be very useful to web page makers. It allows you to quickly grab URLs from the Internet and quickly paste them into your web page .. and thereby building, content .. and keeping users interested. Your Web Page now looks like:   (View Completed Page) top Welcome to my Web Site! Here are my favorite animals Cat Dog Bird Cat Dog Bird Cat Dog Bird Back to the Top of the Page   I have skipped over many web page features which can be learned quickly. I have selected, here, a few of the more difficult topics (file structure, lists, tables and hyperlinks etc.) which illustrate skills you will need to build a more complete Web Page of your own. Now it's your turn ! Tom Bruce Disclaimer: This tutorial project is due to Audrey who has quickly (among many distractions) learned to use a web page editor to create her own Home Page and to edit our Cybersenior publications. During the time we were discussing web page making, I often wished that I could show her how to do "this process" or show her " a screen example."  This is my first tutorial made using a web page editor.  I assure you that this article has "rung me out!" to get it ready for the publication date. I expect to find errors and omission a plenty .. but right now I have to put it aside until I can reapproch it with a fresh eye - tomb