<%@LANGUAGE="VBSCRIPT" %><% Response.CacheControl = "no-cache" %>
Exercise #4 (Due Beginning of the next Lab Period)

Turn in:

  • A folder named your "Lastname, Firstname" containing:
    • index.html (with links to the other 5 pages)
    • layout1.html (with links)
    • layout2.html (with links)
    • layout3.html
    • layout4.html
    • layout5.html
    • L4_fig1.jpg
    • L4_fig2.gif
    • L4_fig3.gif
    • L4_fig4.gif
    • L5_fig1.gif
    • L5_fig2.gif
    • L5_fig3.gif
    • L5_fig4.gif
    • L5_fig5.jpg
    • L5_fig6.jpg

Details:

Now that it is evident that you are a competent, efficient and effective web developer, the infamous professor would like for you to tie together all of the various papers that you have created and formatted using a single page that will allow people to easily see all the papers and instantly go to them. This task will require you to create a site designed around the five previous papers you have formatted in XHTML.

In general the "home page" is a list of links that will jump the users to the appropriate paper so that they can read it online. This page should be named index.html. The home page should include:

Expand/Collapse Section ImageExercise Specifications

  • Title the homepage "Articles by the Infamous Professor" and use <h1> for it.
  • Add a line beneath the title and enter "Site Created By" and your name. Use <h2> for this.
  • Include the title of the paper (linked to the paper). Use <dt> as described below.
  • A brief description of the paper (the abstract will probably work for this). Use <dd> as described below.
  • Tip: A definition list would work nice for article title and abstract! Use <dl> to surround the entire definition list. Inside of the <dl> and </dl> tags, use <dt> for the title and <dd> for the abstract of each paper. Also, you may need to use a couple <br /> tags at the end of each abstract to add a little white space into the list. Look in your book for more information on creating definition lists.
In addition to creating the home page, you'll also need to go back to two of the papers you formated and modify them so that they are more "web-smart" (use layout1.html and layout2.html). In the papers you have already webicized, go back and
  • Add hotlinks in appropriate places within the papers, such as URL references or email addresses that are mentioned in the papers. Hint: use Notepad's Find command to quickly find an @ for email addresses or search for http:// for URLs.
  • Add named anchors into the paper that jump the reader to the references. For example, when a reference appears in the body of the paper, it should be linked to the references section at the end of the paper.
In all of the papers you should:
  • Modify the non-visited link color to RGB color: 204, 153, 51
  • Modify the visited link color to RGB color: 51, 51, 153
  • Modify the active link color to RGB color: 255, 51, 0
     
  • For this, place a <style> ... </style> tag inside of the <head> tags.
    • Inside of the <style> tags, define the link, active, and visited styles of the anchor tag
      • Example: a:visited {color:#333399; background:transparent;}

Expand/Collapse Section ImageFinalization

Finished example - index.pdf


Note: This exercise is to be done by hand/hard-coding. No editors!