Sample Privacy Page

Contents  >

HTML Project: 8

Introduction

In this project you will a privacy page for your website. You will use the sample JavaScript code provided by the online service by Insites to create a 'pop-up' message for display to your website visitors.

You can display a finished version of this page by clicking the image below.

Project Privacy

Contents

Project folder

Download the HTML file

Download the CSS file

Update the meta tags

Update the Google Analytics Tracking ID

Validate your HTML file

Validate your CSS file

Upload your files to GitHub

Create the privacy ‘pop-up᾿ message

Project folder

The web page and stylesheet you will work with in this project are stored in your main C:\websites folder on your computer. So you do not need to create a separate sub-folder.

Download the HTML file

Follow these steps to download the HTML file to your websites folder.

  1. Go to the HTML file for the privacy web page at this web address:   https://ibat-web-dev.github.io/privacy/basic/privacy.html
  2. Right-click anywhere on the page (except on an image) and choose View page source (Chrome or Mozilla Firefox).
  3. Right-click on the displayed text and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Project Privacy
  4. In the File name: box, change the name of the file to privacy.html. Project Privacy
  5. In the Save as type: dropdown list, change from the default value Webpage, Complete to Web Page, HTML Only. Project Privacy
  6. Save the file as privacy.html file in your C:\websites folder.

Download the CSS file

You will now download the CSS file to your websites folder.

  1. Go to the HTML file for the privacy web page at this web address:   https://ibat-web-dev.github.io/privacy/basic/privacy.html
  2. Right-click anywhere on the page and, from the pop-up menu displayed, choose View page source (Chrome or Mozilla Firefox).
  3. In the source code of the web page, click the link to the stylesheet file named privacy.css. Project Contact   The CSS file now opens in a new tab of your web browser.
  4. Right-click on the displayed CSS file and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Project Privacy
  5. Save the privacy.css file in your C:\websites folder.

Your main websites folder should now contain the two files named privacy.html and privacy.css as shown below.

Project Privacy

Update the meta tags

In the <head> of your privacy.html web page, within the <title> and <author> meta tags, you can see the name 'Mary Smith.'

Replace this with your own name, and save the HTML file.

Project Privacy

Update the Google Analytics ID

Near the top of your HTML file, just before the closing </head> tag, you can see a sample Google Analytics Tracking Code.

Project Privacy

Each Google Tracking Code has a unique ID in its first and last line. Replace the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

When finished, save the privacy.html file.

Validate your HTML file

To check your privacy.html file is correct, use the official W3C Markup Validation Service. Follow these steps.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Project Privacy
  3. Copy and paste your privacy.html file into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your privacy.html file, fix the errors, save the file, and copy the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validate your CSS file

To check your privacy.css file is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Project Privacy
  3. Copy and paste your privacy.css file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors, return to your privacy.css file in Sublime Text, fix the errors, save the file, and copy the entire file again.  In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Note: The CSS Validator cannot process fluid typography styles. So ignore any messages such as those below.

Powerpoint Project

Uploading your files to GitHub

After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   github-repo
  3. The next GitHub screen displayed should look as follows. GitHub Upload
  4. Click the Upload files button. github-upload-portfolio
  5. Select or drag-and-drop the privacy.html and privacy.css files to upload them to your GitHub account. Colours and Web Design
  6. After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/privacy.html

It may take a few minutes for your uploaded files to appear on GitHub.

Create the privacy ‘pop-up’ message

Now that you have created a privacy page and uploaded it to your account on GitHub, your next step is to create a ‘pop-up᾿ message to include in your web pages. The easiest way to do this is to use the privacy pop-up message creator from Insites.

Before continuing, ensure you have a sub-folder named templates in your main websites folder.

Project Privacy

You will use this folder as a place to store HTML and CSS snippets you can copy-and-paste into your web pages and stylesheets.

  1. Go to the Insites web page at this web address:   https://cookieconsent.insites.com/ Project Privacy Click the link named Download Open Source.
  2. Clicking this button does not actually download any files to your computer. It simply brings you to another web page named 'Download Cookie Consent'. See below. Project Privacy At the lower-right of this screen is a button named Start Coding. Click on it.
  3. You are now ready to work through the various Configure options displayed at the left of this screen. This will generate the pop-up message in the Copy the code section at the right of the screen. Project Privacy
  4. On the left of the screen, under the 1: Position heading, you can see that the Banner bottom option is selected by default, You need not change this. Project Privacy
  5. Next, click the 2: Layout heading to view your options. Accept the default layout of Block. Project Privacy
  6. Click the 3: Palette heading and accept the default first option. It shows a yellow button against a black background. Project Privacy 
  7. Click the 4: Learn more link heading and the then click the second option, named Link to your own policy. In the box displayed, enter a web address similar to the following, where username is the username you have chosen for your GitHub account:  https://username.github.io/privacy.html Project Privacy
  8. Click the 5: Compliance type heading and select the first option, Just tell users that we use cookies. Project Privacy
  9. Click the 6: Custom text heading to view the message that will be displayed to the website visitor. You need not change this. Project Privacy
  10. On the right side of the screen, you can see two blocks of code that have been created for your pop-up privacy message.
    • The first is the link to the CSS stylesheet file that controls the appearance of the pop-up message. Project Privacy
    • The second is the JavaScript code that creates the pop-up message. Project Privacy
    But before you copy these two items, you need to create a file to copy them to.
  11. Open your Visual Studio text editor choose File | New File to create a new HTML file to store both the CSS link and the JavaScript code for the privacy pop-up message. Project Privacy
  12. Choose File | Save As ... and save the file in your c:\\websites\templates folder with the name privacy-template.html Project Privacy
  13. Click anywhere in this new, empty file, hold down the SHIFT key, press the exclamation mark key ! and then press ENTER. Project Privacy Visual Studio adds some 'standard' HTML tags to your file as shown below. Project Privacy
  14. Change the text in the <title> tag from 'Document' to 'Privacy Template'. After, between the closing </head> tags and the opening <body> tags, press ENTER a few times to add a few blank lines between them. Project Privacy You are now ready to copy-and-paste to your file.
  15. In your web browser, return to the cookie code generator screen.
    • Click the Copy HTML button, switch to Visual Studio, and paste the text just before the closing </head> tag of your privacy-template.html file as shown below.   To make your web page easier to read, use the ENTER key to add a blank line before and after the pasted text. Project Privacy
    • Next, return to the cookie code generator screen.   Click the Copy code button, switch to Visual Studio, and paste the text just before the closing </body> tag of your privacy-template.html file as shown below. Project Privacy
  16. In Visual Studio, save your privacy-template.html file.
  17. In your web browser, you can now close the online cookie generator tab.

In your privacy-template.html file, you will find it helpful to add the following or similar comment line in the </head> section above the link to the CSS cookie stylesheet.


<-- Link to stylesheet for Cookie Consent Popup Message -->

Adding such a comment line will make the <head> sections of the web pages you create easier to read. See the example below.

Project Privacy Also, add the following comment line just above the JavaScript code.

<-- JavaScript for Cookie Consent Popup Message -->

As a final step, check that the link to the privacy page of your website is correct by copying-and-pasting the address into a new tab of your web browser.

Project Privacy

In future, whenever you need to add the privacy pop-up message to a web page, you can simply:



Return to Contents.