Task ② ⇒ web development

Start off by showing a little facility with hard coding a page to prepare ourselves for the main task

This task has two components

The first component is to demonstrate some hard coding skills, both with HTML and with CSS. The second is to complete a fuller multi-level web site.

website creation task logo

Subtask 02.01

Subtask 02.01 is to create an initial hard-coded homepage, a page we will use in class to practice other skills. Use a basic text editor and type in the text on the tags page of the HTML session class notes.

Create a folder on your computer and name it "subtask_2.1", then save the file as index.html in the folder you just created so that it will display as the first page in that directory. This may be the basis of your fuller task 02 website, but it does not have to be. You may wish to use this hard-coded page solely for HTML practice in class, but create a totally individualized, fuller, multi-level personal web site according the specs below.

FTP the entire "subtask_2.1" folder to your public_html space by 2359 on day before the CSS session, and tell me to look at it via an email which gives me the URL to use. This subtask component is required just to compel you to try out hard coding.


website creation task logo css

Subtask 02.02

Subtask 02.02 is to link your initial hard-coded homepage to one of a set of external CSS stylesheets. Use a basic text editor and link the page you created for subtask 2.1 to one of these CSS sheets

You may wish to experiment with each of the stylesheets to see which one most suits you. You may also wish to add different kinds of HTML tags on your 2.1 page to see how the different stylesheets cause them to display.

Update "subtask_2.1/index.html" page and update the entire "subtask_2.1" folder to your public_html space by 2359 on day before the working with the layers session. This subtask component is required just to compel you to try out linking to an external CSS stylesheet.


website creation task logo css

For the second part of this task, you are to create a fuller, multi-level personal web site.


You may use any applicable tool to do this task. You may hard code your site using only a text editor, like Notepad or Notepad ++. You may use a familiar tool, like Microsoft Word, to create your site, paying close attention to the peculiarities of using a tool optimized for text as a tool to create web pages. You may use an html editor - any free editor or one of the editors in the lab such as Dreamweaver.

You may use this as an opportunity to try out different things because the requirements for task success are fairly constrained and provide you ample experimental leeway.

You will have several models to look at for ideas. You may make your site exactly like the examples if you wish, but I hope that you will find this task useful enough to custom-build your sites to meet your own needs and design ideas.

You may build upon your hard-coded initial page, or you may use a template to create an entirely different look. But the site must meet the conditions specified for this task.

You will create a web site for use in your work with this and other classes. In its structure, your site will look something like this diagram (which, coincidentally, is an image map so you can click on any page and go directly to it).

home page resume classes interests markup task spreadsheet task databases task presentations task image map of web site organization diagram

In particular, your site will include the following:

A top level home page that will incorporate at least your name, your email address [which should not be retrievable by a web crawler], and links to at least the second level pages on your web site
Three second level pages
  1. A second level page about you. The information on it may be real or imaginary, but it needs to be somewhat professional. The page needs to include a link to a pdf version of an on-line résumé. Again, the information on the résumé may be real or imaginary, but it needs to be somewhat professional.
  2. A second level page that lists all the courses you are currently taking (even if this is only this one). Put links on this page to the home pages for each class you are taking so that you can always find the bookmark for your class pages.
  3. A second level page that introduces topics or items of interest to you. This second level page should incorporate a list of "the ten cultural works that have most influenced your life or opened up new windows on the world", similar to this model [look at page 47 of the text, or page 5 (3 of 4) of the PDF], but you can use the interests page as a palate to place anything you want on it
Four third level pages
  1. In the model above, there is a third level page for each of Tasks 3-6. In this model, for Tasks 3-6, when you complete your tasks, you will post them on your task page and tell me via email that they are there for me to retrieve. You will do this by placing an object of your choice on each of these pages and the object will be hyperlinked to the completed task file which will be stored in your password protected directory.
  2. If you wish, for your design considerations, to replace the third level task pages with third level interests pages, you may do so. But you will then need to place hyperlinks to the completed tasks on your second level classes page (so that your site will include links to your completed tasks)

Look and feel

Pay attention to ITS's 14 Web Commandments (they are about two-thirds of the way down the linked page) as you design your site.

Keep your site consistent in look. If you don't choose to use a template, at least ensure that all the pages share a similar look in terms of backgrounds, font style and color, and use of bullets.

Don't overload your home page. Keep it simple so that it loads quickly


use hyperlinks (either as text or as linked image objects) to ensure the user can navigate throughout your site.

Every page in the site should have hyperlinks to your home page.
All pages should have links to other pages on the same level in the site structure. In our example above,
  • about should have links to home, classes, and interests
  • classes should have links to home, about, and interests
  • interests should have links to home, about, and classes
  • each of the four task pages should have links to all other task pages
All pages should have links to pages one level below it in the site structure. In our example above,
  • home would have links to about, classes, and interests
  • classes would have links to each of the four task pages
All pages should have links to pages one level above it in the site structure.
  • the links to home will suffice for this requirement for about, classes, and interests
  • each of the task pages should have a link to the classes page and to the home page

Add some dynamic HTML to your site

Add at least one example of a server side script and at least one example of a client side script somewhere on your site.

W3C Validation

At a minimum, your home page needs to meet W3C validation for HTML and for CSS. When it validates, you may, if you wish, use the image that comes from W3C in the design of your home page.

Saving to a server

When you create this site, create it to a folder on your computer give the folder the name you want for your site.

When you publish it to Isis, publish the entire folder.


After you have published your web site, send me a note telling me that it is ready for viewing and tell me your site's URL so I can find it. When I type in  http://www.unc.edu/~yourOnyen or  http://www.unc.edu/~yourOnyen/yourFolderName I should open up your home page. This means your home page should be named index.htm or index.html.



The task 02 gradesheet contains the specific standards and their weighted values.