Things to know about making websites

A website consists of pages of HTML – a 'markup' language that is simple to learn. A web page needn't even be HTML but a simple text file. In the early days of the web, each web page was a separate .html file written on a personal computer then uploaded to a web server. Someone uses a web browser to request a page and the web server serves it to the browser. Nowadays, each time a page is requested, the web server serves pieces of web page together as one complete web page. This allows, for example, the same footer to be included in each page instead of every page containing its own footer. If every page has the same footer, it can be edited once and the edit applies to every web page on the site. The same applies to other standard parts, such the navigation menu, which is the same on every page.

Nobody writes web pages on their personal computer these days. Typically, you install a 'Content Management System' (CMS) on your web space and log in to write pages, add the pages to navigation menus, select different types of pages, and so on. You use a 'theme' for the entire CMS and all you have to do to create a new page is write the text, add an image perhaps, then press a button. The CMS does the rest by using the theme to structure the page automatically. A theme can be complex or simple, depending on the type of website.

The world's most popular CMS is WordPress. There are two main versions of WordPress: wordpress.org and wordpress.com. One is installed on your own web space (which you own), the other exists on WordPress web space (which you don't own). In either case, you don't actually own WordPress itself. The main difference is the degree of control you have over it. You can use your own domain name in either version but with the .com version (not on your own web space), you have to pay. I use the .org version download which I install on my own web space using my own domain names. This website is an example.

There are literally millions of WordPress 'themes'. Many are free to use. I prefer to build my own themes – such as this one which I named 'Works Unit' for no particular reason.

Web space

Web space is normally rented with a web hosting package. Mine costs about £18 per month (containing several websites) but I could manage with less. Web hosting packages come with a web server pre-installed, plus emails, databases, additional software and more. I connect to the space with FileZilla – an industry standard and free FTP program (File Transfer Protocol). You install FileZilla on your personal computer then connect to your web space. On the left side of the screen is my own files in Windows File Explorer and on the right side is a similar view of whatever I have transferred from the left, either by dragging it over or double-clicking. Files can be transferred in either direction. I can manage the web space as if it exists on my own computer but it's somewhere in London no doubt.

Technologies

A knowledge of HTML is almost essential. Fortunately it is a very simple language. A knowledge of CSS (Cascading Style Sheets) is also essential. Things are made easy by being able to search the web for technical advice every aspect of running a website. The other technologies worth knowing something about are PHP (a scripting language) and JavaScript. Perhaps also JSON, which I know very little about. WordPress is PHP.

This website uses JavaScript I did not write myself. I am no good at it so I copied it and deployed is as written. JavaScript is useful but not essential.

Which CMS to use

I first started using WordPress in 2006. My websites tend to be simple. It seemed to me that WordPress is a sledge hammer to crack a nut in my case, so I started developing my own CMS in 2008. Half my websites use WordPress, the other half use qwwwik – my own system which I continue to develop. qwwwik is partly a hobby and partly a much smaller and simpler CMS to use than WordPress and others like it. Both my WordPress sites and my qwwwik sites use the same simple 'Works Unit' theme which does everything I need.

I am tempted to drop WordPress altogether. It has become a monster whose future direction is more or less under the control of one person: Matt Mullenweg. But it works and there is an enormous body of help available on the web. qwwwik works better for me, but I am its only author so it will be maintained and updated only for as long as I am. Unless, of course, someone else takes it over some day. Either way, it is written simply in PHP. Any reasonably competent PHP developer would understand it easily and fix anything that may arise in the future. I can't guarantee it however.

The simplest and easiest way with the least knowledge and time involved is probably to use wordpress.com but you have the least amount of ownership and control. I have got one (since 2017) but I never use it.

Accordion

The HTML markup:

<div class="accordion">

<div class="tab">

<div>Accordion item 1</div>

</div>

<div class="panel">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam (more text ...)

</div>

<div class="tab">

<div>Accordion item 2</div>

</div>

<div class="panel">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam (more text ...)

</div>

<div class="tab">

<div>Accordion item 3</div>

</div>

<div class="panel">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam (more text ...)

</div>

</div>

Add as many items (or as few) as required.

Max (width)

<div class="max">

Goes full-width for up to full-width images (or anything else).

<div class="w540″>

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

White background for illustrative purposes only.

</div>

Installing the theme

