Page Banner

Lesson Practice 1-1: Set up Notepad
& Create First Webpage Files

Notepad++


Task 1: Download and Install Notepad++

  1. Click the document link at the right and save it to your home desktop.
  2. Double-click the file icon to start the installation process.
  3. Choose English as the language.
  4. Click Next and Agree until you reach the Install button. On this page, click on the check box to put a shortcut on the desktop, then click Install.
  5. During the install process, it will hang up on many files - just keep clicking Ignore (yes, I know there are a lot of them - it will still work).
  6. When the install process is complete, open the program. Click on the Language tab and choose H, then HTML. This will tell the program to color-code your html documents to make them easy to work with.


Task 2: Create an HTML Template

Every webpage you create needs the same basic elements to begin. Rather than repeatedly typing this information, you will create a 'template' file, which is a blank webpage with just the structure elements included. You can then open this file each time you need a new one and then save it with the new filename.

  1. Open Notepad++ if necessary. (There should be a shortcut on your desktop.)
  2. In the file menu, choose Save As...
  3. Navigate to your Home directory and create a new folder named WD, or WebDesign.
  4. Switch to your new folder and save the blank file using the filename template.htm
  5. At the top of the page, type the opening page tag <html> and press enter.
  6. Add the header element: <head> </head>
  7. Place your cursor between the two tags and press Enter twice.
  8. Inside the header element key <title> </title>
  9. Place your cursor between the two tags and press Enter twice.
  10. After the closing head tag, press Enter twice.
  11. Key <body> </body> and press Enter three times between the tags and twice after.
  12. Finally, type the page closing tag </html>
  13. You should see that there is now plenty of space to separate the parts of your webpage. Keeping plenty of spacing helps you to read your webpages.
  14. Save.


Task 3: Create your first web page.

  1. If necessary, open template.htm in notepad++ and immediately resave it in your WebDesign folder as page1.htm
  2. Between title tags, type My First HTML Web Page
  3. On the second blank line after the opening body tag, type This is my very first Web page!
  4. Save the document.
  5. Open the page in Internet Explorer and


Task 4: Preview your page in your browser

  1. Method 1:
    1. With the file open in Notepad++, click the Run menu.
    2. Choose Launch in IE from the list.
      You could choose a different browser if it is installed on your computer.
    3. Admire your page! Note that the title element appears on the title bar of the browser.

  2. Alternate Method 1:
    1. From your browser (IE), select File, Open
    2. Navigate to and choose the file you wish to view. Double-click it or right-click it and click the Open button.
  3. Alternate Method 2:
    1. From Windows Explorer (or My Computer), locate the file you want to view.
    2. Double-click the file and it will open in your default browser.

 

bonom bar