1Introduction

This website template uses a responsive design to display information on a webpage.

I have used this template to publish all the content of the Practical Series website. All the pages within that website use this template.

This downloadable version of the website template is a basic set of pages and supporting files.

It is equipped with eight web pages installed by default in a user friendly directory structure. These files are accompanied by the various and supporting CSS, JavaScript and jQuery files.

To summarise it contains the following web pages:

	File	Page	Description
	index.html	Landing page	This section is the first page of the website, it is the landing page for the domain
	01-00-intro.html	Introduction	A basic introduction to the template, a summary of its contents and a brief guide to using the template
	01-02-intro.html	Introduction	An introduction to the online guide explaining the construction and workings of the template
	02-00-example.html	Example page 1	An example page showing a formally populated chapter part 1
	02-02-example.html	Example page 2	An example page showing a formally populated chapter part 2
	80-00-finally.html	Contacts, legal &c.	The finals section: contacts, acknowledgements, colophon, legal, licence and privacy &c.
	98-00-blank.html	An empty section	An empty section that can be copied and reused as required
	99-00-typicals.html	Typical examples	Typical examples of the different components that can be used within the website: figures, lightbox, tables, formula, code &c.
	Table 1.1   Web template basic pages

The other files included with the web template are all the other files we have either used or developed in the course of this discussion:

	File	Location	Description
	style.css	11-resources/01-css	The main style CSS file
	grid.css	11-resources/01-css	The responsive grid CSS file
	script.js	11-resources/05-js	The sticky navigation jQuery file
	end-mark.svg/png	11-resources/01-css/01-css-images	The Yorkshire Rose flourish
	flourish.svg/png	11-resources/01-css/01-css-images	Dividing flourish
	Table 1.2   Common Practical Series files

Common third party files:

	File	Location	Description
	normalise.css	21-global/01-css	The Normalise CSS file (standardises the appearance across browsers)
	lightbox.css	21-global/01-css	The Lightbox styling CSS file
	jquery.waypoints.min.js	21-resources/05-js	Waypoint software (used for sticky navigation)
	hypenator.js	21-resources/05-js	Hyphenation tool
	lightbox.js	21-resources/05-js	Lightbox application
	run_prettify.js	21-resources/05-js	Google prettify application
	prettify.css	21-resources/05-js/google-prettify	Google prettify styles
	lang-*.js	21-resources/05-js/google-prettify	Google prettify language files (58 files)
	Table 1.3   Common Practical Series files

Common font files:

	Woff file	Location	Description
	anda-ca-r. woff	21-global/03-font/woff	Andada — small caps, regular
	carr-c3-r. woff	21-global/03-font/woff	Carrois Gothic — small caps
	pmon-t4-r. woff	21-global/03-font/woff	PT Mono — regular
	ps-icon.woff	21-global/03-font/woff	Practical Series icon font
	ps-index.woff	21-global/03-font/woff	Practical Series index font
	pser-ta-r.woff	21-global/03-font/woff	PT Serif — regular
	pser-ta-b.woff	21-global/03-font/woff	PT Serif — bold
	pser-ta-i.woff	21-global/03-font/woff	PT Serif — italic
	pser-ta-bi.woff	21-global/03-font/woff	PT Serif — bold, italic
	ssan-t2-r.woff	21-global/03-font/woff	Source San Pro — light
	ssan-t3-r.woff	21-global/03-font/woff	Source San Pro — regular
	ssan-t3-b.woff	21-global/03-font/woff	Source San Pro — bold
	ssan-t4-r.woff	21-global/03-font/woff	Source San Pro — semi-bold
	ps-fonts.css	21-global/03-font/	Practical Series font loading file
	Table 1.4   Common font files

