Hyperlink pages and Site Maps — A small website with multiple pages. 

Alternative task: 
Hyperlink pages and Site Maps — Roleplaying and Storytelling
http://pad.p2pu.org/SoWChallengeCYOA

Suggest another alternative task:
Can you think of another Web Challenge that allows learners to demonstrate their understanding of hyperlinked pages and site maps?

Let us know!




What You're Going to do.
Twenty years ago, the most revolutionary and important feature of HTML and the HTTP was the ability to hyperlink and create connections between documents. Not only could references to specific documents such as scientific papers be easily included in a text, it became easier to move through pages of contents in a non-linear order.  

No longer were pages of a document ordered one after another, they could be linked together and accessed in many different sequences. Describing the way that pages linked together no longer relied on page numbers, so web developers and information architects started using site maps.

In this task you'll create a series of pages joined together by hyperlinks. You'll also share your script and produce a sitemap that describes how the pages are linked to each other. 


What you're going to produce.

You'll create a collection of hyperlinked HTML pages to make a simple  website  and will produce a sitemap that illustrates the pages and pathways through the site's contents. 

Your site will be made up of multiple pages that are linked together. Each page you create will present one aspect of the site's topic and will link to other, related pages within the website.

You'll use some basic HTML and CSS skills to create your web pages and their content. Your sample website could be about your hobby, a site you're preparing for a friend or a concept of a larger site you'd like to develop later.  This site will be used as a core component in your online portfolio.



As a rough guide you should produce:
   * a small website made up of 8 or more related pages
   * HTML pages that mark up the content of the site (these may include images)
   * a CSS page that consistently styles at least the font of your pages
   * A sitemap sketch or document that maps out the pages and their connection to each other.


Remember
Remember, we're primarily working through this task to learn how hyperlinked pages connect together.

Why you're doing it.
Even with a simple website it's important to work out how the pages are connected to each other. Developing a sitemap to demonstrate the structure of a site is a useful planning approach.

What you're going to need.

• Internet Connection - for research and publishing.
• A Blog or portfolio – to publish your work on
• A web server – to publish your work on
• Pen & Paper - to sketch out your ideas
• A text editor - to code your pages in
• Tools/Software - to bring your ideas to life
• Time - 1-2 hours of research, 1-2 Hours of time to sketch your ideas out and as much time as you need to bring them to life.
• Belief in yourself - Don't doubt the quality of your idea by telling yourself that your idea isn't very good. It's very rare that an idea starts off as good, stick with it and it'll turn into a gem. You can always 'borrow' an idea from someone else as long as you remember to reference their work.*

Publishing your work.
You should publish your work on your web server. You should also write a blog post reflecting on the processes you went through, what you've learned, ideas you do or do not agree with and any ideas you have about taking this further.

When you've published your work let your study group know ( Tweet, P2PU wallpost, Facebook, Google+ etc etc ) about it and get ready to reply to the influx of comments about your website. Take criticism on board, be gracious of compliments and treat others as you'd like to be treat yourself.

If you continue to refine your site idea, you should create archive copies of your experience. Saving multiple versions of your site will allow you to review your previous work and this makes it easier to track how quickly you've learnt. 


A Few Resources.
   * Web Standards Curriculum: Planning out a Website [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site]
   *  A visual vocabulary 
for describing information architecture and interaction design - http://www.jjg.net/ia/visvocab/
  * Smashing Magazine: Starting Out Organized: Website Content Planning The Right Way
http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/

Remember this list is just to get your started - collaborate and share with your group.

Improvements or Amendments?
Help us improve this task and let us know how we could make it better.



* Respecting other people's work is an important part of working on the web.