Categories
PAT Phase 3

Phase 3 HTML website

Grade 11 and 12’s must create an HTML website to present 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).

It must have:

  • a title
  • a heading
  • a navigation bar (“menu”) with links to…
    • a 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
  • a footer section

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

<html>
  <head>
    <title>PAT 2020</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>&copy;</sup>Surname Initial</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 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

Use the appropriate heading tags, <h1>, <h2> etc. Add some style using a different font style and colour. Do NOT underline – underlining is reserved for hyperlinks.

<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.

Tables

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

Bibliography

You can simply copy your bibliography from you final, Phase 3 Word Report, paste it as 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 _blankattribute value results in the URL opening in a new tab.

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.