Previous post: Phase 3 final report
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 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 use Notepad++ to code your HTML — you may not use Dreamweaver or any other web authoring software. Read my post Coding HTML with Notepad++ to get the most out of your code editor.
In this post:
- HTML folder
- HTML boilerplate
- Add some text style
- Embedding your Google Form questionnaire
1. HTML folder
All your HTML files and images (and any other resources) must be in a folder called website (lowercase) in your Phase 3 folder. All of your website assets (HTML files, images, etc) must be saved in this folder.
2. HTML Boilerplate
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 (
- a heading (
- 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:
- 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 2021 — Your Name</title> </head> <body> <!-- BANNER --> <img src="logo.png" alt="logo" width="80" height="80" align="right" /> <h1><font color="DarkGreen" face="Arial">PAT Topic Goes Here</font></h1> <!-- MENU --> <hr /> <a href="index.html">Home</a> | <a href="findings.html">Findings</a> | <a href="bibliography.html">Bibliography</a> <hr /> <!-- CONTENT --> <h2><font color="DarkGreen" face="Arial">Introduction</font></h2> <p>Text goes here...</p> <p>More text goes here...</p> <!-- FOOTER --> <hr /> <p align="center"><font color="DarkGreen" face="Arial"><sup>©</sup>Initial Surname</font></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.
3. Add some text style
Add some style to your headings using a different font style and colour. Read the post Expressing colors in HTML for more.
<h1><font color="DarkGreen" face="Arial">PAT Topic</font></h1>
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.
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 (or more) copies of it with the names findings.html and bibliography.html etc.
Edit findings.html and change the sub-heading (the text between the
<h2> tags) in the body section of the page to read: Findings
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!
Copy-paste content from your final report into the appropriate web pages and then tag the text with the appropriate heading tags,
<p> etc. The Introduction from your Phase 3 report should appear on the index.html page, your homepage.
Don’t forget the obvious small touches such as adding
<i> where appropriate. See the post on the <abbr> tag and add some extra-curricular tags to your content.
You will have copied the citations from your Word document along with the rest of the text. Code these citations as hyperlinks to footnote-like references to your sources (thereby emulating Wikipedia).
If you have a page with a large amount of content, consider creating a list of hyperlinks at the top of the page to navigate easily to the relevant location on that same page ( as I have done on this page). This is described in the post Hyperlink to a location on the same page.
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:
- 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
- You can screenshot your Chart using a screenshot tool (I use Greenshot) that outputs an image file.
In addition to the required
src attribute, all your images must have
Remember that all your images need to be credited (see the post on Adding captions to images in HTML)!
You must have at least one table — open your data.html page in Notepadd++ and create a table using some of your Excel data.
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:
- Plain old HTML
- using CSS
<!-- Zebra-striping in HTML table --> <tr bgcolor="gray"><td></td><td></td></tr> <tr bgcolor="lightblue"><td></td><td></td></tr>
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 it as an ordered (numbered) list.
URL’s must be coded as hyperlinks using the anchor tag:
<a href="" title="" target="_blank"></a>
href attribute must be a fully qualified URL (it must include the full protocol in the address, e.g.
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 a webpage in a new tab read the following post: Open Hyperlink in New Tab.
There seems to be no clear consensus on citing work in the PAT website. Suggesting that the
<cite> tag (included in the DBE CAT curriculum in 2021) should be used to create citations is misguided as the w3schools.com website makes clear. My take on the topic is here: Adding citations in HTML.
10. Embedding your Google Form questionnaire
If you used a Google Form questionnaire in Phase 2, you can embed the Form in your HTML using the code snippet provided on the Embed HTML tab of the Send settings of the Google Form.
- Select the HTML Embed tab
- Adjust the Width and Height is required
- Click the Copy button to copy the HTML code
Paste the code into the HTML page that you created in your website folder for this purpose. Below is an example of an embedded Form: