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>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> <p>More 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.
3. Add some text style
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!
Copy-paste content from your final report into the appropriate web pages and then tag the text with the appropriate heading tags,
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.
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. 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
<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 is as a 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. 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 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.
9. 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: