pixel.gif (42 bytes)Home | Instructor | Listserve | Web Discussion Board | Toolkit

PC Webpage Design: home | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML Resources
pixel.gif (42 bytes)
Creating a Simple Text Only Webpage
pixel.gif (42 bytes)
You have opened the DiDa software application using the procedures appropriate for your computer and should have the blank html document window open on your monitor.
  1. Hold down the left mouse button while you drag across the words Created with DiDa between the <TITLE> </TITLE> tags…be careful not to include the > <’s! (The words should turn blue).
  2. Hit the Delete key to remove the words and type Test Webpage in the space between the title tags.
  3. Move the cursor down to the line below the first <BODY> tag and type the following:

    (Your Name)’s First Webpage (hit the Enter key)

    This is my first webpage. (Enter)

    I am taking TEC 3008 at Fresno Pacific University. (Enter)

    Bob Jost is the instructor. (Enter)

    Here is a link to the White House website. (Enter)

Your webpage should now look like this:

We will now apply the HTML tags necessary to enhance this simple webpage (HTML document). The DiDa software will assist with this process. Hint: You may want to check the steps off as you work your way through the list.
  1. Hold down the mouse button and drag across the words (YOUR NAME)’s First Webpage. (The text will turn blue.)
  2. Click on the Font button in the toolbar at the top of the screen. A pop-down menu will appear.
  3. Click on Bold (<B> tags will appear on either side of the text you highlighted telling the browser to display this enclosed text in Bold type.)
  4. Click on the side of the screen to clear the selected text and hold down the mouse button and drag across the words (YOUR NAME)’s First Webpage again… only the words, not the <B> tags! (The words will turn blue.)
  5. Click on the Header button in the toolbar. A pop-down menu will appear.
  6. Click on H1 ( <H1> tags that appear will tell the browser to display the text in the largest type available.)
  7. Position the cursor at the end of the line after the second <B> tag and hit the Enter key.
  8. Click on the Format button in the toolbar. A pop-down menu will appear.
  9. Click on Horizontal Line (a <HR> tag will be added telling the browser to display a Horizontal Rule, a line across the webpage, to separate the text from the rest of the words on the webpage).
  10. Hold down the mouse button while you drag across the last 4 lines of text remaining…don’t include the ending tags. (The text will turn blue.)
  11. Click on the Header button again and select H2 from the pop-down menu. (<H2> tags that appear will tell the browser to display this text in the second largest type.)
  12. Position the cursor after the first <H2> tag and hit Enter to move the text down a line.
  13. Position the cursor before the second </H2> tag and hit Enter to move the tag down to a separate line
  14. Your Screen should now look like this:

Next we will add some hypertext links to our simple webpage to create links to other sites on the World Wide Web. Again, you may find it helpful to check off the steps as you proceed.
  1. Hold down the mouse button and drag across the words Fresno Pacific University. (The words will turn blue.)
  2. Click on the Link button.
  3. Click on Remote Sites in the pop-down menu that appears.
  4. Be sure that the http:// button is checked.
  5. In the form (white box) at the top of the dialog box, complete the URL (internet address) by typing www.fresno.edu after the http:// (be sure that you don’t leave any blank spaces!)
  6. Click on the Ok button at the bottom of the dialog box. (This will add an <A HREF=> tag to the highlighted text and create an hypertext link to the Fresno Pacific University website.)
  7. Hold down the mouse button and drag across the words Bob Jost. (The words will turn blue.)
  8. Click on the Link button, select Remote Sites and http:// again and in the dialog box, enter this text following the http://

    www.josts.net/bob
  9. Click Ok. (Another <A HREF=> tag has been added creating a link to the instructor’s website.)
  10. Hold down the mouse button and drag across the words White House. (The text will turn blue.)
  11. Click on Link/Remote Sites/http:// again and type

    www.whitehouse.gov

     after the http:// (This creates a link to the White House website.)
  12. Click on Ok.
  13. Position the cursor after the word website. and hit the Enter key to move the cursor down to a blank line.
  14. Click on the Format button and select Horizontal Line to insert another <HR> tag at the end of the webpage.
  15. Position the cursor on the blank line below the <HR> tag you just created. (you may need to hit Enter to move the cursor down a line.)
  16. Type your e-mail address on the line.
  17. Drag across the e-mail address while holding down the mouse button.
  18. Click on the Link button again. Click on Remote Sites and this time select the mailto: option.
  19. Enter your e-mail address in the form and click on Ok. (This will tell the browser to open a compose mail form addressed to you when someone clicks on this link.)
  20. Your webpage should look like this:

