Right-click anywhere on the page and, from the pop-up menu displayed, choose View page source (Chrome or Mozilla Firefox).
In the source code of the web page, click the link to the stylesheet file named privacy.css.
The CSS file now opens in a new tab of your web browser.
Right-click on the displayed CSS file and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox).
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.
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.
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.
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.
Copy and paste your privacy.html file into the box named Enter the Markup to validate.
Click the Check button.
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.
Copy and paste your privacy.css file into the box named Enter the CSS you would like validated.
Click the Check button.
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.
Uploading your files to GitHub
After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.
Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories.
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.
The next GitHub screen displayed should look as follows.
Click the Upload files button.
Select or drag-and-drop the privacy.html and privacy.css files to upload them to your GitHub account.
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:
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.
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.
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.
At the lower-right of this screen is a button named Start Coding. Click on it.
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.
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.
Next, click the 2: Layout heading to view your options. Accept the default layout of Block.
Click the 3: Palette heading and accept the default first option. It shows a yellow button against a black background.
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
Click the 6: Custom text heading to view the message that will be displayed to the website visitor. You need not change this.
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.
But before you copy these two items, you need to create a file to copy them to.
Choose File | Save As ... and save the file in your c:\\websites\templates folder with the name privacy-template.html
Click anywhere in this new, empty file, hold down the SHIFT key, press the exclamation mark key ! and then press ENTER.
Visual Studio adds some 'standard' HTML tags to your file as shown below.
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.
You are now ready to copy-and-paste to your file.
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.
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.
In Visual Studio, save your privacy-template.html file.
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.
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.
In future, whenever you need to add the privacy pop-up message to a web page, you can simply:
Open this privacy-template.html file in your web browser
View the page source code
Copy-and-paste the CSS link to the <head> of your web page and