Website displayed on various screen sizes

Grade 11 and 12’s must create an HTML website to present the results of their investigation. A working, three-page website can be created before the topic is even announced — the content can be added once the Phase 3 Word Report is finished.

You must use Notepad++ to code your HTML — you may not use Dreamweaver or any other web authoring software.

All your HTML files and images (and any other resources) must be in a folder called website (lowercase) in your Phase 3 folder.

You must attempt to use EVERY tag & every attribute you have learnt about at least once! Consult the official NSC Tag Sheet for the complete list.

You MUST include <!-- COMMENTS --> in your code.

Try to keep “above the fold” to minimise vertical scrolling — and of course, horizontal scrolling is strictly a no-no!

Create your first page — your home page — and save it as: index.html (all lowercase) in your website folder.

index.html must have:

  • a title (<title>)
  • a heading (<h1>)
  • a navigation bar (“menu”) with links to:
    • the home page for your website, index.html
    • two additional pages (a minimum of 3 pages is required, for example:
      • data.html
      • bibliography.html
  • a content section with a sub-heading (<h2>)
  • a footer section

The below HTML “boilerplate” can be used for your basic page:

<html>
  <head>
    <title>PAT 2020 — Your Name</title>
  </head>
  <body>
  
  <!-- BANNER -->
  <img src="images/smart.png" alt="logo" width="80" height="80" align="right" />
  <h1>PAT Topic Goes Here</h1>
 
  <!-- MENU -->
  <hr />
  <a href="index.html">Home</a> | <a href="data.html">Raw Data</a> | <a href="bibliography.html">Bibliography</a>
  <hr />
 
  <!-- CONTENT -->
  <h2>Page heading here</h2>
  <p>Text goes here...</p>
 
  <!-- FOOTER -->
  <hr />
  <p align="center"><sup>©</sup>Initial Surname</p>
  </body>
</html>

The Learner Guide says that the different sections of the web-page must be distinct that is why I have used horizontal rule lines <hr /> above and below the “menu” section and above the “footer” section.

Adapt the names of the additional 2 pages and their links in the menu section to suit your needs — you may want to have many more pages.

Add some text style

Copy-paste content from your final report into the appropriate webpages and then tag the text with the appropriate heading tags, <h1>, <h2>, <p> etc.

Add some style to your headings using a different font style and colour. Do NOT underline — underlining is reserved for hyperlinks. Remember to keep your formatting consistent and professional. Check your textbook for the section dealing with user-friendly design and the basics of good web design.

<h1 font color="green">PAT Topic</font></h1>

If you choose to up your game a little and use CSS for this (or any other reason) be sure to fulfil the requirements of the PAT by using the standard HTML tag attributes elsewhere in your website. Read more about starting out with CSS here: Starting simple CSS.

Once you have styled-up your index.html file, save 2 copies of it with the names data.html and bibliography.html.

Edit data.html and change the sub-heading (the text between the <h2> tags) in the body section of the page to read: Data

Edit the sub-heading in bibiography.html in a similar fashion.

Now open your index.html page and you have a basic website consisting of three linked pages!

Images

You need to include images on your website. Read my separate post Editing images for your website dealing with the correct handling of images for your website.

You have two simple options if you would like to include your Excel Charts in your webpage:

  1. If you have pasted your Excel Chart into your Word report, you can right-click copy the Chart and use Paste Special command to paste it as an image. You can then right-click Save as Picture… and save the Chart as an image file in your website folder
  2. You can screenshot your Chart using a screenshot tool (I use Greenshot) that outputs an image file.

Remember that all your images need to be credited!

Tables

You must have at least one table — open your data.html page in Notepadd++ and create a table using some of your Excel data.

Top tip: You could use Access’ super-efficient Export HTML Document function to output HTML.

Use alternate row colours — also known as “zebra striping” — on your table to add some detail — you can do this in one of two ways:

  1. Plain old HTML
  2. using CSS
<tr bgcolor="gray"><td></td><td></td></tr>
<tr bgcolor="lightblue"><td></td><td></td></tr>

Bibliography

You can simply copy your bibliography from your final, Phase 3 Word Report, paste it as plain text in your bibliography.html page, and style is as a numbered list.

URL’s must be coded as hyperlinks using the anchor tag:

<a href="" title="" target="_blank"></a>

Remember, the href attribute must be a fully qualified URL (it must include the full protocol in the address, e.g. http://www.).

The inclusion of the target attribute counts towards the bonus marks available for using code from outside the curriculum. This attribute specifies in which browser tab or window the URL should open. The _blank attribute value results in the URL opening in a new tab.

For an in-depth look at opening pages in a new tab read the following post: Open Hyperlink in New Tab.

Citations

There seems no clear consensus on citing work in the PAT website. Here is my take: Adding citations in HTML.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.