Assignment: Portfolio Page in HTML Code - 25 points

You will be creating a portfolio page using the XHTML tags and attributes you learned thus far. You will be building this page in Notepad from scratch. Use the WebMonkey HTML Cheatsheet and Color Code reference pages provided as needed. Use your notes as needed.
Part 1:

File and Folder Structure

  • In your weddesign folder, create and save a new Notepad file called index.htm

top
Part 2:

Building the Index Page for Your Portfolio (sample)

  • Open Notepad
  • Create the basic template for your web page using the <html>, <head>, <title> and <body> tags as appropriate.
  • Save this file into your webdesign folder, name it index.htm (REMEMBER to change "File Type" to "All Formats" and add the ".htm" extension)
  • Include the following...
    • Use the title tag in the head area to title your page Web Design Portfolio of <first name> <last name> for 2005-2006
    • Add your first and last name at the top of the screen using the <h1> tag
    • Add a sub-heading called "Web Design Portfolio 2005-2006" using the <h2> or <h3> tag
    • If you want, you can use horizontal rules <hr></hr> to separate sections of the page
    • Below your headings, start typing to add a horizontal navigation bar (just text links for now) using text with the elements separated by vertical lines (shift+backward slash)
      • About Me | Q1 | Q2 | Q3 | Q4 | Links
      • Below the navigation bar, add four sets of <h2> tags and write the name of each section (one per heading)
      • In front of each heading tag, add an <a name="name of section"></a>
      • Link each navigation bar item to the target anchor with an <a href="#name of section"></a>
      • Use ordered or unordered lists for your assignments
        • Start generically with 3 items in each list (Assignment #1, Assignment #2, etc.)

    In the About Me section, include at least 2 paragraphs...

    • Introduce yourself...school, grade level, why you are in this class, what you hope to learn
    • Introduce this class...explain the purpose of the class (use information from the syllabus as needed - DO NOT COPY WORD FOR WORD)
    • In the Links section, start a list of links that are useful to you as a member of this class (e.g., Webmonkey, Visibone, etc.)

    Formatting

    • Select a new background color from the color codes online and default text color using the bgcolor and text attributes of the body tag
    • Set new colors for the link, alink and vlink attributes
    • Choose how you want to align your content (the sample has some centered text and other text is left-aligned)

top
Part 3:

Evaluation

Your assignment will be graded on completeness (met all requirements), readability (color scheme, contrast and font choices), usability (links and other effects work properly), appropriateness (language, spelling, punctuation and imagery) and overall effort.

top