• Install WordPress in the usual way: database, wp-config.php etc, then login.
• In Settings / General Settings / Site Title enter the title of the website. It will be the text shown at the top left of the website on larger screens and at the top on mobiles etc. Don't make it too long or it won't fit across a mobile screen without a line break.
• In 'Appearance' select and activate the theme 'Works Unit'.
• Create a new Page named "Home" (or whatever you want the heading of the home page to be) with the slug 'home' then go to Settings / Reading Settings and check "homepage displays a static page" selecting 'Homepage' as whatever you titled the home page as. To see 'slug' edit 'Screen Options'.
• Create a new Page named "Archive" with the 'slug' "archive".
• Install and activate plugins Akismet Anti-spam, Classic Editor, UpdraftPlus, WP-Optimize, Contact Form 7 and Remove Meta Generators.
• Install and activate my plugin 'Corrections'.
• In 'Users' select "Disable the visual editor when writing" and disable "Show toolbar when viewing site."
• Set permalinks in Settings / Permalink Settings / Permalink structure as 'Custom Structure' /%category%/%postname%.
• Create and write a 'Thank You' page with the slug 'thank-you' to thank visitors for comments if they leave any.
• In Appearance / Menus / Menu structure put 'Footer Menu' in 'Menu Name' and save menu with the Front Page and 'archive' page.
• Create a contact page if required, using the Contact Form 7 plugin.

The theme

The 'Works Unit' theme has two WordPress templates each for Posts and Pages. Four templates. They are both single-column with a fixed header at the top and a footer at the bottom. There is no 'sidebar'.

The header contains a few key navigation links. The default is the left hand link to the home page, a link to an archive page and a link to WordPress admin when logged in to WordPress. One or two extra navigation links can be added but it must be done manually by editing the header file header.php. Care must be taken not to extend the header links too far because as the screen is narrowed from full desktop towards tablet and mobile it must not fall onto two lines. It is best to add only one to the archive link, or two more at most depending on the length of the text.

The footer can contain any number of links but again it is best to limit the number to four or five at most.

Inasmuch as many websites contain a menu, the archive page serves this purpose by letting links to other Posts and Pages to be written in WordPress admin. The archive page can be renamed 'menu' but this requires a manual edit of header.php.

The main content column between the header and footer can be 700 pixels wide by selecting the default template or 1024 pixels wide by selecting the wider post or wider page template.

The default width of 700 pixels gives a readable column of text and accommodates an image file with a native width up to 700 pixels. 640 pixel wide images can be accommodated with a white border 30 pixels wide on each side (plus top and bottom). The wider width template accommodates an image file with a native width of 1024 pixels. It is generally recommended that the maximum standard webpage image widths on desktop would be between 1024 pixels and 1920 pixels. Any wider wastes bandwidth. 1920 pixels is a common width for a desktop computer screen but that includes the scrollbar so an image 1920 pixels wide would be slightly squashed so is a bit too wide. 1024 pixels is a good maximum width.

The theme contains a <div> classname 'max' that stetches the whole width of the screen excluding the scrollbar. This class can be used in either template to spread an image across the entire screen without triggering a horizontal scrollbar in any device at any width. The image must be specified as follows, adjusting the dimensions as per the image:

<img src="url.jpg" alt="" width="1024" height="520" style="max-width: 1024px;" class="w">

The <div class="max"> can be used to spread anything across the entire screen but it is too wide for readable text.

The theme contains <div class="w700″>, <div class="w640″>, <div class="w600″> and <div class="w540″> to contrain the column width to 700 pixels, 640 pixels, 600 pixels or 540 pixels as required within the wider templates or <div class="max">.

Remember to add </div> at the bottom of all <div>s.

Images wider than the screen cause a horizontal scrollbar by default, always to be avoided. The theme however generally constrains images to the width of the element they are in but it depends on how they are specified in the page. <style = "width: 100%; max-width: 100%;"> often does the trick (depending on the circumstances).

The standard desktop text size can be reduced slightly with <div class="col">. On mobiles it has no effect. Again, remember to add </div> at the bottom.

Wide image

1024 pixels wide

Galleries

160px x 160px images:

HTML markup:

<div class="flexcontainer160 row">

<div class="flexitem frame">
<div><a href="https://link-url"><img src="/img/filename.jpg" alt=""></a></div>
</div>

