Making Your Own Web Site
 
  <h2>Your Web Site About You!!!</h2>

  <h4>Gimme The Skinny</h4>
  <p>
    Your mission, should you choose to accept it, will be to create a web site about the one
    and only YOU!  The web site should have the following files:
  </p>
  <ul>
    <li>
      <span class="definition">index.html</span>: This is your main file.  It should contain a
      <span class="keyword">list</span> of <span class="keyword">hyperlinks</span>
      (&lt;a href=&quot;&quot;&gt;) to all of the other files that you create.
    </li>
    <li>
      <span class="definition">overview.html</span>: This file should contain an overview
      about who you are.  You may include pictures (&lt;img src=&quot;&quot;&gt;) that reflect
      your personality, but you must have at least one paragraph (&lt;p&gt;)that describes
      who you are in a nutshell.  Be creative about describing yourself, but remember that this
      will be graded :).
    </li>
    <li>
      <span class="definition">hobbies.html</span>: This file should contain all of your
      hobbies as a <span class="keyword">list</span>.  You should also have a heading that says
      something along the lines of &quot;My Hobbies&quot;
    </li>
    <li>
      <span class="definition">schedule.html</span>: This file should contain a list of the
      courses that you are currently taking as a <span class="keyword">table</span>.  The
      table should have the following <span class="keyword">table headers</span>:
      <ul>
        <li>
          <span class = "definition">COURSE</span>: The courses you are currently taking
          will appear under this title as <span class="keyword">table data</span>
        </li>
        <li>
          <span class="definition">INSTRUCTOR</span>: This column will list the instructors that
          you have been assigned.  They will appear in the same <span class="keyword">table row
          </span> as the course that they are teaching.
        </li>
        <li>
          <span class="definition">ROOM</span>: In this column will be displayed the room number
          for the courses.
        </li>
        <li>
          <span class="definition">TIME</span>: This will display the times that courses normally
          meet.  You do not need to provide Wednesday schedules, Focus times, or brunch/lunch times.
          Simply state when each class is meeting on the M,T,Th,F schedule.
        </li>
      </ul>
    </li>
    <li>
      <span class="definition">career.html</span>: This file should contain a
      <span class="keyword">paragraph</span> or two about your career goals.  Explain
      what types of <a title="Find out more about your dream job!" href="http://jobprofiles.monster.com/"
              rel="external">jobs</a> you would like to have in the future.
    </li>
  </ul>

  <h4>Making Things Look Purty</h4>
  <p>
    Inside of your root directory, you should have made a <span class="file">styles</span>
    subdirectory.  Using <span class="keyword">notepad</span>, create the file
    <span class="file">stylesheet.css</span> inside of the <span class="file">styles</span>
    directory.  Once you have created the file, copy and paste the following code into
    <span class="file">stylesheet.css</span>:
  </p>
  <p class="code">
    body { <br/>
      font-family: sans-serif; <br/>
      background-color: white; <br/>
      background-image: url(../images/tornrightbckgrnd.png); <br/>
      background-repeat: repeat-y; <br/>
      background-position: top right; <br/>
      background-attachment: fixed; <br/>
      color: black; <br/>
    } <br/>
    <br/>
    table { <br/>
      border: thin black solid; <br/>
      border-style: outset; <br/>
      border-collapse: collapse; <br/>
      border-spacing: 15px; <br/>
      width: 80%; <br/>
    } <br/>
    <br/>
    td { <br/>
      text-align: left; <br/>
      border: thin black solid; <br/>
    } <br/>
    <br/>
    th { <br/>
      text-align: center; <br/>
      font-weight: bold; <br/>
      border: thin black solid; <br/>
    } <br/>
    <br/>
    ol, ul { <br/>
      margin-top: 0px; <br/>
      padding-top: 0px; <br/>
      color: #333333; <br/>
    } <br/>
    <br/>
    ul { <br/>
      list-style-image: url(../images/blue_oval_bullet.png); <br/>
    } <br/>
    <br/>
    li { <br/>
      margin-top: 5px; <br/>
    } <br/>
    <br/>
    h1, h2 { <br/>
      text-align: center; <br/>
      color: black; <br/>
      background-color: #E0E0E0; <br/>
      background-image: url(../images/arrowbackground.png); <br/>
      background-repeat: no-repeat; <br/>
      background-position: left center; <br/>
      margin-top: 3px; <br/>
    } <br/>
    <br/>
    h3, h4, h5, h6, h7 { <br/>
      color: black; <br/>
      background-color: #E0E0E0; <br/>
      min-width: 10%; <br/>
      max-width: 30%; <br/>
      background-image: url(../images/linebackground.png); <br/>
      background-repeat: no-repeat; <br/>
      background-position: left center; <br/>
      padding-left: 10px; <br/>
    } <br/>
  </p>

  <p>
    You should have also made a directory called <span class="file">images</span> from your
    root directory.  Save the following pictures in your <span class="file">images</span>
    directory by right clicking on the links below and choosing
    <span class="keyword">Save&nbsp;Link&nbsp;As</span>.  DO NOT CHANGE THE NAMES OF THESE
    PICTURES!!:
  </p>
  <ul>
    <li><a href="../images/tornrightbckgrnd.png">tornrightbckgrnd.png</a></li>
    <li><a href="../images/blue_oval_bullet.png">blue_oval_bullet.png</a></li>
    <li> <a href="../images/arrowbackground.png">arrowbackground.png</a></li>
    <li><a href="../images/linebackground.png">linebackground.png</a></li>
  </ul>
  <p>
  Finally, copy the following inside of the <span class="keyword">head</span> tags of each of
  your HTML files (note that all of your HTML files should be in your root directory):
  </p>
  <p class="code">
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./styles/stylesheet.css&quot; /&gt;
  </p>
  <p>
  If all of these steps have been completed correctly, your site should look a little nicer than
  it did before!
  </p>

  <h4>For Thee Who Beee Advanced Ye Seee!!!</h4>
  <p>
    If you finish this project early, you may want to learn more about the file
    <span class="file">stylesheet.css</span> that made your site look a little different.
    The tutorial located
    <a  rel="external" href="http://www.westciv.com/style_master/academy/css_tutorial/">here</a>
    may prove helpful in helping you to create a more interesting looking site.  Otherwise,
    you may either help out other students or quietly work on another task if you are satisfied
    with your site.
  </p>

  <h4>A Little Extra Help</h4>
  <p>
    If you really aren't sure how to create your own web site, take a look at
    <a rel="external" href="./examplewebproj/index.html">this example</a> to
    see how to make yours look.
  </p>

  <h4>Rubric</h4>
  <p>
  Below is the rubric that will be used to rate your skills.  This
  project will be worth a total of 30 points toward your final grade.  Make sure you hit all of
  the important pieces.  Good luck!
  </p>
  <table class="rubric">
    <tr>
      <th>
        Category
      </th>
      <th>
        Excellent (13 to 15 pts)
      </th>
      <th>
        Getting There (10 to 12 pts)
      </th>
      <th>
        Developing (9 or less)
      </th>
    </tr>
    <tr>
      <th>
        Site Accuracy
      </th>
      <td>
        Saved web pages, stylesheet and images
        correctly and in correct locations.
      </td>
      <td>
        Created all web pages/stylesheet.  Most files saved in correct locations
      </td>
      <td>
        Did not create all web pages.  Site is not in working condition.  Files not saved or
        saved in incorrect locations.
      </td>
    </tr>
    <tr>
      <th>
        Page Accuracy
      </th>
      <td>
        Every web page followed specifications correctly.
      </td>
      <td>
        Most web pages followed specifications correctly
      </td>
      <td>
        Web pages were inconsistent with specifications.
      </td>
    </tr>
  </table>

  <hr/>
  <div id="validation">
    <p>
      <a href="http://validator.w3.org/check/referer"><img
         src="http://www.w3.org/Icons/valid-xhtml10"
         alt="Valid XHTML 1.0!" height="31" width="88" /></a>
    </p>
    <p>
      <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.learnwithmrc.com/index.php">
        <img style="border:0;width:88px;height:31px"
              src="http://jigsaw.w3.org/css-validator/images/vcss"
              alt="Valid CSS!" />
      </a>
    </p>
  </div>
</body>

</html>