Refresh - http://www.passco.com/sn_intro.htm  Updated:  Spell Check
Introduction - What is a Web Page?
( Author's Notes )

   What are these notes? Well, they are things the author wanted to say in class and may have. They are things that he forgot to say. They are things he should have said. They are things that he would have/could have said if there was more time in class. These notes are printable off your browser, and will not be provide in hard copy form.
 Try first, then to Return
Note: A close response may close your browser if this page is independently called.
Overview of an HTML File___ (Use underscore to check off presentation)
   Personally, the taste a scratch built chocolate cake is usually better than one from a Better Crocker box. If you don't think you can scratch bake a cake, then what would your guests think when you serve your cake for dessert.
   HTML is not that complicated. There are elements of HTML to understand, like what goes into a cake. There is a set of rules to follow, like how to put together the elements for a good chocolate cake. Like, in baking cake, you can make a lousy cake if you don't know what goes into a cake, and don't follow the basic sequence of the baking process.
   So, if you want to be a good HTML designer, wouldn't it be better to know what goes into making an HTML file, and the order that must be used. When you do, then you will become a better "cook", and HTML coding will be a "piece of cake".
   In addition, you will be proud of what you serve for your "dessert".

File Content___
   The content of an HTML file consists of two types of textual strings. One type is called HTML, and the other is "not". The strings that are HTML are not seen on the web page, and their function is to display the text strings that are not HTML.
  1. ___ Text
       HTML files are simply textual character files with a specific extension. The extension is how the browser knows these text files are a special kind. Thus, an HTML file can be edited with a simple text editor.
       There are two types of text strings in an HTML file. One type is called an HTML text string, or "tag". They constitute what is called "HTML language code".
       The other type of text string is the one that appears on the web page. So, the text found in an HTML file is either a "tag", or is "isn't". It is the "isn't" text type that we see on a web page.
       Next, what is a text character and what is not?

  2. ___ Numbers  ___Characters
       Text files are composed of "characters". There are no "numbers", i.e., none.
       Multiple spaces are reduced to a single space except when within quotes. Browsers insert a "space" at the end of each line of HTML code unless told not to do so. So, if an unwanted space is displayed, the correction is done by physically altering the source code.
       If addition spaces are desired, there are a number of ways to insert them. The most common way is to use the case sensitivity character string, " ". There are other special character strings, like the one mentioned here for a space. These are the only strings in HTML coding that are case sensitivity.
        The character text within HTML tags is not case sensitivity. Thus, upper case and lower case text characters only make sense when not contained in a HTML coding tag. There are one exception to blank insensitivity of characters in within HTML tags. They are URL addresses for some Internet servers.

  3. ___ Our First Exercise. What is a number? Are numbers real?
       A number is a "mental" entity. Our "numeric characters", like "1", "2", "5", "V", "||||" and "textual word strings", like "one", "two", etc., only represent our concept of a number.
        In that sense, numbers are not "real". Characters are real symbols that we use to represent numbers.

  4. ___ HTML tags
       All the text strings that we call HTML are strings that are commands to a browser. The browser reads the statements in a serial fashion and execute the command that these statements indicate. That is why we call this type of program an "interpreter". A browser opens the file and reads the statements just once.
       Thus, a browser is not a program like other packages. Yes, it may appear to run a series of activities, like animated graphics, scrolling menus, changing clocks, etc,. In reality, the browser initiates other aspects of web page programs, like Javascript, applets, media and video players, and other programs. So, what is the structure of these HTML text strings.
       Well, you will soon notice that all HTML tags begin with a "<" character, and end with a ">" character. With this little bit of information, how do you suppose a these non-HTML text string appear. You right, non-HTML strings are just plain text. These strings appear on the monitor as text. As an example, the text that you are reading in not HTML.

  5. ___ blocks  ___non-block Tags
       There are two types of HTML strings. One is call a "block" tag set (consisting of two tags). Those HTML strings the consist of a single text string, are called a "statement". An example of a statement tag would be a comment statement, like this:

    <!---- This is a comment statement tag --->

    A "block" consists of two tags. One at the beginning of the block and contains the "block command" and "elements". An HTML block has a tag that indicates the end of the block. Some of these end tags are required like "</TABLE>, but many at optional, like </TD>.

  6. ___ Beginning block tag, "<command element=......>"
       The first tag of a "block" is similar to all computer command. It has a "command" indictor, and one more addition strings called "elements".
       "Elements" are assignment statements. That is, elements are composed of three parts, the element "name", and assignment symbol ( "=" ), and an "argument". These are many forms that an argument may take in structure.

  7. ___ Ending block tag, "</command>"
      The ending tags of a "block" contain an indicator of its type by replicating the command of the block proceeded by a "slash" character. For example: </TABLE>, </TD>, </FORM>

  8. ___ Elements  ___Arguments
       Here are a few examples of "elements" with their "names" and "arguments". Note that all arguments should be literals, but if not explicit, then the browsers assumes they are literals.

    background="http://www.passco.com/images/passco.gif"
    face="ms sans serif, arial"
    bgcolor="#FF0000"
    width="90%" height="100" border=1 valign=top

  9. ___ Required Text and Tags
       Well, there are no HTML tags required in an HTML file. That's correct. An HTML file does not require any tabs, nor even an HTML extension. As for text, all files, HTML or not, require "something" just to be a file. And, since an HTML is a text file, it must contain some text (at least, one character).

  10. ___ Minimum content for an HTML file.
       A file consisting of a single "space" is sufficient to be an HTML file. Click here to verify this fact. To find the single character, move the mouse to the upper left corner and "highlight" the code at that point.

  11. ___ Is HTML a Programming Language?
       No, it a true sense, it is not. It is more like a "report writer", in that the browsers read the file and produce a memory held file that displays what is shown on the monitor. This includes animated graphics. But, the browsers have additional programming that when enabled can set aside memory that provide a programming environment. These processing portions are called JavaScript and Applets. Recently, there is another type of processing that provides a "dynamic" presentation. This is called "Flash" processing.

  12. ___ What is a browser! (a course in itself)
       A "browser" is like a woman in the mall doing her "window shopping". Her husband has not given her any money, so she can only look. The designers of a browser has a constraint placed on them in order to make a browser.
        Browsers are not allowed to change any files they process. They can't write anything, they can't make a sound (not even make the "bell" sound), they can only look (read) a HTML file. Based on what the see in the file, they can initiate other utilities and command capabilities, like Javascript code. They can put "cookies" in your "cookie jar" (file), but that is because you let them. But, this class is not given in the kitchen, so "cookies" are of no interest to us right now.

  13. ___ Can browsers process all files?
       Of course not. They are designed to process only text files. But, since the can not change a file, they are likely not to change non-text file.

  14. ___ Why are browsers called browsers?
       Historically, in the era of early computer programs, there were programs that could only read files, and they had names like "browser.exe" or "list.exe" .

  15. ___ Are all browser alike?
       Well, you can compare all browsers in the same way you can compare all four door sedan automobiles. Of course, browsers are to function in a similar manner, but of course, they are not all exactly alike. There is an HTML set of standards that browser suppliers are suppose to follow, but many facets of all browser differ in how they implement these standards.

  16. ___ How "smart" is a browser?
       Well, they are smarter that most of us. They will do for us what we forgot to tell it to do.

  17. ___ What determines what you see?
       Two things, the HTML file and the browser. All browsers read the same HTML file, character by characters. But, every browser process the same statements as it is designed. And, not all browsers are the same.

  18. ___ What you, the designer, can control!
       As an HTML web page designer you have a presentation of your page that you wish you viewer see. What is hard to except the fact that there a limited number of thing you can control. You have control of the color of text, but not the format displayed. You have control of what graphics you want to display, but you may not have control of the access of the graphic file. You do have control of table structure and in most cases the width of pages. What you desire your page to present pages what you wish you must code in a manner of supposed defaults of the common browsers.

  19. ___ What you, the designer, can not control!
       Most of the presentation of you page is not under your absolute control. You design may expect a particular form, the viewer may not have that font accessible to his browser. The senior viewer may decide he or she can not read the small print size you used to design the textual presentation. Even different browsers have the same named font, but one may be slightly larger than those of another browser. You may configure your page for a larger monitor configuration than what the viewer chooses to have on his computer.

  20. ___ Where is the interpretation done?
       So, what determines the appearance of that great page that you worked so hard to make just perfect. Well, you don't have much. You can be very disappointed when you see you page displayed on a computer other that the one you used to define the appearance of the page. Thus, the presentation of your pages is generally independent of you. It is totally dependent up the environment of the viewer.

    ___Disclaimer Reference
    ___ http://www.passco.com/vhsdisclaimer.htm
       The author has a generic "Disclaimer File" that he used for numerous web sites. Read it. In addition, there are many many factors not mentioned in this file. Two different browser, both reading the same file could or will present you page in a different manner. ALWAYS VIEW OUR PAGES IN ALL BROWSERS AND MONITOR CONFIGURATIONS ACCESSIBLE TO YOU.


  21. ___ Internet access required at this point
       At this point in a sit down class environment, the remainder of this page requires access to the Internet. But, if you are reading this on the monitor you already have access to the Internet.

  22. ___ File Generation
       There are numerous way that Html file are produced. Some word processing packages, like MS-Word, have a FILE / SAVE AS option to save the word processing file content as an HTLM file. There are specific programming products called HTML editors, like Front Page, that produce HTML files using tool bar buttons, if you know when and which buttons to push.

  23. ___ Generators (Front Page)
       There are numerous HTML editors. Some are free and can be downloaded from on-line Internet site. Other are commercially available. As the level of HTML standard, these editors have to be update to be viable. Many of the editors become out of date.
       Some of our browsers have an HTML editor built into them. The Netscape browsers has a "Composer" that is very much more difficult to learn to use than spending the time to scratch edit HTML file.

  24. ___ Browser Composers
       Some of our browsers have an HTML editor built into them. The Netscape browsers has a "Cconposer" that is very much more difficult to learn to use than spending the time to scratch edit HTML file.

  25. ___ HTML Editors
       There are a number of disadvantages to HTML editors. Mamy to these "tool bar" push button program do not provide access to many useful HTML tags and their elements. Second, manually making insert of your own HTML desires. Third, the different HTML editor are incompatible with each other, even with just a change in versions of the same package. Fourth, using an HTML editor on a file originally or partially manually edited can be a "kill of death" for an HTML file.
        In many cases, in HTML editors, pushing the wrong tool bar button may create a file that you do not wish. Manually correcting or deleting code via a text editor on a HTML generated file take a lot of HTML coding. In addition to all prior stated disadvantages, HTML editor generate a lot of code.
       The only advantage to an HTML editor is you get what you are willing to pay for its constraints.

  26. ___ A study of an HTML editor site using Frames.

    http://www.tiffinstm.tld.pvt.k12.oh.us/
    This site is fairly simple for use of frames. There exist four files in the design for this page. One file defines the window layout of the top frame (heading), and the left frame (navigation) in the lower pair of frames, and it right frame (main). While viewing these four source files take note of the specific HTML editor elements in the code.

  27. ___ Control File

    http://www.tiffinstm.tld.pvt.k12.oh.us
       From the Browser's Menu Bar do View, then "source" to view the source.

  28. ___ Heading File

    http://www.tiffinstm.tld.pvt.k12.oh.us/smstitle.htm
       Right click the top frame, then "source" to view the source.

  29. ___Navigation File, http://www.tiffinstm.tld.pvt.k12.oh.us/smsnavigation.htm
    Right click the left frame, then "source" to view the source.

  30. ___Main File, http://www.tiffinstm.tld.pvt.k12.oh.us/smsmain.htm
    Right click the right frame, then "source" to view the source.

  31. ___ Word Processors (MS-Word)
       Micosoft word has a capability to store the document form. The like above will demonstrate this capability. Be aware that the reverse is not possible. If you edit the HTML file, then the original *.doc file can not be altered by a reverse procedure.

    ___Clicking the link to this MS-Word
    (  http://www.passco.com/septembr.doc ) file will cause your browser to interrupt the ".doc" extension, and direct that file to another program. It is not the browser that displays the Word's screen. If one the selects the FILE menu choice, one will find a "Save as HTML". Clicking that choice will permit the WORD program to generate an HTML file and save it.

    ___Open the file above and save it as an HTML file.

    ___View the file created.


  32. ___ Scratch building HTML files
       Building HTML files in a scratch more requires more typing, and a skill to follow the HTML tag syntax and the basic rules of HTML coding. Also, the extraction of code found in other file general are successful with just a "CUT" and "PASTE" process. Inserting HTML edited code into a scratch built file may necessitate the pasting to a temporary file for some editing before placing it in your text edited files.

  33. ___ Text Editors
       Microsoft provides a bundled text editor, Notepad. Notepad is an emulation of a simple typewriter. That ought to tell you something about its level of usefulness of a typewriter emulator, in the sense purchasing one today can be difficult.

  34. ___ Selecting a Text Editor
       Using a text editor for HTML developing requires a process that insert no addition character strings that are other that straight text. No special characters or text processing can be used. The author, after a number of year of usage, has found NOTEPAD+.EXE just the package for daily HTML development. Having found the enhancement tool bar elements added to the Notepad emulator, Notepad+ is the great thing developed since sliced bread. There is only one "crumb" that I have found when using very very large files. The editor will permit the editing of the very large files, where Notepad is limited to less that 64K files, there is a flaw of Notepad+ in its "Find and Replace" feature which does have a memory limitation that is short of the maximum file length. The first solution is to save the file before a find/replace is defined. The second solution, if necessary, is to split the file in to portions, make the change and reassemble. This is not a commonly used constraint as a manual edit is sufficient to accomplish minor changes.

  35. ___ Comparing Editors - http://www.passco.com/b3three.htm
       The above link will provide a graphical comparison of the initial working windows for Microsoft's Notepad.exe., the Notepad+.exe, and Microsoft's Wordpad.exe . The usage of Wordpad.exe for HTML editing is not desirable due to the possible insertion of special character string that are not appropriate for presence in an HTML file. DO NOT USE WORDPAD OF HTML CODING.

  36. ___ Basic Skills Course  ___http://www.passco.com/basic3.htm
       The author does have a tutorial about learning Notepad+.exe . As a project for illustration of Notepad+, the author leads you through the editing of an HTML file for this page, Sample.htm. The link to the author's tutorials is provided above.

  37. ___ Notepad
       Microsoft's Notepad is a simple text editor, but is sufficient for a designer who does a limited number of web pages. It is the author' opinion that NOTEPAD+.EXE is an enhanced text editor that give to a HTML development tool that you can not afford to ignore.

  38. ___ Notepad+ (download)
       In the middle 80's, a package was developed to enhance Notepad. The addition of a number of word processing features without changing the end product, a straight text file output, has made "Notepad Plus" a viable text editor.
       To obtain a free copy of Notepad+.exe use the link above. For class purposes the file could be saved on the DESKTOP. For a permanent save use the Program Files folder.

  39. ___ File Location
       Where are you going to keep your HTML file. Well, it is obvious that they can be stored on your local personal computer. Without an access to the Internet, all the resources to display a complete page. With Internet the file can be maintained on the local PC and access any resources local to the PC and the Internet. Many HTML files are designed for other to view the pages remotely from your personal computer. Thus, you must place the file on a "server". Uploading the file requires the usage of a "File Transfer Protocol", or FTP utility. The Winsock WS-FTP utility is free for non-commercial users.

  40. ___ Local to your PC  ___Resource Location
       If you have not obtain assess to a "server" to hold your files, you can maintain HTML file that are essentially used for you private use. With access to the Internet your private HTML file can access resources on the Internet. The Internet resources, if available, will be returned through your ISP access, and be displayed by your browser.

  41. ___ Internet location and access
       If you have an ISP which can provide you a web site "as a client", or you have an ISP host an Internet domain, then there is a location on a server such that others on the Internet can access your HTML files.

  42. ___ ISP access accounts  ___Domains and Hosting
       Domains are purchase from companies that can initiate your "unique" location on the Internet. This requires assigning an IP address that indicates which server hold your HTML files. These IP addresses are a set numerics, and they provide a routing sequence throughout the Internet. The computers beyond your ISP server are called "routers" and "switcher". It is these computers that transmit your request for resources, and returns them to your server. Your server then transmit them to your computer, and your browsers displays as a page on your monitor.

  43. ___ Page Availability
       HTML files on an ISP server, or on your personal computer, will all make requests for resources. These resources may be your supporting files. The supporting files can be graphic file, other HTML files that one access via an "hypertext" link. Some of the resources are even on other ISPs on the Internet. It is the gathering of the resources that is the job of your browsers. The browser reads your HTML file, and develops a list of the resources it need. If the resources is local to your PC that is where told to retrieve it. If the resource is remote, the browser makes a request of your server to go get them. The servers tell the routers, the routes send out a request to the servers containing what you need. It is the remote ISP server that when sends the resource file back through the routers to your server. You servers send the files to your PC. The display of a page is then the browser job to display the page according to the HTML tags and text.

  44. ___ Page Unavailability  ___404 Error
       If for some reason, these resources are not available your page may not display what you desired in its design. The inaccessibility is most like due to the fact the server holding that resource is not on-line. If for some reason the server IP address requested is not longer on the Internet, or the resource you requested for a valid server is not on the server, you will get the "404 Error - File Not Found" page.

  45. ___ Resource Access Errors
       If a resource, like a graphic file resource, is not available your browser will attempt to display the resources that were accessible, and provide indications that the resource was not accessible.

  46. ___ Making a "HomePage" on my PC at Home
       Ok, lets have some fun. We will make a web page.

  47. ___ Viewing HTML File Source Code  ___Why?  ___How?
       When a browser accepts your file and displays it to the point that it had done what it could, it will display on the "status bar" that it is "Done" or "Document Done". Since everything must be on your browser to be process, you can view the file source of the cold.
       Why would you wish to view the code. Your best source for learning HTML code is to look at the code of a successful page. If there is a page that displays in a odd way, you can find the code that does it.... be it good code you would like to use, or to discover the bad or lacking code on that file.
       How do you display the source code? Click VIEW on the browser Menu Bar, then find the choice the read "Source" or "Page Source". With Internet Explorer the source file will be display via Notepad.exe. In Netscape, the source code will be display in a new launched window. In this window you will only be able to browse the code. You will not be able to change the file or even do the Cut-and-Paste function.

    ___View this file: http://www.passco.com/nscape.htm

    ___View the HTML source code of the http://www.passco.com/nscape.htm file.


  48. ___ Viewing HTML File Resources  ___Why?  ___How?
       Since your browser had read through the HTML source file, which it does in an instant, and compiles a list of all resources, why can we see what is needed. Well, we can.
       How is this done? Clicking VIEW on the browser's Menu Bar, then selecting "Page Info" or the appropriate choice on your browser. At that time a page of data will appear that will provide the "link" pages that may be need. At this time it will not seek these pages, but the browser now know what that are if you click a link to them. In addition, there is a list of graphic file, which it did have to retrieve form the address shown.
       Why would you like to know this information. Well, for one thing you may be able to determine what resource was not accessed and where it should be. Maybe you coded statement is wrong and you can find your erroneous coding. You can also determine where the resources should have been, but is no longer there. In the file below, see what graphic resources are involved.

    ___View the graphic resources needed for the http://www.passco.com/nscape.htm file.


  49. ___ Some Simple HTML File Examples
       Let's look at some HTML file.

  50. http://www.passco.com/sample.htm
       This page is about as simple a page as on can make. Why not look at the source code. If you go to this tutorial page you will find a tutorial about using Notepad+ and making this page.

  51. ___ http://www.passco.com/tuit.htm
       We all need a "tuit". This page is a file using a table. Note that if you move the mouse in adjacent area on the left and right of the centered graphic and text, one sees an indication of a "link". But, there isn't a graphic, or is there? Maybe, it is a large amount of blank or black text on a black background (called and "invisible text" link). How would you find out what permits a link in these areas.
       What is the function of this page in addition to a little "humor"? Move the mouse off the image and see! Note the credit given for the tuit.
        The Ewing Seniornet logo can be credited to Carrie Guenette when she was making making banners at Carrie's Banner Factory.

  52. ___ http://www.passco.com/banners.htm
       This site has a banner icon show in its normal size. In addition, the same icon is presented in a smaller size. One must consider how much you can reduce the size of an icon that contains text.
       The lower graphics are "table HTML graphics". They illustrate the use of borders and no borders. Some show the use of a background colors (bgcolor= element) and other icons with text. Note a graphic icon whose HTML Image Tag should have been coded with Border element equated to zero. Note also that that icon is on a background. Is the background white? Is the background clear and transparent. If it has a transparent background the icon would be displayed with the pages color within the "border" area. How would you find out what is the background?
       This page has a purpose. Either capture the banner icons, or to secure the code that generates the "table graphic". How would you do the latter. (Hint: Save the page off the web. Then, extract the HTML code for your use.)

  53. ___ http://www.passco.com/calander.htm
       This site produces an annual calendar. But, this HTML will require two edit changes. First, the numeric year "literal" will need to be changed. Second, their is a variable, "var", that will need to be commented out, and another substitued. This variable has 12 elements, which is the day of the week the first day of each month. Sunday had a value of zero, Saturday has a value of 6.

  54. ___ Some Related Files Associated with Web pages
    ___ BEAS DELL KLAC PETM HCA WLP TOL THC YUM WEN WM KFT ATH ADG CPS

       Well, these are interesting links. If you want know the activity of your stock portfolio for the day, the last week, the last quarter, year or longer, then why not place access at you finger tips. DELL DELL DELL DELL DELL DELL DELL

    http://ichart.yahoo.com/z?s=dell&c=^gspc,^ixic,^dji&a=v&p=s&t=1d&l=on&z=m&q=l

  55. What parameter in this URL for a daily view would you change for a one year view?

  56. What parameter would you change to view "Pet Mart" stock?

  57. What argument would you use for the INTC stock.

    The follow locations are free online site to check your coding. Just take note that these sites can hound you to death about errors. Yes, it would be appropriate to conform to their analysis. But, if the site works, then you'll have to evaluate if the additional coding is a necessity. These programs work well for small HTML files. For large coded files there could be memory constraints that limit the process. The solution is simple, split the file and check portions.

  58. ___{Link to} Free HTML Validator - http://www.htmlvalidator.com/lite/?google=free+HTML+Validator

       This program is an on-line accessible program.

  59. ___{Link to} Dr. Watson, Version 5.02 - http://watson.addy.com/nph-watson5.cgi

       This program is an on-line accessible program.

  60. ___{Link to} Free On-line HTML Spell Checker - http://www.bcentral.com/products/spell_checker.asp

       This program is an on-line accessible program.

  61. ___{Link to} A better HTML Spell Checker - http://www.bcentral.com/products/free.asp

       This program is an on-line accessible program.

  62. ___ Possible Workshop or Project Web Sites
       What would you like to do during these sessions?

  63. ___ An "@HomePC" Personal Web Page
       Your author recently was told that the maximum storage provided by his ISP had been exceeded by 100%. His current web site has HTML sites that he desires viewers on the Internet to be able to access. But, he realizes that he placed sites on the Internet for accessing his portfolio. Being a private site, and only on your server for convince, could it be removed from the server, and still be accessible to Internet stock data. Could he make a "PC Homepage" where he could relocate the HTML files back on his home computer?

  64. ___ An "@AnyPC"  Personal Web Page
       Would it be possible to have a "Personal or Business Homepage" that is not on the Internet for others to view, yet available from any computer that has Internet access?

  65. ___ An Independent Email Address Book
       You have accidently deleted your entire address book, or you just bought a new computer, and now you need to put in all your email address into the new computer's email address book. Or, you at your cousin's home and want to send and e-mail from his computer, but your address book in your computer at home.
       Well, would it not be nice to have an e-mail address book on the Internet that is protected with a password, or the same file on a diskette in your briefcase. So, you need an HTML file that can be place on the Internet, or a diskette when you have access to your cousin's computer.

  66. ___ Make a Graphic Directional Map for your location
       Because you live in a community where you have a difficulty telling people how to drive to your location. You are making a web page that will provide a detail map and driving directions. So we need to secure a map, capture a graphic, and document the driving directions.
 Try first, then to Return
Note: A close response may close your browser if this page is independently called.



Top-of-Page


 Author/Instructor: Ron Reed, fmt@passco.com - PASSCo.com
Printed document availability: None (print it from your browser)
http://www.passco.com/sn_intro.htm

Freeback Form

Built In Validator Link
<form action="http://www.htmlvalidator.com/php/onlinevallite.php" method="post">
   <input name="url" value="http://www.passco.com/sn_intro.htm"
   type="hidden" size="30"><input type="submit" value="Check HTML Code"></form>