Comp25: HTML - Create Homepage

Learning Objectives

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.

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.
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. Remember this assignment?
Use Notepad only when working in Windows
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.

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

Using notepad, create a simple page with proper HTML formatting along the line of this example:
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.
From Windows Explorer, navigate to your web-docs folder. Verify the file is there and that the icon resembles a webpage. If the icon looks like Notepad then reveal your file extensions and then rename the file to "index.html".
View your file from the internet using Internet Explorer. Access it using this special website address:
http://www1.pacific.edu/~yourusername (replace it with your actual username, but leave the ~ there)

You should be able to see your new HTML file. Your website is officially live!
Now edit the HTML file again, still using Notepad. Using the tag you have learned so far, add the following content to your webpage about your business:

Company Description: Write paragraph that describes your business:
1. A paragraph consists of three elements:
2. Topic sentence The topic sentence is the first sentence in a paragraph. It introduces the main idea of the paragraph. It should briefly summarize the main idea of the paragraph too so that you can indicate to the reader what is your paragraph about.
3. Supporting sentences They come after the topic sentence, making up the body of a paragraph. They give details to develop and support the main idea of the paragraph. In these sentences you should focus on giving supporting facts, details, and examples.
4. Closing Sentence The closing sentence is the last sentence in a paragraph. It restates the main idea of your paragraph.
You'll see that you need to customize the content a little bit. List the products you sell, your location and hours, and your contact information. Do not go into extreme detail on your products. That will be another assignment.
Save your code (shortcut key: Ctrl-S), refresh your browser (shortcut key: F5), and see your changes. Make sure everything works and appears the way it should. If it does not, you likely missed an ending tag or forgot the / mark somewhere.
Continue to improve your page using the HTML you have learned from the lecture and your reading. Remember that you can quickly make changes, save the code (Ctrl-S) and refresh your browser (F5) to immediately see the results.
Be sure your page uses the following tags:
- 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)
Use the reading at the bottom of this page for help on HTML commands.
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.
Upload index.html to Blackboard 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

On-Time	25%	7.5
Accuracy	50%	15
Style	25%	7.5
Total Points Possible	100%	30