Comp25: HTML - Create Homepage

Learning Objectives

  1. To begin creating your company's website with a simple home page.

Preparation

Before you can create your website, there are a few steps you might need to do first. 

  1. If you have not yet done so, reveal your file extensions.  You will need to do this every time you log onto a lab machine.  You will likely need to do this on your home computer as well if you intend to do homework there.
  2. Navigate to your U: Drive.  If there is not already a folder called "web-docs" then create it exactly as shown here:  web-docs

    Are you working from outside the Pacific network?  If you are, you won't be able to see your U: Drive or the web-docs folder.  Instead, do all the work on your local computer and then upload it using WinSCP or WebFolders.

  3. Use Notepad only when working in Windows.
  4. For Mac Users, use TextEdit -- Follow these instructions to insure your TextEdit document is saved as a text file, not RTF

Very Important Note About Privacy

The web pages that you create will be accessible by the entire internet.  Do not include any personal information such as your full name, phone number, or a real mailing address.  Your website will remain on Pacific's servers long after you finish the class, and Google will have cached its contents and indexed it into its search database.

If you do not want Google or other search engines to index your site, add the following tags in the <HEAD>   </HEAD> area to insure Google does not index your site.  These tags need to be placed on every page.

<meta name="googlebot" content="noindex">

<meta name="googlebot" content="noarchive">

<meta name="robots" content="noindex">

<meta name="robots" content=“nofollow">

Steps to Take

Your pages will be visible online at: Student Pages for grading. In addition, be sure to upload your completed files as instructed to insure they were completed ON TIME

  1. Using Notepad or TextEdit, create a simple page with proper HTML formatting along the line of this example:
     
  2. Save the file to your web-docs folder called "index.html".  Be sure to use all lowercase letters and do not forget the .html extension.
  3. From Windows Explorer, navigate to your web-docs folder. Verify the file is there and named properly.
  4. View your file from the internet using a browser:  http://www1.pacific.edu/~yourusername

    You should be able to see your new HTML file.  Your website is officially live!

  5. Continue to edit your file in HTML by adding the additional tags below if needed to insure the assignment has all elements necessary for full credit.
    1.  Be sure your paragraph for Company Description is a complete paragraph.  At least 5 sentences
    2. Be sure your page includes the following tags somewhere in the code!
      • HTML, HEAD, TITLE, and BODY
      • H1 and H2 (heading 1 and 2)
      • P (paragraph)
      • B (bold) and I (italic)
      • BR (break)
      • HR (horizontal rule)
      • UL or LI (unordered list and list item)
      • Refer to the reading at the bottom of this page for help on HTML commands.
  6.  In the future, you can edit your files from your web-docs location by clicking the right mouse on the file and choosing: Open With | Notepad

 

  1. When you are satisfied with the look and content on your page, save it one last time and check it out in a browser.  Be sure to have a friend review it to make sure it works on their computer as well.
  2. Upload index.html to Sakai when you are finished to insure it was completed on time.

Useful Links

HTML Introduction

HTML Basic Tags

HTML Links

HTML Images

Troubleshooting

If you can see your U: Drive but you don't have a web-docs folder...

That's okay.  You can create the web-docs folder from your U: Drive just by making the new folder manually.  Make sure it is called "web-docs" exactly, with the hyphen.

If you can't access my U: Drive because you're not on the Pacific network...

You'll have to use the WebFolders website to upload your files into the web-docs folder. 

If the index file in your web-docs folder looks like a notepad icon, not a web page...

You need to reveal your file extensions and then rename your file to "index.html", not "index.html.txt".

If your website is just a big blank page...

You likely forgot to close the </title> or </head> tag at the top of your page, or you never started the <body> tag.

If all of your text is super huge...

You started an <h1> or <h2> tag but didn't close it off when you were done with it.

If you get a Forbidden error when you visit your website...

You need to reset the permissions on your website and try again.

If, when you visit your website, you see a listing of files instead of my fancy new page, or you get a File Not Found error...

Either your file is not called "index.html" or you did not save it to your web-docs folder.  Rename it, or move it into the web-docs folder.  Make sure it is in all lowercase letters.

Grading Guidelines

This assignment will be graded using the following guidelines:

Grading Rubric: Percentage Points
     
Accuracy 50% 20
Style 50% 10
Total Points Possible 100% 30