Home | Syllabus | Class Gallery | Message Board | Grades | FAQ
Assignments: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 Resources: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8

HTML 1 - Assignment 2

The objective for this week is to create a VERY, VERY simple web page and get it uploaded to the student server so that it is officially on the Internet. Here is a list of the week's assignments:

  • make web page - 5 pts.
  • upload web page - 3 pts.
  • contribute to message board - 2 pts.
  • quiz 1 - 10 pts.

Tip of the week: Never double-click a file to open it. When you double-click an HTML file, it opens in your computer's default browser. Instead, control the file that you want to edit by opening it from within Notepad or TextEdit (File/Open). When you want to view your file in a browser, open it from within the browser (File/Open..). This will be necessary when you want to view the file with an alternative (not default) browser.

Preparation:

  1. Online lecture:

    HTML 1, Week 2 - Week 2 Overview, Creating and Uploading an HTML File for Windows Users
    HTML 1, Week 2 - Creating and Uploading an HTML File for Mac Users

    Note: all students will want to watch the Week 2 Overview, but then Mac users will then close the recording and open the second one to see a demo of how to work in the Mac environment. Windows users will be able to see the entire lecture in one video.

  2. Text:

    1. Introduction - You'll get a lot more out the text if you read this.

    2. Chapter 1 - Please, read every word. I strongly suggest that you do all of the exercises the authors have included. For example, on pp. 10 - 19, the authors take you through the process of creating a text file and viewing it in your browser. Do this, before you turn the page to page 20! If you are using a Mac and you skip pp. 12 - 13, you will regret it. If you are using Windows and you skip pp. 14 - 15, you'll regret it. Some of you may feel like this is beneath you, but it really won't take you that long. Just do it.

    3. Chapter 4a (pp. 125 - 137) - This is about how to upload your web page. The text includes information about getting set up with an Internet Service Provider (ISP). You should read this, but you won't need to worry about it in this class, since we'll be using the "student" server. The explanations here are not very detailed, because they don't know what ftp application you will be using. Detailed instructions for how to upload to the student server are provided below.

      Three notes of clarification about chapter 4a: (1) At the bottom of p. 129 you are asked to state your web hosting company and your domain name. Your web hosting "company" for this class will be SRJC. You won't have your own domain name. Instead, you'll be using the domain name "student.santarosa.edu". (2) When the text refers to your "root folder" (for example on the bottom of p. 130), for us that will be a folder named "public_html" that will be inside your main folder (more on this below in the "For Credit" section). (3) The text gives the URL as "http://www.starbuzzcoffee.com/index.html". Your URL will actually be "http://student.santarosa.edu/~yourusername/index.html".

    4. (Optional) Chapter 6a (pp. 223 - 242) - This will be part of the required reading later on, but since you will be validating your pages to make sure that they meet industry standards right from the start, you might want to read this to find out more about validation. (Don't worry, you'll know what that means soon enough.)

  3. Handouts:
    Basic Coding
    Suggested Steps for Your Work Routine

  4. Week 1 Review - PowerPoint presentation covered in online lecture (.pdf format)
    Week 1 Review - PowerPoint presentation covered in online lecture (.txt format - accessible)

For Credit (20 points total):

  1. Create your first VERY, VERY simple web page - 5 pts.

    1. You should pick a theme for your site so that several web pages will work together logically. You could present your pets, your family, a good vacation, a hobby, or some other topic of interest. It can be on anything you want (that is appropriate to a college class) and doesn't have to be profound. In assignment 5 you will be adding pictures to your site, so a topic with good visuals would be nice.

    2. Your first web page will include just the basic tags that are required for all web pages (html, head, title, and body), along with 3 heading tags and 2 paragraph tags. Here is the template you'll use for your web page.

      Warning: there is a lot of code in the template below that will make no sense to you at this point. That's OK! We'll be studying all of this as the course progresses. 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" xml:lang="EN">
  <head>
    <meta http-equiv = "Content-Type" content = "text/html; 
	charset = UTF-8" />
    <title>Placeholder text for a title (displays in title bar)</title>
  </head>
  <body>
    <h1>Placeholder text for a main header</h1>
    <h2>Placeholder text for a second level header</h2>
    <p>Placeholder text for a paragraph</p>
    <h2>Placeholder text for a second level header</h2>
    <p>Placeholder text for a paragraph</p>
    <p>
        <a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" />
			</a>
    </p>

  </body>
