Let's get started with a Web Page!

  1. Browse to your desktop (or thumbdrive)
  2. Click: New Folder
  3. Name that folder: public_html
  4. Double-click on your public_html folder to open it
  5. Click: New Folder
  6. Name that folder: images
  7. Click: New Folder
  8. Name that folder: includes
  9. Search the web for an image file and save that image file to your public_html\images folder
  10. Open Notepad++
    1. Choose: File -> New
    2. Copy the Web Page Template (HTML) code (below)
    3. Paste that code into your new file
    4. Change: page title goes here
      to: Your Name's Home Page
    5. Change: put your name in this comment line
      to: Your Name
    6. In the <h2> tag, change: put-your-name-here
      to: Your Name
    7. Write a paragraph about yourself where it says: Put a paragraph here about yourself.
    8. Change: <p><img src="images/put-the-name-of-your-image-file-here"
      alt="put-a-description-of-your-image-here" width="200px" height="200px"><p>
      to the name (case is important), description, and size of your image file
    9. Click File -> Save as
    10. Save your file in your ub folder as: index.html
    11. Change the Save as Type to: Hypertext Markup Language File (*.html, ...)
    12. Click the Save button
    13. Click: Run
    14. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    15. View your web page
    16. Make any changes
    17. Save your changes

Web Page Template (HTML)

<!doctype html>
 <html>
   <head>
     <title>page title goes here</title>
     <!-- Author: put your name in this comment line -->
     <link href="includes/styles.css" rel="stylesheet"/>
   </head>
   <body>
     <h2>Hello! My name is put-your-name-here!</h2>
     <p>Put a paragraph here about yourself.</p>
     <p><img src="images/put-the-name-of-your-image-file-here" 
       alt="put-a-description-of-your-image-here"
       width="200px" height="200px"></p>
     <h2>Labs</h2>
     <ol>
       <li><a href="index.html" title="Home Page">Create a Web Page</a></li>
       <li>Add CSS to Your Home Page</li>
       <li>Create a List Page</li> 
       <li>Create a Table Page</li> 
       <li>Create Site Navigation Page</li>  
       <li>Create a Divs Page</li> 
       <li>Create a Form Page</li> 
       <li>Create a Multimedia Page</li> 
       <li>Create a JavaScript Page</li> 
       <li>Modify Home Page to Use JavaScript Navigation Page</li> 
       <li>Use JavaScript to Validate a Form Page</li> 
       <li>Use JavaScript to Change CSS Styles Page</li> 
     </ol>
     <hr/>
     <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
   </body>
 </html>

Example