Jan's Illustrated Computer Literacy 101 Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Jan's CompLit 101 > Working with the Web > HTML & CSS Basics > HTML Code > Edit
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's Working with the Web

   HTML Code: Edit

Lets add some more information about Hector to his page and then print the source code. It is easy to add blank lines and new paragraphs and headings. Printing may not produce quite what you expected!

Dialog: Page Setup (Notepad - Win8.1)Page Setup Dialog

Your text editor will have choices for how a printed page will look - margins, page orientation, probably a header and footer. The illustration is for Notepad, with the default settings under Windows 7. Don't forget that Notepad remembers the settings and will use them for the next document you create.

The codes that work in the text boxes for Header and Footer in Notepad may not work in other editors.

Icon Step-by-Step

Step-by-Step: Edit

 Icon Step-by-Step
What you will learn: to add Heading 3
to add paragraph text
to open and change Page Setup
to print source code from Notepad

 Start with:  Icon: Class disk,  hector4-Lastname-Firstname.htm, Notepad

Add Heading 3

  1. Icon: Class diskSave As hector5-Lastname-Firstname.htm to your Class disk.
  2. Change the sentence  Here are my hobbies.  to simply  My Hobbies

    Don't forget to remove the period of the end of the sentence.

  3. P tag changed to H3 in hector5-yourname.htmPut the cursor in the line  My Hobbies.
  4. Change the line to <h3>My Hobbies</h3>

    This makes the line a Heading 3 instead of a simple paragraph.

  5. Icon: Class diskSave.
    [hector5-Lastname-Firstname.htm]

  6. hector5 with new H3 line (browser)Open a browser and view the new page.
    G:\class\web project2\hector5-Lastname-Firstname.htm
    where you must replace G with the letter of your Class disk and 'Lastname-Firstname' with your own name, of course.
    The formatting of the whole line changes.

    The text will wrap differently in your browser unless the window size is exactly the same as the window used for the illustration.

Add Paragraphs

Next you will add some information above the My Hobbies line. Do you have Word Wrap on or off? What you type will probably not wrap the same as what you see on this page.

  1. Add a blank line above My Hobbies
    (With the cursor at the start of the line, press the ENTER key.)
  2. Starting on the blank line you just added, type:

    <h3>My Job</h3>

    <p>I am a travel agent for World Travel in Buenos Aires, Argentina. I spend my work day talking to people about where they want to go and trying to get them the best prices on their tickets and hotel rooms.</p>

    <p>I also write and edit our email newsletter Here and There, which keeps our customers informed about special deals and news in the travel industry. </p>

    <h3>My Education</h3>

    <p>I grew up in Buenos Aires and went to public school. I studied business at the Universidad de Buenos Aires and graduated 12 years ago. In my job as a travel agent I have really needed the history and geography that I learned (or should have learned) in school - even though I was not interested at the time!</p>

    <h3>My Family</h3>

    <p>I married my beautiful Carla 11 years ago. We have two children - Ricardo who is 10 years old (our soccer star!) and Rosa who is 7 years old (our ballerina).</p>

    You have added three Heading 3 lines and three paragraphs with a blank line between them in the source code.
  3. Icon: Class diskSave.
    [hector5-Lastname-Firstname.htm]

View Changes in Browser

  1. New text added - 3 Heading 3 and 3 paragraphsSwitch to your browser window.
    The old version of the page is still showing.

  2. Refresh the browser window.
    [Press the F5 key]
    Now your window shows the new text.  

  3. Right click on the page and view the source code.
    Depending on your browser, there may be color coding here. Does it make the code easier to read?

    TipColor-coding: If you have a color printer, you might want to print the source code from here instead of from Notepad sometimes.

  4. Switch back to Notepad.

Dialog: Page Setup

Tip The settings in this dialog apply to all pages printed from Notepad. Remember to check the settings before printing.

  1. From the Notepad menu select  File  >  Page Setup  
    The Page Setup dialog opens.
  2. Dialog: Page Setup (Notepad, Win7)If necessary, change the settings in this dialog to match the illustration:
    Margins: 0.25
    Header: &f
    Footer:  Page &p
  3. Click on OK to close the dialog.
    Notepad does NOT look any different, even if you changed the margins a lot!

    WarningNotepad remembers: The changes you made to Page Setup will apply the next time you print a page from Notepad! Earlier versions of Notepad forgot your changes once Notepad was closed. Not any more!

Print Source Code from Notepad

Notepad does not have a Print Preview feature. So sad!

  1. Dialog: Print (Notepad, Win7)From Notepad's menu,  File > Print
    The Print dialog opens.
  2. If necessary, select a printer.
    The Page Range should be All.
  3. hector5 print-out with narrow margin - page 2hector5 print-out with narrow margin - page1Print Print.
    It takes two sheets now.
    Remember that your print-out may not quite match the illustration, depending on exactly what you typed, including spaces and blank lines.

    More wrapping: The new margins make more lines wrap. This is not like what you are used to seeing in Word! Notepad was written for programming code where a line break can mean something special.