</html>
    3. You must use Notepad (Windows) or TextEdit (Mac) to create your file. The use of Dreamweaver or Frontpage is not allowed in this class. It is easiest (and usually more accurate) to copy this HTML code and paste it into your Notepad/TextEdit document rather than retyping it. Then you should replace the sentences that start with "Place a..." with your own content. When the instruction is "Place a paragraph of text here", please use several sentences instead of just a few words. Then save your file, naming it "index.html".

    4. When you view your web page with a browser (assuming you have started with the template as required), you'll notice that a small "W3C" graphic appears at the bottom of your page. After the page is uploaded to the server, click on this graphic and you will be taken to a site that checks your code for errors. (This is called "validation".) If you have done everything correctly, you will see the words "This Page Is Valid XHTML 1.0 Strict!" in a big green bar across the page. This graphic is at the bottom of (almost) every page of our course web site, so you can try it out if you like (and see if my HTML validates!).

    5. You should use the template above as the starting point for all of your future web pages in this course. I recommend that you save a copy of the file as "template.html". Then, when you want to make a new HTML file, you can open the template in your text editor and immediately save it with a new name.

    6. Do not include code or other features in your web site that we have not yet covered in the class.

  2. Upload your VERY, VERY simple web page to the student server - 3 pts.

    This will involve 2 steps: (1) create your public_html folder, and (2) upload your files. Step (1) needs to be performed once only, to get set up. Step (2) will be performed each time you want to upload a new file, modifying (or adding to) your web site. Please note that when following the instructions below, it matters whether you use uppercase or lowercase. Everything except the password will be typed using all lowercase.

    Windows users step 1: instructions for creating your public_html folder.

    1. Launch the application that you downloaded in assignment 1 named "SSH Secure Shell Client".
    2. Select "Quick Connect" from the "File" menu. A new dialog box will open.
    3. Type student.santarosa.edu in the "Host Name:" textbox.
    4. Type your username for the student server in the "User Name:" textbox. This will be the username that you provided for me in assignment 1.4.
    5. Click "Connect". (Don't change the values in the two remaining textboxes.) A new dialog box will open. If the new dialog box that opens is not the "Enter Password" dialog box, just click "yes" to move on to the "Enter Password" dialog box.
    6. Type your password for the student server in the "Password:" textbox. This will be the password that you provided for me in assignment 1.4. Don't forget that your password must be entered using uppercase letters. Then click "OK".
    7. You should now be logged in to your account. Your cursor should be located at the end of a line of text that ends with a dollar sign ("$"). After the "$", type "sudo wwwme" (don't forget, all lowercase, and don't include the quotes) and press the enter key. This creates the folder (named "public_html") where you will store your web pages.
    8. Type "exit" to logout of your account.
    9. Close the "SSH Secure Shell Client" application.


    Windows users step 2: instructions for uploading your files from your local computer to the student server.

    1. Launch the application that you downloaded in assignment 1 named "SSH Secure File Transfer Client".
    2. Select "Quick Connect" from the "File" menu. A new dialog box will open.
    3. Type student.santarosa.edu in the "Host Name:" textbox.
    4. Type your username for the student server in the "User Name:" textbox. This will be the username that you provided for me in assignment 1.4.
    5. Click "Connect". (Don't change the values in the two remaining textboxes.) A new dialog box will open. If the new dialog box that opens is not the "Enter Password" dialog box, just click "yes" to move on to the "Enter Password" dialog box.
    6. Type your password for the student server in the "Password:" textbox. This will be the password that you provided for me in assignment 1.4. Don't forget that your password must be entered using uppercase letters. Then click "OK".
    7. You should now see a window with a listing of files and folders from your local computer in the left pane, and a listing of files and folders from your account on the student server in the right pane. Probably the only item in the right pane is a folder named "public_html".
    8. You MUST begin by double clicking on the public_html folder because you have to be INSIDE that folder when you transfer files. This software does not allow us to drop a file on top of a folder to put it inside.
    9. You may have to browse in the left pane to find your index.html file. Once you have located it, drag it to the right pane. It should now appear in both panes. Congratuations! You've just uploaded your first web page!


    Mac users step 1: instructions for creating your public_html folder.

    1. Launch the application named "Terminal", which can be found in the "Utilities" folder of your "Applications" folder.
    2. The cursor in your Terminal window should be located at the end of a line of text that ends with a dollar sign ("$"). After the "$" type "ssh yourusername@student.santarosa.edu" and press the enter key. (In the place of "yourusername" type your username for the student server. This will be the username that you provided for me in assignment 1.4.)
    3. You will be asked to enter your password. Type your password for the student server at the prompt. (IMPORTANT: the cursor will not move when you type the password, and it seems like it isn't working, BUT IT IS!!) This will be the password that you provided for me in assignment 1.4. Don't forget that your password must be entered using uppercase letters. Then press the enter key.
    4. You should now be logged in to your account. Your cursor should be located at the end of a line of text that ends with a dollar sign ("$"). After the "$", type "sudo wwwme" (don't forget, all lowercase!) and press the enter key. This creates the folder (named "public_html") where you will store your web pages. When you place a file named "index.html" into this folder you will be able to see it from any computer that is connected to the Internet by typing your URL into the address bar of a browser. Your URL will be "http://student.santarosa.edu/~yourusername".
    5. Type "exit" to logout of your account.
    6. Quit the "Terminal" application.


    Mac users step 2: instructions for uploading your files from your local computer to the student server.

    1. Launch the application that you downloaded in assignment 1 named "Fugu".
    2. Type student.santarosa.edu in the "Connect to:" textbox.
    3. Type your username for the student server in the "Username:" textbox. This will be the username that you provided for me in assignment 1.4.
    4. Click "Connect". (Don't change the values in the two remaining textboxes.)
    5. Type your password for the student server in the "password:" textbox. This will be the password that you provided for me in assignment 1.4. Don't forget that your password must be entered using uppercase letters. Then click "Authenticate".
    6. You should now see a window with a listing of files and folders from your local computer in the left pane, and a listing of files and folders from your account on the student server in the right pane. Probably the only item in the right pane is a folder named "public_html".
    7. You MUST begin by double clicking on the public_html folder because you have to be INSIDE a folder when you transfer files. This software does not allow us to drop a file on top of a folder to put it inside.
    8. You may have to browse in the left pane to find your index.html file. Once you have located it, drag it to the right pane. It should now appear in both panes. Congratuations! You've just uploaded your first web page!


    Both Windows users and Mac users: Final instructions.

    For many students, this week can be the most difficult and frustrating part of the course, so if you encounter difficulties or if you are a visually oriented learner, I suggest that you review the online lecture. If you get hopelessly stuck, consider coming to see me when I'm in office hours or in one of the computer labs. The "Using the Student Server" link from the Week 2 Resources page also gives instructions on how to accomplish these steps.

    One thing you must do is be sure that all of your files go INSIDE the "public_html" folder when you upload. If you can see the "public_html" folder at the same time you see your files, you haven't done it correctly. Also be sure that you DO NOT include folders inside "public_html". We will be creating folders for various purposes later on.

    Testing:

    After you upload your file, you must test and make sure it shows up properly. Open a browser and type http://student.santarosa.edu/~yourusername/index.html. (Please don't type "yourusername" but use your real username!!) If you did everything correctly, you should see your web page! Then click on the W3C graphic at the bottom of your page to make sure that it validates correctly. If your page does not validate, you probably made a typo of some kind. Check your work and see if you can find it. If you can't, email me and I'll take a look.

    To be absolutely sure you've done everything correctly, you should also check to be sure your file is showing up from the Class Gallery. Click on the Class Gallery link at the top of this page. Then click on your name. If your web page does not show up in the right pane, something is wrong. Did you send me your username? Did you name your file index.html? Did you include your file in a folder when you uploaded it? All kinds of things can go wrong. If you can't figure it out, send me an email asking for HELP!

    When everything is working properly, send me an email with the subject "HTML 1 2.2". For the body of this email you need only type the URL of your web site (http://student.santarosa.edu/~yourusername/index.html).

    Take heart! This is a difficult week for many students. Most of you will be doing things you have absolutely no experience with, and it doesn't always go smoothly. My best advice is to get started as soon as possible and use all the resources at your disposal. Email me for help, come and see me, ask your friends what to do, reread the instructions, post your dilemma on class message board, etc. Whatever you do Do not give up! No matter how stuck you think you are, you can do it!

  3. Participate in the Week 2 Discussion on the Message Board - 2 pts.

  4. Take Quiz 1 on Weeks 1 and 2 - 10 pts.

    Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything except to take the quiz itself. There is no time limit. You will only get one attempt.



Return to Top

Valid XHTML 1.0 Strict