Page Specific Practical Series files:

	File	Location	Description	Page
	fig-00-01.svg/png	01-pages/00-00-index/02-images	Cover image (2 images)	index
	00-00-scroll.js	01-pages/00-00-index/05-js	Slow scroll jQuery file	index
	fig-01-xx.svg/png	01-pages/01-00-intro/02-images	Section images (18 images)	01-00-intro
	01-00-scroll.js	01-pages/01-00-intro/05-js	Slow scroll jQuery file	01-00-intro
	01-02-scroll.js	01-pages/01-02-intro/05-js	Slow scroll jQuery file	01-02-intro
	fig-02-xx.svg/png	01-pages/02-00-example/02-images	Section images (2 images)	02-00-example
	02-00-scroll.js	01-pages/02-00-example/05-js	Slow scroll jQuery file	02-00-example
	fig-02-xx.svg/png	01-pages/02-02-example/02-images	Section images (3 images)	02-02-example
	02-02-scroll.js	01-pages/02-02-example/05-js	Slow scroll jQuery file	02-02-example
	fig-80-xx.svg/png	01-pages/80-00-finally/02-images	Section images (2 images)	80-00-finally
	80-00-scroll.js	01-pages/80-00-finally/05-js	Slow scroll jQuery file	80-00-finally
	98-00-codeline.css	01-pages/98-00-blank /01-css	Code fragment css file	98-00-blank
	fig-98-xx.svg/png	01-pages/98-00-blank/02-images	Section images (8 images)	98-00-blank
	code-98-02.zip	01-pages/98-00-blank/04-data	Code fragment download	98-00-blank
	98-00-scroll.js	01-pages/98-00-blank/05-js	Slow scroll jQuery file	98-00-blank
	99-00-codeline.css	01-pages/99-00-typicals/01-css	Code fragment css file	99-00-typicals
	fig-99-xx.svg/png	01-pages/99-00-typicals/02-images	Section images (19 images)	99-00-typicals
	code-99-02.zip	01-pages/99-00-typicals/04-data	Code fragment download	99-00-typicals
	99-00-scroll.js	01-pages/99-00-typicals/05-js	Slow scroll jQuery file	99-00-typicals
	Table 1.5   Page specific files

There is also a template cc-ss-pagename folder that can be replicated and used for each new page you add, it contains:

	File	Location	Description
	cc-ss-codelines.css	01-pages/cc-ss-typicals/01-css	Code fragment css file
	cc-ss-scroll.js	01-pages/cc-ss-typicals/05-js	Slow scroll jQuery file
	Table 1.6   Template page name folder

In total there are 274 files and 67 directories.

The detailed instructions for using the template are available at

https://www.practicalseries.com/1001-webdevelopment

• There are a number of files called .gitkeep. These are placeholders (dummy) files that are used in folders that would otherwise be empty (they are very small files).

The reason I’ve done this, is, if you Git or GitHub, empty directories will be stripped out of the repository, and this can be very annoying if you’ve spent ages setting up a directory structure. Hence, I’ve put a .gitkeep file in each folder; it is just a text file with a few explanatory words in it.

If you intend to use Git or GitHub for version control, you will thank me.

If you do not intend to use Git or GitHub, you can either just ignore the files, or search for them and delete them all. They don’t do anything.

The template also has two other Word files in the root folder (where index.html is). These are:

• ps-html-conversion.docm

• ps-website-content.docx

The conversion document is used to convert text (written in a Word document) into text that can be pasted into a web page (it handles all the special characters and escape codes). I explain how to do it here.

The content document is a word document with various styles setup to match the <span> inline text styles used on the website. I’ve included it so you have a document to start writing your website content. The document is not entirely empty, it contains some instructions and a few of my thoughts about the world in general.

Well, I can’t tell you what your website should be about.

I do have some ideas — Saluki dogs seem to be popular — people always like pictures of dogs, Land Rovers are also popular, here’s a couple of pictures to get you started:

Apparently pornography is popular too; I’ll let you take your own pictures.

Now, while I can’t tell you what your website should be about, I can offer some pearls of wisdom about how to produce it.

I can’t stress strongly enough:

do not write the website content directly in the text editor

If you do it will be full of typing errors.

The best way to write the content for a website is in a word processor; I use Microsoft Word (specifically Word 2010).

The whole explanatory website (where you downloaded this template) is written in Word. It looks like this:

If you have the pdf version of the website (I give it to all those who donate £5 or more), then you are essentially seeing the document that was written in Word.

There are several advantages to writing the website in Word^†1, for a start it will highlight any spelling mistakes. But word does other things too, it will convert straight quotes to curly quotes, it changes dashes to em-dashes where appropriate, it allows all the styling we want on the website: tables, numbered lists, headings &c.

It also divides the website up into the correct chapter, section and subsections; and it allows everything to be given a number (figures, tables, code fragments, equations &c.) and this makes it easier to keep track of things on the website.

My original though when I started all this, was that I wanted a website that could display a document and make it look something like a professionally produced Word document.

So write your website in Word.

There is one other great advantage to Word, let’s say you’ve written and published the website and everything is up and running.

You will at some point either notice a mistake on the web page (this usually happens when you haven’t looked at it for a while and you go back and notice all the things that escaped your proofreading the first time) or you might just want to change it.

At this point, I make the changes in the Word document (I up rev it, as we engineers say), and then implement those changes on the website. Now Word allows me to make changes to the text and track those changes (I can see what I’ve modified and how it has changed). This makes it easy to change the document (with tracked changes) and then easily identify the bits of the website that need to change. Once I’ve made the same change on the website, I accept the change in the Word document and move on to the next change.

†1		It doesn’t have to be Word, any word processor will do. I use Word so I’m just going to use Word as the terminology — that said, the two files I’ve given you are Word files.

I suggest you strip everything out of the template that you don’t need, but leave the 98-00-blank and 99-00-typicals sections (these are useful, they hold basic pages and examples of all the other things that you will need, it’s handy just to copy the thing you need, a table for example, and then mess about with it on you web page until you get what you want). You can delete the blank and typicals pages when you’ve finished your website.

Copy the 98-00-blank.html page and rename it for the page you are configuring, let’s say 05-00-testpage.html.

Now we need to create a 01-pages/05-00-testpage folder and get the necessary files:

Copy the 01-pages/cc-ss-pagename folder and rename it as (in this case): 01-pages/05-00-testpage.

In the 01-pages/05-00-testpage/01-local-css folder rename cc-ss-codelines.css as 05-00-codelines.css.

In the 01-pages/05-00-testpage/01-local-js folder, rename cc-ss-scroll.js as 05-00-scroll.js.

We now have all the necessary files and folder for the new page.

Next, open the new 05-00-testpage.html in brackets, using the blank sections that are in there, configure the first section you need: give it a heading, renumber the IDs add the correct meta tags at the start, add the previous and next links in the navigation bar and create the TOC (or copy it from another section if it already exists) &c.

I find it easier to do just one section at a time.

Once you have an empty section, waiting for some text, it is time to transfer the content from your Word document to the website.

Having written your website in Word, extensively proofread it and given it to other people to comment on (and usually ignored whatever they’ve told you). You are ready to convert it to a website.

To do this you are going to need to use that conversion document that you downloaded as part of the web template:

• ps-html-conversion.docm

Look at the following extract from a Word document:

An HTML document contains both text (the words displayed on the web page) and elements that control how the text is formatted — how the text appears, its colour, size &c.. HTML elements are usually made up of a start tag and an end tag (see § 5.1). The start tag and the end tag always have the same tag name and this is always surrounded by the less than “<” and greater than “>” symbols (these denote that what is within is a tag). The tag name for an end tag is always the same as the start tag but is preceded by an oblique “/”. Note: Some elements do not have an end tag; e.g. <br>, <img> &c.

If you look at this, there are several characters in there that don’t work particularly well if they are just copied directly into HTML. The obvious ones are the < and > characters, other less obvious ones are the curly quotes, these have to be entered with &codes (see here) as does the & (of &c.) as well as the section mark §.

