You browser does not support JavaScript, or it is not enabled.
The functionality of this site requires enabled Javascripts.
  Refresh: http://ronaldreed.com/bynumber.htm Contact: Webmaster Step Map
Posted: 
Learning Web  Pages by the Number - Page 1
[ Formally a site on the discontinued "njseniors.net" domain ]

101 Steps  to Designing Great Web Pages
( Steps 1 through 19 )
• SIG Home Page • Page 1 • Page 2 • Page 3 • Page 4 • Page 5 • Reference Page • Link List •
This  series of steps is being composed to assist you in the design of an HTML webpage.
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Top |
For best viewing with Internet Explorer browsers, set font with View/Text Size to 'Medium'
When the line below matches the line above the font size is correct for this page.
Start • Steps 1-9
Preliminaries		 Steps 10-19
Creating Page		 Steps 20-39 Steps 40-59 Steps 60-79 Steps 80-101 Link and
Image List		 Member
List

Step 1 - Getting Started with the right tools.

 Next Step - Online Support Sites
Click Black Text to Align the Page Next | | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 20 | Up | Top
To navigate to a specific Step, click a "Top" link, then click the "Step Map" link.
Step 1 - Start • Select your editing tool and its location. 
  •  You will have to decide on a media to use to construct your files.
         We will suggest a text editor. The reason being we are interested in your understanding the HTML coding, not how to use any of the many "HTML Editors", like Microsoft's Front Page.  It will be helpful, if we who are providing help, know what environment in which you are editing. 
     Moving thru the pages!
    Remember: You seldom need to scroll these pages!  Did you read "Click Black Text to Align the Page"?  Did you try it?
         		Moving "upward" on the page can be accomplished by using the BACK feature of you browser.  Right click the  non-text space , then select 'Back' to move up the page. The use of the icon will return you to the top of the current step.

    Instructions Step 1:
      Recommended: Download the NOTEPAD+.EXE editor to your computer.
    Why this editor?  You decide.  Which of these text editors would you prefer?
     Microsoft's NOTEPAD.EXE

     or RogSoft's NOTEPAD+.EXE
        We suggest you SAVE the text editor program, Notepad+.exe, directly to your Desktop.  If you SAVE the program elsewhere, please establish a "shortcut" to the NOTEPAD+ editor on your Desktop.
      Click here to download NOTEPAD+.EXE.
    Alternative:
        Use the NOTEPAD.EXE program provided with the computer operating system.  DO NOT USE a word processor program, such as, MS-WORD.EXE or WORDPAD.EXE.  You will have authors and various sites tell you that you can use a word processor.  Go ahead, take a WS-Word document, open it and save it as an HTML file.  We are not interested solving all the code problems you WILL encounter using word processors and HTML "generators".  The usage of HTML "editor" are NOT HELPFUL in learning HTML by beginning students trust me!

        Have you noticed that the "ruler line", seen above, is an indicator or separator,
    that defines the different "page alignment" segments above and below it.
        The image is used to align the text to that line in the page segment.

    Summary Step 1:
        We have our editing tool, NOTEPAD+, a simple text exitor, in an easily accessible location ... right on the Desktop.  You should realize that the viewing of this site is a "point, click and align" page alignment schema.

        There is a reference page for all links and images presented.  The links and images ares present in serial sequence as they appear in each step.  Thus, this "Linklist" page can be used to seek that images or link in the site.  Try it.

    Linklist - <http://ronaldreed.com/linklist.htm>

    • Step 2 - Online Support Sites

     Next Step - Writing your first web page
    Next | 1 | | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    A reminder: To navigate the page you can click the black text to align the page.

    Step 3 - Writing your first web page

     Next Step - Surfing the Support Sites
    Next | 1 | 2 | | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    I don't have room on the page width for a "sidebar".  I guess this is a called a "topbar"!
    Step 3 - Lets write and execute our first web page.
  •  A web page is just a text file with special naming extension.
         How easy is it to write a web page?  Your webmaster could edit a file with a one space defining character; give it an extension of ".htm" when he saves it, then ask the "browser", commonly Internet Explorer (IE), or Netscape (NS), to display the web page.  A web page with one blank character is not very interesting.
    View:

    Instructions Step 3:
       But, you will write a more impressive first web page.  This is what you will do:
    1.  Open the text editor. That is, click on the NOTEPAD+ icon on the Desktop.
    2.  Click the "white folded upper right corner icon" (new file) on the tool bar. The toolbar is the third line on the window.
    3.  Type   This is my first web page.   in the white "workspace" field.
    4.  Click the SAVE icon (the third icon, a diskette image) on the toolbar.
        In the Save Dialog Box
      1.  Adjust the  "Save in:"  field so it reads  "Desktop".
      2.  Type in the "File name" field the file name   webpage.htm .
      3.  Then click the "Save" button.
    5.  Close the text editor.
    6.  Find and click the  "webpage.htm" labelled icon on the Desktop.
    Summary Step 3:
        Well, that was simple.  Wasn't it?  Now, you understand that a web page is just a simple text "filename" file with a special extension, either "filename.htm" or "filename.html".
        The web page you edited is nothing but straight "text". A web page file contains only two types character strings in the file.
        One type of character strings is as you see, pure text.  The other character strings are called HTML tags, and they begin with a "<" character, and end with a ">" character.  It is the knowledge of these HTML tags, and their use, is what we have to learn.

    • Step 4 - Surfing the Support Sites

     Next Step - Web Page Definitions and Termonology
    Next | 1 | 2 | 3 | | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    The through links launch separate web pages.  Close these pages to return!
    Step 4 - Well, now it is time to get serious about your learning HTML coding.
  •  Here is a little on-line surfing and reading you should do.
        We are not going abandon our efforts to provide you with a step-by-step set of help in construction of your SIG web page.
        What is needed now is for you to "browse" through these tutorials on web page design.  Each will present information in a different manner.  In surffing through each site, find the sites which seems to be one which you find understanding.  We are not expecting you to use these site, and start coding your web page during this exercise. Be patient, we will get to coding soon. Thank you.
    Instructions Step 4:
        It is NOT IMPORTANT that you understand all the information, terms, and details that is presented in these site.  What IS IMPORTANT is that you don't get discouraged and give up on your quest to learn how to construct web pages.
    http://www.hotwired.com/webmonkey/kids

    http://www.boogiejack.com/html_tutorials.html

    http://www.ipl.org/div/kidspace/kidsweb

    http://www.goodellgroup.com/tutorial/chapter1.html

    http://www.ilearnhtml.com/lesson/lesson1.php

    http://www.pagetutor.com/pagetutor/makapage/index.html

    http://www.billybear4kids.com/htmlhelp.htm

    and HTML 4.0 Specification which is the "W3C" HTML standards site.
        In directing you to the above reference, there will be appropriate information relative the topic.  There may be additional information displayed.  Read what you wish, but then return to our site to continue your "steps".

    Summary Step 4:
        Well, that was hopefully informative. That was all we expected.  In the latter steps this sequence of images will link to each of the above sites:
     
     In this way, all our references are a "click" away.

    • Step 5 - Web Page Definitions and Termonology

     Next Step - Our Free Web Page Constraints
    Next | 1 | 2 | 3 | 4 | | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Hey!  If you have not surfed the web page tutorials in Step 4, then why continue?

    Step 6 - Our Free Web Page Constraints

     Next Step - Policies for Page Acceptance
    Next | 1 | 2 | 3 | 4 | 5 | | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    A "free" web page has it limits.  But be assured our constraints are not that restructive!

    Step 7 - Policies for Page Acceptance

     Next Step - Upload Page Procedures
    Next | 1 | 2 | 3 | 4 | 5 | 6 | | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    What are the "can do's" and "cannot do's" ?
    Step 7 - The requirements for interfacing with the NJSeniors.net host.
  •  Rules and polices for placing a web page with NJ Senior.net.
  • You must register as a SIG member.
  • Your web page is to be used as a learning media (with exceptions).
  • No commercial use of your page is permitted.
  • The usage of links to other Internet sites is permitted, but will be critiqued.  Example: This link is premitted:
     http://www.mapblast.com.
  • There is a limitation on images uploaded on the SIG site.
  • Utilization of images that are referenced from the Internet is permitted.
  • All images retreived from the Internet will be critiqued.
    Example: This image is secured from a non-SIG server.
  • The SIG webmaster reserves the right to exclude content of your pages.
  • The depth of HTML coding is limited to elementary
    coding techniques.
  • All rights and priveledges are granted by the SIG webmaster.
  • The SIG webmaster reserves the right to change the rules and procedures.
  • The SIG webmaster reserves the right to exclude individuals from the free site offer.
    • Instructions Step 7:
        If you have not seen this web page before, then you may surf the links on
    "John Doe's Web Page".
     "John Doe's" page has a number of entities that are displayed.
  • A title for the page. Its Internet address and his "pseudo-email" address.
  • A table full of links, he coded the page without underscoring them.
  • It is evident that he checks out stocks on the "market".
        Sure he has is broker provided utility, but it takes too much time.
  • It appear he has a spelling problem as he has a Dictionary link.
  • He uses a lines to send email, and some pages to secure maps, etc.
  • He likes to be aware of his potential weather, as well as friends.
  • He has a TV next to the computer but hate to miss programs.
  • He often catches up on hometown news from it local paper.
  • He has links for use in his Web Page Design studies.
  • He has some sites for help regarding the Internet.
  • There are some good search engines. A webcam site,too.
  • He easily found a graphic off the Internet to use.
    Summary Step 7:
        Regarding our free web page offer:

    "Don't abuse it and you can use it!"

    • Step 8 - Upload Page Procedures

     Next Step - Replacing the Initial Holding Page
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    What is done to make the Web Page, and get it on the Internet?

    Step 9 - Replacing the Initial Holding Page

     Next Step - Secure Your Initial SIG File
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    When will you be able to place your page on the internet?

    Step 10 - Secure Your Initial SIG File

     Next Step - Modify, Save and Run Your File
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Let's Get Started with the Authoring Your Free SIG Web Page!
    Step 10 - Secure your initial SIG Web Page provided by NJSeniors.Net
  •  We will provide your initial HTML code so you can get started!
        Well, just to get you started we have written an elementary HTML file. Please note the following about the "text" seen within the "textarea" below:
  • There are five blocks seen: HTML, HEAD, TITLE, BODY and H1.
  • There are two text strings: "Yourname Web Page" and "My Web Page"
  • Did you notice that all the blocks are embedded within another block except the HTML block.
  •  The TITLE block is inside the HEAD block.
  •  The H1 header block is inside the BODY block.
  •  The HEAD and BODY blocks are serially in the HTML block.

    It's a HTML rule:
        HTML coding is "blocks-within-blocks" with no exceptions.

        What is an interesting fact about HTML, is that if you don't "end" the blocks properly, the browser themselves will "close" many of the "unclosed" blocks.
        We will encounter HTML blocks that must have a closing tag.  An example is the TABLE block. The reason is simple, the browsers cannot process the TABLE block until it is close.

    Instructions Step 10:  Code you first Web Page
  •  Open your editor (click the Notepad+ icon on the Desktop).
  •  Arrange the browser and editor's windows so you can see both windows.
  •  Highlight (or use Select All) and Copy the entire code in the textarea above.
  •  On the editor's toolbar, click the "Create a new file" (first) icon.
  •  Next, Paste the text into the editor's work space.
  •  Use the editor's Save As to save your "yourname.htm" file on your Desktop.
  •  Close your editor.
  •  Click the "yourname.htm" icon on your Desktop to see your initial web page.

    • Summary Step 10:
        What did you see when you "ran" your webpage?  It should appear as a large text phrase "My Web Page" with black text on a white background.     View: 
    Did you note the text seen in the broswer's Title Bar.
        We are no longer going to document the procedures of securing your file off the desktop for your Notepad+ editor. Nor are we going to document saving your file, nor using your browser to view your file.
        We will ONLY ask you to open, edit, "cut and paste", change, add or delete code, and save your file.  We will provide "textarea" boxes to help with coding.  You may need to "cut, paste and modify" some code.

    Step 11 - Modify, Save and Run Your File.

     Next Step - Defining Font Color and Size
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Create and save yut fiste web page

    Step 12 - Defining Font Color and Size

     Next Step - Understanding HTML Blocks and Statements
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Character appearance is provided by set so fonts
    Step 12 - Add FONT Color= elements and FONT Size= elements.
  •  Learning textual fonts with size and color is a necessity.
        The use of HEADING blocks has its own features.  They are presented on a separate line, in bold form, and followed by a blank line.
    Instructions Step 12:
        Replace the HEADING block with a FONT block.
        Note the presence of the "comment" tags.

        Note: All text used within HTML coding can be of uppercase, lowercase, or mixed case (with a few exceptions).  Why?  The browsers read the file text and convert all of it to lower case.  How do we know that is true?  It is because of the lowercase of the "exceptions"!  One of the exceptions is the space chatacter, "&nbsp;".

    Summary Step 12:
        One thing you may note is that the "case" of the text of an HTML tags is of no importance.  Almost all text used is converted to lower case.  HTML coding could be a "mell of a hess" is the editing require case sensitivity.
        There are exemptions to this "case sensitivity", especially in the strings used for specific characters.
        Note the difference in text for between     and Align

    This is the "arial" FONT: A a B b C c D d ... 1 2 3
    This is the "ms sans serif" FONT: A a B b C c D d ... 1 2 3
    This is the "ms serif" FONT:  A a B b C c D d ... 1 2 3
    This is the "courier" FONT: A a B b C c D d ... 1 2 3
    This is the "times" FONT: A a B b C c D d ... 1 2 3
    This is the "verdana" FONT: A a B b C c D d ... 1 2 3
    Align
    This is your browser's assigned FONT:    
       Each viewer's browser may have
    different assigned fonts.    		 A a B b C c D d ... 1 2 3

    • Step 13 - Understanding HTML Blocks and Statements

     Next Step - Define Head and Body Blocks Functions
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    HTML consists of two types of statements: Text and HTML Tags

    Step 14 - Define Head and Body Blocks Functions

     Next Step - Define Text and Background Colors
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    The Head block contains browser instructions.  The Body block present the web page.
    Step 14 - Understanding the function of the HEAD and BODY blocks.
  •  An HTML file is a outer HTML block that contains two major blocks.
       HTML files are similar to programming languages, but it is not a true language.  The HTML file is just a sequence of textual statements that is read by special file processors called a "browser". The browser reads the statements serially, and interperated them, then process the HTML tag statements, and displays the non-HTML text strings.
        The first block is called the HEAD block. Like a human being, the HEAD block defines the controls for processing the file.  Nothing in the HEAD block is seen on the page except for the textual content of the TITLE block.
        While the HEAD block manages the processing that the author wants the browser to do while presenting the file, the BODY block actually contains the content of the page, and has the control tags to do its presentation.
        In otherwords, the HEAD block is the mental aspects of the file, while the BODY block is the physical aspects of the file. Thus, the rational for the names, HEAD and BODY blocks.
    Instructions Step 14:
        At this point it is important that you know this procedure.  How to observe the HTML code of your web page file directly with your browsers.  This is accomplished by use of the Menu Bar's VIEW command. Clicking VIEW will produce a "dropdown" box (sort of a sub-menu). Among the choices there is one that relates to viewing "Page Source" or "Source".
        The Netscape browser with launch an addition window displaying the text of the file, but you can not change nor ever "mask, and copy" the HTML code viewed to the system's "clipboard.
     Align     The Internet Explore browser launches a NOTEPAD.EXE window with the file code contained.  This permits "mask and copying" and all other NOTEPAD functions. It will permit saving the file, but does not allow saving to an internet source of any file.
         To view the source code, click the following image, then use your borwser's VIEW and "Source" choice.  Click the source

    Summary Step 14:
        The best source of HTML code for learning to code HTML are all the millions of files that are out there on the Internet.  Most of the files are not protected from viewing, but it is possible to do so.

    • Step 15 - Define Text and Background Colors

     Next Step - Add Margins an Center File
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | | 16 | 17 | 18 | 19 | 20 | Up | Top
    So far our page has the "default" colors, a white background and black text.
    Step 15 - Add BODY block's TEXT= and BGCOLOR= elements.
  •  Would you like to be a more colorful web page author?
        Our page can be easily colored.  The background can be colored with "fixed" shades of color.  There is three types of parameters that can be assigned to the different "color related" HTML tags.  At the moment we are presenting two of the elements, TEXT= and BGCOLOR= (background color).         Reference:
        The three forms of argument are:
  • Hex (hexadecimal) arguments, where "#FFFfff" " is white,  "#000000" is black, "#654321" is this color, "888888"   is this color, and "abcdef" is this color. Align
  • Literal "constant" color arguments, like ":
    red", firebrick, tomato darkred.
  • Non-constant literal arguments, like "tom", dick, HARRY, or even Estela.
        Did you notice that Tom and Harry were not very colorful.  They can honestly blame their parents.         Reference:


    • Instructions Step 15:
        Let's assign our background an orange color, and our text a navy color.
    Both of these "element=argument" text string are placed within the beginning BODY tag.     Align
    Before editing:
        After editing:
    Align     Do I have to remind you to "Save" your file to the desktop?
        I hope by this time you have found out that if you positon your editor window and your browser window such that you can see both, then you don't need to close them between editing and viewing.  With both the editor and broswer showing
        a) click your editor; make your edits and SAVE, then
        b) click the browser and Refresh/Reload to view the effect of the edits.
        Note: Since all the "color" elements are assumed to have literal arguments, the literal may be stated with the use of double quotes, or not.
        Literals that include a space, like the FACE="ms sans serif" argument of the FONT tag, must be double quoted.
    Summary Step 15:
        We now know some of the secrets to being more colorful author.
    Before     , and After .  Check the source code of both files.

    Step 16 - Add Margins and Center File

     Next Step - Add "Refresh and "E-mail" Links
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | | 17 | 18 | 19 | 20 | Up | Top
    How can we position the text in our page?
    Step 16 - Add a text margin BLOCKQUOTE block and CENTER block.
  •  Positioning and presenting the text on our is simple!
        The default for the presentation of text is "left justified". We can position both text and graphics by use of various "alignment" arguments within tags, or use of various "alignment blocks".  Here we will study two "alignment" blocks.
        The <BLOCKQUOTE> ••• </BLOCKQUOTE> block is used to provide "margin indentations", like we use in many hardcopy documents.
        The <CENTER>> ••• </CENTER> block is used to provide center the presentation in the center of the display area.
    Instructions Step 16:
        Our page before our edits     .
        Insert Blockquote block:
        Check the "school solution": .
        Check the source code from your browser.
        Replace Blockquote block with a Center Block:
        Check the "school solution": .
        Check the source code from your browser.
    Using the "textarea windows" and "constant color literals":
        Bet you have not noticed that the "textarea" window is "dynamic", meaning the contents can be altered right NOW.  Try this!  Change the color of the text element to some other color. Then, change the background color.
        Here is a link to a page that presents the defined literal colors coded into most browsers.     Constant literals Align
    Summary Step 16:
        The <Blockquote> and <Center> HTML block are just two of many techinques used to align text.

    • Step 17 - Add "Refresh and "E-mail" Links

     Next Step - Document the File Update Date
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | | 18 | 19 | 20 | Up | Top
    Let's look at the two HTML "Anchor" blocks
    Step 17 - Add both a "Refresh" and an "E-mail" link.
  •  Let's look at the HTML coding for links.
        What is a link?  As the word implies, it it a "way" to connect with either another window file on your computer or a file on the Internet.  The second form of link is to another computer, such as your e-mail utility.  There are links to other entities, as an example, you used a link to download the Notepad+.exe.
        In HTML coding, links are provided by a tag called an "anchor block".  For our first use of a link will be to "refresh" our current window.  We can use a link to link to a graphic.

        If the link is to a graphic which is "dynamic" (time dependent), such as this one,     Align


    http://ichart.yahoo.com/b?s=KLAC Align

    your computer may have a "prior time-dated" image in its stored cache of images if you had displayed it previously.  So the graphic is "old", and not recent.  We thus need to "refresh" the image and make the "call" the resource again.
        This graphic is a "PNG" file, and is quickly re-generated by Yahoo! every few minutes.  This graphic is "dynamic" while the stock market is open.

        It is not uncommon to find "e-mail" links on a web page.  This form of link (anchor tag) contains two elements, the "mailto:" directive string, and an "e-mail address".  The anchor will send the "e-mail address" element to your computer's default e-mail utility.  In our effort not to effect an e-mail we will hopefully use an "invalid" email address.  The syntax or form of the Anchor block is shown below:
    <A href="mailto:webmaster@notme.net">  NJSenior.net webmaster </a>
    Instructions Step 17:
        First.  What we are going to do is add to our web page, a link which will refresh itself.  Second, we are going to add an email link to the author.
        Let's assume this is the page-to-date.  See     and View source, then 'BACK'. Align

        First.  What we are going to do is add an anchor to our web page, a link which will refresh itself.  Second, we are going to add an email link to the author.
     Align
     See school solution: and View source, then 'BACK'.
    Summary Step 17:
        Above are examlpes of the most common link, a linkage to another window, and "mailto:" linkage to permit the system to initiate an e-mail to one or more e-mail addresses.

    • Step 18 - Document the File Update Date

     Next Step - Upload Your Page to the Internet
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | | 19 | 20 | Up | Top
    Why don't we date document our page date!
    Step 18 - Add an "Update:" javascript.
  •  How can you document when your page was written or updated?
        Currently we are displaying a title for your page, the web address of the file so we can refresh it, and an email address.   The next thing we might like on the page is the last time the page was written, changed or update.  If that is what you want then you would have to add a textual statement on the page.
        Using any of these three date gets to be a problem as we have to remember to change the date in the code.  If you will accept the following suggestion, you will have "a date" altered automatically.  This date may or may not reflect any of the dates memntion, but it will inform you of the date it was upload to the Internet.
        This is called the "posted date" for the window, i.e., the date on the "server", which is where the source of your page is located on the Internet.
    Posted: Monday, February 02, 2004 10:14:38
        Before inserting the posted date's "javascript" code, we will have to decide where to place the date.   Let's put our posted date at the "bottom" of our page.
        How can we insert some vertical spacing on our page?  We could add a series of "break" statements.  We use an HTML "statement", which is a tag that needs no "terminating" tag. A "break" is what ia called a "carriage control/line feed".  When using a typewrite, this term reflected the use of the metal arm on the typewrite to rotate the carriage up one line and move it left for the new line.  So, we could use the following code.
      <BR><BR><BR><BR><BR><BR><BR><BR>
        There is a slight disadvantage to using the Break tag. That is because the vertical spacing is a factor of the FONT character size. The viewer has full control over the FONT size when using browsers.  But he has no control in altering the appearance if images on the page as image sizes are define by the author at design time.
        So what we want is an image the will lenghten the page, yet not be seen.  Many authors use an image that is "clear", i.e., it has no color.  What is used is a common one pixel image.
        Since the HTML "image" tag can have its width and length defined, we can use the tag documented below.
    <img src="clear.gif" width=1 height=100>
        Once we have provided some vertical spacing, we can add an HTML "script" for the posted date.  The "script" code we will use is HTML, but the "Javascript" is NOT.
        What our code does is request a third party's computer programming language to execute a "program", namely Sun Corporation's language called "Java".
        In this case, the Java code retrieves the posted date from the internet "server", and sends it to your "browser".  Only then can the browser display the date on your page.  Below is the HTML "script" that we can "cut" and "paste" into our file.
    Align
    Instructions Step 18:
        Before editing: (we documented where the inserts should be placed)     Align

        After editing (which is as easy as "copy" and "paste" code from here):     Align

    Summary Step 18:
        We have provided a method of documenting when our page was placed on the Internet.  This dating of the pages is automatic.  We presented a method of displaying a fixed vertical height on the page.  We illustrated the clear image which can provided a varity solutions to some of out needs.  If we had used a series of BReak tags the height could be varied by the viewer by altering the font size at display time.  Viewers can not alter images size, but authors can!

    • Step 19 - Upload Your Page to the Internet

     Next Step - Continue on to Step 20
    Next | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | | 20 | Up | Top
    This Step 19 is on the Page 1 of 5 pages (Steps 1 through 19)
    Step 19 - Let's put our first page on line!
  •  Our page is Titled, has color and text, and dated for an Internet upload!
        So far we have worked on "our" page.  Now is the time that you start "your" page.  For simplicity, let's not change things to far from what we have done.  Next, we want to get out preliminary page on the internet to replace the initial page the SIG group provided.
    Instructions Step 19:
        Below is a textarea of the HTLM code we have written.  You can make editing changes in the textarea, save it with the filename you wish.

        What is it that we can change.
  •  You can re-Title "your" page.
  •  You can provide "your" E-mail address in the link.
  •  You can select a different font and size.
  •  You can alter the spacing to shorten or lengthen your page.
  •  You might wish to have the "posted date" centered.
        Next thing to do is e-mail your file as an attachment to the SIG web master.  Following his review, you file will be uploaded to the your folder on the SIG server.
        The Internet provides for default file name of the folder's "home page". If your browser is not specifically given a filename to seek in the folder, it will look for a file named "index.html".
        The SIG web master will upload your file an give it the filename of "index.html" .
    Summary Step 19:
        Well, that was not too difficult, and you now have web page on the Internet.

    • Next Page | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Continue on to Step 20
    To Step 20 (continue)
  • Step 20 is located on another physical page!

    Due to quantitiy of the materials the 101 steps are presented in five pages.

    Page 1
    Steps 1
    •
    •
    •
    Step 19

    Page 2
    Steps 20
    •
    •
    •
    Step 39


    Page 3
    Steps 40
    •
    •
    •
    Step 59



    Page 4
    Steps 60
    •
    •
    •
    Step 79




    Page 5
    Steps 80
    •
    •
    •
    Step 101
    Common Reference Pages

    Step Map
    Steps 1
    •
    •
    •
    Step 101

    Link List
    Steps 1
    •
    •
    •
    Step 101
    Reference Page
    •
    •
    •
    •
    •
    		   
    • Next Page | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top
    Posted:
     


    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top


    1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Up | Top