Creating your Web Page

Introduction

This assignment contains concepts and instructions so that you can create a personal Web Page.

You use your Personal Web Page to present yourself to the professional world.

IS majors are required maintain an electronic portfolio of all their required courses for the IS degree.

Non-IS majors may also use their Web pages for an electronic portfolio.

Your work for this course will be on your ISC 110 (or ISC 150 or CSC 120) Web Page.

Assignment Objectives

This assignment introduces you to the concepts and tools you need to develop web pages. At the end of this assignment you should be

Study Material

Tasks

  1. You will be given a password to your moxie account. Your username will be identical to your Laker NetID. You are STRONGLY ADVISED to make your password on moxie the SAME as your Laker NetID password.
  2. You will be creating directories (folders) in your moxie account with a directory structure that looks like this:

    Your home page is in a directory (folder) named public_html.

    EACH directory (folder) you create under public_html will have an html file named index.html. You will create a separate directory (folder) for each course you take.

  3. You need to give the world permission to navigate through directories (folders), and read html files. This is done with the unix chmod command.
  4. A word of warning: DO NOT USE SPACES any file or directory (folder) NAME!!

Steps

CREATE A LOCAL IMAGE OF YOUR WEB PAGES ON YOUR CLIENT MACHINE:

  1. Create LOCAL folders on your Desktop that mirror those on moxie:
    1. On your Desktop, right-click to create a folder named public_html
    2. Move into public_html. Right-click to create a folder named coursework
    3. Move into coursework. Right-click to create a folder named isc110 (or isc150 or csc120)
  2. Create your Home web page
    1. Launch Notepad++
      1. From the menu, select Language > H > HTML. This gives you syntax highlighting, making it easier to edit html files.
      2. Type this into the editor. Add some information about yourself. 
        <!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" >

   <style type="text/css">

   </style>


</head>

<body>
<p>
This is the homepage of ______put_your_name_here_______
</p>

<p>
I am a student at SUNY Oswego.  I am majoring in ....
</p>

<h3>Courses</h3>

<p>Click on the link below to look at all my coursework</p>

<ul>
   <li> <a href="coursework/index.html"> Coursework </a>   </li>
</ul>
</body>
</html>
      3. Save the file into your Desktop\public_html folder. Type in index.html for the name of the file.
      4. View the file on your client machine: From the menu in Notepad++, select Run... launch in Firefox. Continue to edit this file until it looks good. (The link will not work yet.)
  3. Create your coursework web page
    1. Using Notepad++, create a new file and type this:
      2. 
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" >

   <style type="text/css">

   </style>

</head>

<body>

<div>
<p>
<h2>Links to my courses</h2>
</p>
</div>

<div>
<ul>
   <li>
      <a href="isc110/">ISC 110</a> Introduction to Information Scince
   </li>
<b> (or  
   <li>
      <a href="isc150/">ISC 150</a> Introduction to Scripting and Markup Languages
   </li>
   <li>
      <a href="csc120/">CSC 120</a> Introduction to Programming and
Programming Languages
   </li>

)</b>
</ul>
</div>

</body>
</html>
    2. Save this file into your Desktop\public_html\coursework folder. Name the file index.html.
  4. Create a home page for this course.
    1. Using Notepad++, create a new file and type this:
      2. <!DOCTYPE html>
<html>

<head>

<meta charset="utf-8" >

   <style type="text/css">

   </style>

</head>

<body>
<p>
My coursework for <b>(ISC 110 or ISC 150 or CSC 120)</b>
</p>


<h3>Assignments</h3>

<p>Click on a link below to look at my assignments</p>

<ol>
   <li> <a href="/~PUT_YOUR_LAKER_NetID_HERE!!/">My Web Page </a>   </li>
</ol>


</body>
</html>
    2. Save this file into your Desktop\public_html\coursework\(isc110 or ISC150 or CSC120) folder. Name the file index.html.
    3. View this page locally using Notepad++. Continue editing this file until it "looks good".
  5. SAVE your LOCAL COPY of your WEB PAGES to a FLASH DRIVE or GOOGLE DRIVE!!!!!!

LOG INTO YOUR moxie ACCOUNT FOR THE FIRST TIME

  1. From your client machine:
    1. Launch PuTTY to log into moxie.
    2. In the Host Name (or IP address) field: Enter moxie.oswego.edu (hit Enter key)
    3. In the new dialog box that appears, enter your Laker NetID and the password given to you in class. (If a security dialog box appears, click yes (or accept)).

    You are now logged into moxie.

    PuTTy has created a window for you to work on moxie.

    Use this window to type your unix commands.

  2. Change your password on moxie to your LakerNet Password:
    3. (Complete each command by hitting the Enter key.)
    1. In your PuTTy window, type: passwd
    2. Enter the password given to you in class
    3. Enter your Laker NetID password
    4. Enter your Laker NetID password again
  3. You should now be able to log into moxie with the same password as your email. Try it:
    1. Close your PuTTY session
    2. Go through same steps you used to launch PuTTY to log into moxie.

SET UP YOUR WEB PAGE STRUCTURE ON moxie

  1. Create all your directoriess (folders).
    1. Create your public_html directory (folder).
      1. cd
      2. mkdir public_html
    2. Create a directory for all your coursework:
      1. mkdir public_html/coursework
    3. Create a directory for this course:
      1. mkdir public_html/coursework/isc110 (or isc150 or csc120)
  2. Set permissions so that Apache can serve your web pages pages to clients.

    3. The unix command chmod is used to set file access rights. Reread Unix Tutorial 5.1-5.2. Reread this before you begin. (See link above.)

    On moxie, type these commands:
    1. cd
    2. chmod go+rx public_html
    3. chmod go+rx public_html/coursework
    4. chmod go+rx public_html/coursework/isc110 (or isc150 or csc120)

UPLOAD LOCAL FILES TO YOUR moxie ACCOUNT

  1. Upload all three index.html files to their equivalent directories (folders) on moxie.

    2. Do this using Cyberduck. Remember, you have several files named index.html. These files, even though they have the same name, they have different content because they reside in different directories (folders). Your file permissions should be set up to allow the server to serve the file to any client machines.

PUTTING IT ALL TOGETHER:

  1. Browse to your HOME PAGE using the internet using http://moxie.oswego.edu/~YOUR_LAKER_NetID/
  2. Click on the link for your coursework web page. You should see your coursework page. (Fingers crossed.).
  3. Click on the link for web page this course. Click on the link under the first assignment. It should bring you back to your home page. (Fingers crossed.)

MORE FUN:

  1. Look at this file. It contains a head element and a style element.

    The style element is used to define CSS (Cascading Style Sheet) styles for an html file. Use this in your homepage and coursework page to center elements and set background colors.

    Learn about Internal CSS at w3schools. NEVER NEVER use Inline CSS!!!!!

    To look at it's source file, do this: right-click on the page, then select View Page Source.

  2. Upload all your image files to moxie. Place them in a folder named Images. Create the Images folder from your public_html folder using the mkdir command.
  3. Put a hyperlink to one image in your home page, and another in your web page for this course. Look at w3schools to see how to display an image file.
  4. Place a hyperlink to the college web page in your homepage. Look at w3schools to see how to link to another web page.

Show me your web page when you have finished this assignment.