Create a Web Site

These two pages are an overview of how to start and publish a web site. You should read through this carefully and try each step. There is nothing to turn in for a grade for these two pages.

Here is what you do to get started with a new web site:

  1. Create a new folder on your hard drive or flash drive. You must save ALL files associated with a site in the same folder; this includes images. Make sure the folder name does not contain any spaces or capital letters.
  2. Create a new, empty file in a text editor like Notepad++. Copy and paste the following text into the new file:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Page Title</title>
    </head>
    <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
    </body>
    </html>

  3. Save the file in the folder you created in step 1. Important: if this is the main page or the only file in your web site you must save the file as index.html. Web browsers look for a file with that special name inside a folder to display as the "home" page.
  4. Change the page title from "Page Title" to something appropriate for your site. Save the file.
  5. Add the content for your page between the <body> and </body> tags. Note: the content in the template above is an example only. You will remove those tags and use your own content for your pages. Save the file.
  6. Save often as you continue to add content and view your page(s).

Viewing Web Pages

You must view your web pages in a web browser on your computer as you design them. There are two easy ways to do this:

Option 1

If you're using Notepad++, with a file open click the "Run" menu and choose "Launch in Chrome" or "Launch in Firefox".

Option 2

Open the folder on your computer that holds your files. Find the page you want to open (e.g. index.html); right-click it and choose "Open with"; then choose a browser (for this class, please use Chrome or Firefox to view your pages). Your page will open in a new tab in the browser you chose.

Making and Viewing Changes

If you make any changes to your HTML in the text editor, you will need to refresh the browser page (hit F5 or click the refresh button in the toolbar) to see your changes. Use a cycle of making changes to your HTML in the text editor, then refreshing the page to see the changes, change, refresh, etc. to design your pages.