You are no doubt anxious to see what your webpage is going to look like. DiDa has a great feature that allows you to do this at any time. Click on the Preview Screen tab on the lower left-hand side of the screen and your new webpage will appear on the screen looking like this:

Moving the cursor over the hypertext links should cause the preview screen to display the associated URL (internet address) in the lower right hand corner of the screen. Resist the urge to click on the link as you are not online and you won’t be able to follow the link just yet. Clicking on the tab labeled HTML Document will take you back to the HTML source code screen. Do that now.

This would be a good time to save the webpage you have created. Follow these steps to save the html file.

  1. Click on the File menu and select Save (or just click on the little floppy disk icon in the tool bar.)
  2. The Save As dialog box will appear.



  3. In the File Name: box, replace the *.htm with test.htm (Note: The file must be saved with the .htm suffix!)
  4. Double-click on the a:\ folder under the word Directories/Folders:
  5. Double-click on the root folder (it should turn blue)
  6. Click on OK. (the file will be saved to the disk)
  7. Check the path in the top bar of the screen when it reappears. It should read A:\ROOT\TEST.HTM
  8. If it doesn’t, go through the save procedures again.
  9. Close the DiDa application (click on File and then Exit).

Testing the Webpage
  1. Log on to the Internet.
  2. Open your web browser.
  3. When your browser has loaded, click on the File menu
  4. Click on Open File. (Note: Some web browsers just have an Open option.)
  5. Navigate to the a: drive under Drives: (the folders in the a: drive should appear under the Directories: a:\)
  6. Double-click on the root folder (the test.htm file should appear in the box on the left.
  7. Double-click on the test.htm
  8. Your new webpage should appear in the web browser window looking similar to this:

Dragging the cursor across the screen you should note that the links are active. (The cursor will change from an arrow to a little hand and the URL displayed in the location screen at the bottom of the browser should change as you move over the links you created.) Clicking on each of the links should take you to that website. When you are confident that your new webpage is functional, close your web browser and log off the Internet.

This is not a particularly sophisticated webpage but it serves to introduce some of the basic HTML tags that you will be using. In the next activities, you will develop increasingly complicated webpages.

I would like to see your first webpage. You can send it to me via an e-mail message. Here’s how:
  1. Open DiDa and your test.htm webpage
  2. Click on the HTML Document tab in the lower left corner of the screen (if it isn't already selected).
  3. With the test.htm webpage displayed on the screen, click on Select All from the Edit menu.
  4. Go back to the Edit menu and select Copy (be sure you don’t accidentally select Cut!) This will copy the webpage to your clipboard.
  5. Click anywhere outside of the highlighted text to unselect it.
  6. Save the test.htm file and close DiDa.
  7. Log on to the Internet and open your e-mail software application.
  8. Select Compose Mail and address a message to me at: bjost@josts.net
  9. In the Subject field, type: webpage B
  10. Move the cursor to the Text: field.
  11. Go to the Edit menu and select Paste.
  12. The source code for test.htm should appear on the page.
  13. Send the e-mail message.
  14. Log off the Internet.
  15. Record the date you sent the message in your Logbook.

Note: You can also send test.htm as an e-mail attached file if you would prefer to do it that way.

 

 pixel.gif (42 bytes)

website maintained by Bob Jost | bjost@josts.net | last modified May 28, 2001
Copyright © 1997-1999 by Bob Jost All rights reserved