Jan's Working with the Web

Step-by-Step: Readable Code

---

What you will learn:

to add blank lines to code to add indentions to code to add comments to code

---

 Start with:      , hector3-Lastname-Firstname.htm, Notepad

You don't need fancy software to make your code easier to read. Just add some white space as you go along.

Add Blank Lines

Gaps between sections helps you spot what you are looking for. You will add some blank lines between document parts.

1. Open in Notepad, if necessary,  hector3-Lastname-Firstname.htm  from your Class disk.
   

2. Save as  hector4-Lastname-Firstname.htm  to your Class disk in the web project2 folder.
   Save first: It is a good idea to save a Notepad document with a new name BEFORE making changes. That makes it very easy to get back to where you started. Notepad will Undo only one step!

3. Add blank lines as follows:

   • before and after <title> line

   • after <h1> line

   • after <h2> line

   • after <p> line

   • after each <dd> line

   In the illustration, colored arrows show where blank lines were added.

---

Add Indentions

You can use indentions to create a visual outline of your document. By indenting the items in a list, for example, you visually set them off from the rest of the document.

1. Add two spaces in front of each <dt> tag (the term part of the definition)
   These spaces will not show in the browser when you view the page.
   
2. With the cursor to the left of the first <dd> tag, press the TAB key.
   Your code jumps over a number of spaces.
   
3. Repeat for each  <dd> tag.
   

   In the illustration, red bars show where you added white space.

   Wrapping Points: The width of the window when you typed in the text determines where Notepad will wrap the text. In older versions, Notepad remembers the same wrapping spots even if you change the window size or add more text or spaces. That can leave you with one or two words on a line with the rest of the sentence on the next line. A very odd look! Happily, it won't affect the look in a browser.

---

Add Comments

The longer your page gets, the more important it is to include hidden comments. Such comments can point out special spots on the page or label sections to make it easier for you to find them later. You can even use the Find command in Notepad to find the right spot. It is unfortunately common to completely forget why you wrote what you wrote!

Comments do not show when you view the page in a browser, but anyone who opens the source code can read them. Make it a regular practice to add comments as you create the page.

1. Add a blank line above the <dl> tag.
   

2. Type the following comment in the new blank line:

   <!-- Begin Hobbies list -->
   

3. Add a blank line below the closing tag for the list and type:

   <!-- End Hobbies list -->
   

4. Save.
   [hector4-Lastname-Firstname.htm] 
5. Turn off Word Wrap.
   

6. Print the source code from Notepad.

   The illustration of the print-out uses margins, 1" left and right, 0.75" top and bottom.

   Notepad remembers: Starting with Windows 7, Notepad will remember the changes you make in Page Setup. The next document you create will use those settings. Always check Page Setup to see what will be in the header and footer before you print. While working on this lesson, I found that Notepad still remembered the header I created while working on the Working with Databases lesson exercises. The header text included 'Exercise Access 3.3". Not appropriate for this lesson!
   

   Problem: Word Wrapping in a print-out breaks oddly
   What happened: Depending on your font, font size, and window size, what you see in Notepad as one line on the screen may not fit across the paper page. Notepad will wrap the text on a line to the paper page, BUT it puts a line break at the end of each line. This is not at all like what word processing programs do.

   Why: Notepad was designed for writing computer programs. A line break in a script or program can have meaning.

   Solution: Turn off Word Wrap before printing and look to make sure you know what Notepad thinks belongs together on a single 'line' of code. Edit to fix any breaks that you don't really want. (Print Preview is not available in Notepad. If you are using a different editor, take advantage and preview before printing!)

7. Close Notepad.

 Multiple Editors: Open your documents in only one editing program at a time. You can open an HTML document in two different editing programs at once. But they may not talk to each other about the changes you make. You can lose a lot of work when you switch between such unsociable programs!

Advanced editing programs are smart enough to notice changes made by another program and will ask if you want to update the copy in that program. However, it is still easy to get confused about what changes you made where and to dump changes that you meant to keep!