Beginner's Web/HTML Authoring - Part I

This page was last updated March 4 1997.

This page is a beginner's look at HTML authoring. This page first leads you to creating a simple page that uses a link in one web page to display another web page. From there it provides direction and support material to building a more complete home page that potentially links to numerous other pages.

Houghton@wcuvax1.wcu.edu

What is Source Code?

Authoring really begins with learning to use the Web. This experience makes an examination of the source code for a web page more understandable. Spend some time browsing, following the links and buttons of the Web pages.

If you feel you've had sufficient experience browsing, you've probably acquired enough background knowledge to take the steps below in order. Take a few at a time, take a break and come back for more and soon you will have your own web. To author, you first need to learn the hidden commands that change the format of a web page and create links to other locations.

  1. Print out this web page of directions and then follow its directions at the computer.
  2. Next, click sample link for a quick example of a link to a page that will bring you back to this spot.
  3. Every browser will have a way to look at the source code for any Web page. Find it and use it now to see the source code for this Web page. In the browser's menu bar (e.g., in NetScape or Internet Explorer), click on View and drag down to Source. In order to display the source code, Netscape starts another application which then takes control. Internet Explorer just displays the code without starting another application. Scroll down this source page to find the lines of source code that just connected with the sample link in the previous step. You are looking for a line of code that begins:

    Note carefully the commands between the less than and greater than symbols, for they do the work of linking and other special formatting features. The large boldface font represents the source code. Though displayed as one continuous line on the Web, this code will be discussed as three separate actions. The A NAME line serves as a special flag or anchor to a point within the document. The LI command forces the paragraph to be numbered the way this menu listing has been set up but in an unordered list will only put a bullet in front of the line. It is the next line that you need to focus on now. The A HREF line tells the Web browser to fetch another page and where and what to fetch. The A stands for Anchor and the HREF stands for Hypertext REFerence. Note that some lines begin with A and then end with /A. The / marks the end of a procedure or command. Also note the special position of the words sample link which will be underlined by the Web browser to indicate where to click.
  4. Finally, close this source code page.
  5. Use the MultiFinder icon in the menu bar to switch back to your Web browser (Netscape or whatever) page and the web page that contains this writing.

    How Do You Get a Printout of the Source Code?

  6. Let's go back to that same sample link and look at its source code again, but notice what numbered item you are on now. You will have to scroll back down to this number in a moment. Click on sample link again. Using what you just learned, look at the source code for this simple second document. Save this file to your diskette using the file name it is given, samplelink.html.
  7. Print this source code page:
  8. Next, return to the browser application which should still be displaying the sample link web page. Print out this browser display view of the page. Compare the two printouts to determine which part does what. Note carefully which text appears on the display of the page and which text only appears on the source code page. In the source code printout, use your highlighter pen to highlight just the HTML code (code invisible on the browser display page) that created the link to get back to this document. There are many times in which you will want to print the Web formatted display of the page itself, and compare it with the source code, the hidden part that creates the design for the page.
  9. (Note that you can use the Copy command to also capture the HTML patterns you see in other web pages and move them to your own word processing or HTML editor files for your own web pages. Then you can edit them to suit your needs and save them within text files with a .html extension to make them Web ready.)

    How do I Create My Own Web Pages?

  10. First, on your diskette, create a folder using your last name as the name of the folder but begin with the word Web. For example, my folder would be WebHoughton. The files that you create should go in this folder. [Note: never ever put spaces in folders or file names that will be used on the Web. The servers may be unable send your files.]

  11. Now it is time to create your own Web page, index.html, with links that retrieve another page, page2.html. This will be an overly simply design, but it demonstrates the basic concept of linking.

    Use a text editor (e.g., SimpleText or HTML Editor) to open up the samplelink.html file that you just saved to your disk in the steps above. Mac users should start the application called HTML Editor and save the samplelink file you been looking at into this new folder but when you save this file, change its file name to index.html. In this index.html file we are going to place two lines. The first is a simple hello statement which titles our first page so we know where we are when we arrive. The second line will contain the command that calls page2.html. If necessary delete source code already there or modify it so that it matches that displayed the box below.

    The P command at the end of the first line above forces a line feed and a skip of the next line. That is, it forces a space between lines. Close and Save this file, index.html, once this data has been entered.

  12. Repeat this process to create page2.html. That is, again open the samplelink file from within your HTML text editor and modify it to display the text below.

    Close and Save this new file as page2.html and save it into the same folder that contains the file index.html.

    How do I Know that the Source Code Changes that I just Made Really Work?

  13. Once two files have been created, we will test them out using a Web browser. We will use the browser to open first the file index.html. Once this page is displayed, it will await only your click to display the page2.html web page, which will in turn link you back to the index.html page.

    Start up the your web browser program or switch to it if it is already in computer memory. From within the browser, click on File in the menu bar and drag down to Open File. From within this dialog box find your diskette and your Weblastname folder and open it. From there open the Index.html file. Once this web page is displayed, click on its only link to test it. Each page should now call the other if its only link is clicked. If you add more links to new pages in the file index, this file is then referred to as a home page, a table of contents to other pages. The entire Internet Web is built upon just such linked documents. The inter-linked documents seen this semester have had much more content added and formatted then the simple pages you are practicing with now. The relevance and usefulness of this content establishes the relevance and usefulness of the Web.

    Take a Break from Creating and Reflect

  14. While browsing the web, use Save As or the Print instructions given earlier to keep copies of source code and screen displays of home pages that you like. These can serve as models, as a future resource for your own development. Put the printouts in a three-hole notebook. Note that most web page printouts do not include the web page's online address (its URL). Carefully note a document's online location that is generally displayed at the top of your Web page. Sometimes this feature must be turned on from menu bar commands. (In Netscape, under Options in the menu bar is the command Show Location.) These electronic locations of a page are called URL addresses. URL = Uniform Resource Locator.
  15. To make it easier on your eyes, take a highlighter pen and mark up source code in your source code printouts to distinguish between background code and display content.

    Return to the top of this page.
    [Up] [Pageauthor Houghton@wcu.edu] [College] [University]
    Evaluate this Web page!