There are also other characters, there is an em-dash (a wide dash) in the first paragraph, and there are some invisible “non-breaking spaces”, these are usually inserted where things should not break across lines, the most common being after a section mark (§), it is not usual to allow the number to separate from the section mark. The same is true of numbers and their units.

The long and short of this is that we can’t just copy text from a Word document and stick it between <p>...</p> tags. We need to make it HTML friendly first

To do this you need your Word document with the website content in it open and the conversion document (above) also open with macros enabled (if it asks you, it depends on your Word settings, if you have macros enabled or not).

The process is a follows:

1. Select the text that you want to convert in your web content document (I tend to do a page at a time):

2. Copy the text and paste it into the conversion document and select it again:

3. With the text selected in the conversion document press ctrl+alt+R to run the conversion macro:

4. Now copy each paragraph in turn and paste it in between <p> tags in brackets:

5. 1 The last thing to do is add the <span> elements to apply the correct text formatting (the word elements in the first paragraph should be in italics, and the tags in the last paragraph in the code style, highlighted below):

6. 2 Check the web page:

If you are using images on your website (you almost certainly will be). These will probably be svg files, png files or jpeg files.

Images tend to be quite large files. Take the image of Henry at the start of the section, here it is:

This image is a png file, in its native state, it is 1511 × 1790 pixels and is 4.77 M Bytes on my machine. It is a big file.

On my website, the biggest width an image can have on the website is 748 pixels (this is the maximum width of the central column). So there is no point in the original image being 1511 pixels wide is there?

Well, yes there is, as a rough rule of thumb, the native width of an image on a website should be twice its actual maximum visible width.

You might think this odd, but it is to make the image look better on very high resolution monitors.

Where 4K and 5K monitors are used, they do not usually run at their native resolution (objects on the screen would be just too small), Windows usually scales the screen to give an apparent resolution that is smaller (say 2560 × 1440), this means that for a 5K monitor (native resolution of 5120 × 2880) every apparent pixel (driven by Windows) is actually 4 pixels on the monitor (2 across by 2 high).

It means that the monitor can resolve smaller difference in the image; hence it is better to have higher resolution images than you need.

Generally for very big images, reduce the size of the image (in proportion) until its width is about 1500 pixels (about twice the maximum width of 748 px).

If the native image is smaller than this, do not make it bigger, that will pixelate the image and make it look worse, instead fix the maximum width of the image, see here.

The next thing we can change is the number of different colours in the image. This can be done by using an image optimisation site, there are loads of these, the one I use is Optimazilla.

This is an easy to use site, just go to the page and drag the image you want compressing into the central area (where it says drop you files here). You can drag up to 20 files at once.

When I uploaded the Henry image, it gave me this:

That really is one stupid looking dog. I’m pretty sure he’s smiling.

The image on the left is the original image, the one on the right has been compressed, the number of colours has been reduced to 221 unique colours (the original image had 87,000). Buggered if I can see the difference.

The number picked by the website (221 in this case) is just a guess, feel free to reduce it further, play around with it, when you are happy click the download all button to get the minimised version.

I eventually reduced the colours to 20 on this image; it brought the image down to 716 KB (an 89% reduction). I’ve shown the original here with the compressed version below:

I’m not sure I can tell the difference, if I zoom right in, you can see where the image quality is reduced:

In close up, you can see that the right image is becoming slightly blocky and pixelated. You have to judge it yourself.

Under most circumstances your image file size can be compressed to in excess of 75% with little noticeable reduction in quality.

I always compress my images.

The Optimazilla site will compress most images: png, bmp, jpeg &c.

It won’t compress svg files though. For that you need kraken.io.

This does exactly the same for svg files, just drag and drop into the drag and drop area and click the download file underneath.

Svg files tend to be smaller by their nature; even so, you will get about a 60% reduction in file size.