<!-- repeat flexitems //-->

</div>

Omit 'frame' to remove border:

300px x 240px images:

Image

Image

Image

Image

Image

Image

HTML markup:

<div class="flexcontainer300 row">

<div class="flexitem">
<div><a href="https://link-url"><img src="/img/filename.jpg" alt=""></a></div>
</div>

<!-- repeat flexitems //-->

</div>

Theme functions

WordPress themes contain a file named functions.php to add features and functionality to the site. The 'Works Unit' functions file does the following:

• Removes actions that add unwanted elements in the document <head>.
• Simplifies the <title> in the document <head> to match the written heading.
• Removes the text "Private:" from the title and heading of private pages.
• Removes the text "Protected:" from the title and heading of password-protected pages.
• Registers a footer menu named 'Footer Menu'.
• Directs submitted comments to a 'Thank You' page that has to be created when the theme is installed.
• Discourages archives to be indexed by search engines.
• Edits the password form for password-protected pages.
• Removes the comment author link to discourage spam comments.
• Excludes categories from site search.
• Removes /category/ base from category link path.
• Adds widget 'area one' to footer.

Additional styles

Default style sheet

This page uses the 'Wider Post' template 1024 pixels wide. Shrinks for mobiles. The 'Default Post' width is 700 pixels.

<div class="bg">

White box with drop shadow.

</div>

<div class="w600">

class="w600" narrows the column to 600 pixels, or use class="w540" for 540 pixels, class="w640" for 640 pixels or "w700" for 700 pixels.

</div>

<p class="statement">text</p>

<span>HEX colours</span>

<span>text colour #999</span>
<span class="red">text colour #dc143c</span>
<span class="blue">text colour #3399ff</span>
<span class="orange">text colour #e18d08</span>
<span class="purple">text colour #786abe</span>
<span class="green">text colour #37ae50</span>
<span class="greeny">text colour #649300</span>
<span class="grey">text colour #757575</span>

Style sheet breakpoints

For pages that respond to different screen widths

A 'breakpoint' is a width defined in a style sheet at which the page behaves differently than when it was wider or narrower (as the case may be). This is so the page design 'degrades gracefully' by collapsing or expanding when a user moves from wide to narrower or narrow to wider. Breakpoints cover the whole range of screen widths, from a large desktop screen to a small mobile phone screen, the main issues being readability and no horizontal scrollbars at any width.

The principle of 'cascading style sheets' (CSS) is to put all the main styles in a separate .css document that informs the HTML 'body' of a page how to behave. Style rules can also be put in the invisible HTML 'head' and 'inline' styles can be put in the HTML of the visible page. That's the cascade: style sheet » document head » inline in the HTML.

Basic structure

A <div> is HTML for a block of content. Works Unit has three 'principal' blocks: header, main and footer. The block 'main' has two IDs: #content 700 pixels wide and #wide 1024 pixels wide. The two 'parent' blocks (or <div>) can contain other 'child' blocks but those are constrained by whichever 'parent' block they are in. The child blocks become parents to other child blocks, and so on.

Breakpoints

The Works Unit theme has the following breakpoints:

Over 1101px wide: main#content and main#wide centred at 700px and 1024px respectively, main#full-width 100% width, header 100% width not centred, footer centred with no width specified.

Breakpoint 1 max-width: 1101px: main#wide (1024px) centred with width auto and 30px side margins.

Breakpoint 2 max-width: 777px: main#content (700px) and main#wide (1024px) centered with width auto and 20px side margins. Nothing at less than 777px wide has a fixed with.

Breakpoint 3 max-width: 600px: centres the header.

Breakpoint 4 max-width: 480px: is essentially as guess at mobile portrait and continues to alter text sizes etc.

max-width means anything less than or equal to the specified dimension.

The breakpoints are set to suit the column width + side margins + scrollbar. For a 700 pixel wide column the breakpoint is 700 + 30 + 30 + 17 = 777 pixels. For a screen width below the breakpoint the side margins reduce to 20 pixels and the column and its content shrink with it. Similarly for a 1024 pixel wide column the breakpoint is 1024 + 30 + 30 + 17 = 1101 pixels.

The style sheets also use the same breakpoints as, eg:

Breakpoint 3 min-width: 601px for style rules that apply to any screen width over 600 pixels.