HTML Exercises - Try These

Part I - Get Organized/Getting Started

• Create a folder on a floppy disk (a place to save your work)

• Inside the folder, make another folder called "images"

• Run Microsoft Word or Wordpad or Microsoft Works and start a word processing document

• Type in the HTML document according to the instructions in Part II below

Top of page

Part II - Making a simple page

• Enter the HTML tags to begin and end the page - leave a few blank lines in between these tags

• Enter the rest of this "stuff" in between the tags created in the first bullet

• Enter the HTML tags to create a "title" for the page in the "header" section

• Enter the HTML tags for the "body" of the web page

• Create a heading for the top of the page (this is different than a "title" created above!)

• Enter some normal text under the heading 

• We'll add more to this page later

Top of page

Part III - Saving your work  (Watch a demo)

• Select "Save As" from the File menu.

• (Resist the temptation to select "Save as HTML".)

• Select to save the file IN THE FOLDER on the disk you are using for the class.

• Select "Text Only" for the file format.

• Name the file "index.htm".

• Click the "Save" button.

• Ignore the warning (click "yes") that some formatting may be lost - you really do want to save like this.

Top of page

Part IV - Checking your efforts, debugging

• Minimize the word processing window (click the _ button in the upper right corner of the document window) and open the disk & folder where the file was saved on the desktop.

• A file named "index" should be listed with the Internet Explorer icon if everything was done correctly during saving.  Go back to the editor and re-save if this didn't happen.

• Double-click the file "index.htm" - the browser should open and the page should be displayed. with a bold heading, a paragraph of text and a title in the title bar of the window.

• If there are any problems (e.g. you begin an italics section but forgot to end it so the whole page is in italics), decide what the cause might be 
• Minimize the browser window (click the _ icon at the upper right corner of the browser window) and re-maximize the Word window (this may be done by clicking on the file name and Word icon on the task bar.
• Make changes
• Re-save the file using "Save as", the same file name, same location, AND responding "yes" to the warning again.
• Switch back to the browser window by clicking the Internet Explorer and file icon on the task bar.
• Click "Refresh" on the browser tools at the top of the window - this loads the newly saved version of the page.
• Repeat the steps in Part IV until the page has been perfected!

Top of page

Part V.A - Adding more features 

During the remainder of the session, try each of these activities, resave, check your work, and make corrections as needed.  As time permits, we'll do more or less of the following using HTML

• Make the title centered.

• Enter a second paragraph and make sure it displays as a second paragraph.

• Create a link to another page on the World Wide Web.

• Create a heading (bold, etc.) as a label for a list (to be created in the next bullet).

• Create a numbered list.

• Create an unordered list.

• Create a link to an e-mail address.

Top of page

Part V.B - Working Later (a major drawback)

Suppose you have saved your work, closed the word processor, and later wish to work on the file more - sounds simple enough?  It is not.  If you double click the file you created, it will open in a web browser - not in the editor!  Here is what you'll need to do:

• Open the file in Internet Explorer (double-click on the file's icon).

• Select "View source" from the "View" menu.

• Copy the HTML commands and text that is displayed (Highlight the text using "Select all" under "Edit" menu, click "Copy" under the "Edit" menu")

• Open a new, blank word processing document in Word.

• "Paste" (under the "Edit" menu) the copied text into the new word document.

• Edit your HTML

• Save the file using the procedure listed in part IV above.

Top of page

For Next Time:  Bring this file on a disk to class for our next session! Participants may also begin to explore sites with information about web page design.  Go back to the top of this page, return to the Session I page, or go to the Course overview.

[Session 1]  [Session 2] [Session 3]  [Session 4]  [Session 5] [HomePage Overview]  [Top]
This site copyrighted (2005) by Dr. Blake West - Please credit when linking to the site!
Kansas NEA - 715 SW 10th Ave.  Topeka, KS  66612.