Background-size CSS property

Using CSS background-image gives you lots of style options, but the major drawback is that it destroys the accessibility. My initial idea was to apply the background to the <img> tag to allow the alt property, but the browsers interpret no ‘src’ attribute in the tag to mean the image is missing. This often causes […]

HTTP Requests

The process for requesting and receiving a web page (Wijesinge, 2017): 1. The URL is sent to a DNS (Domain Name Server) that provides the IP address of the site. The caches are checked first. 2. Browser opens TCP connection with the web server. 3. The server receives a HTTP GET request, serves back the […]

CSS ID and Class

The id selector is marked with a hash in CSS (#id_name) and the class selector with a dot (.class_name). The id selector can only be used once on a page – it is useful to directly target an individual element. For example a logo at the top of the page that only appears once could […]

Printer friendly

To create a printer friendly page I initially experimented with swapping the .css file using the code below: HMTL: <link rel=”stylesheet” type=”text/css” href=”./css/main.css” id=”printswap”> <button class=”printBtn”>Printer Friendly</button> JS: function printerButton() { document.getElementById(‘printBtn’).addEventListener(‘click’, function () { printer = false; document.getElementById(‘printswap’).href=’./css/printer.css’; }); }; The code works, the .css file is changed and immediately reloaded, but I quickly […]

CSS Grid

The CSS grid is a layout tool that builds upon previous advances made with flex-box. In the early days of the web the table tag was co-opted to use for layouts. This worked for a while, but in the modern age of the semantic web tables should only be used to display tabular data. Grid […]

CSS: Normalise vs Reset

We normally think about CSS in terms of the author style sheets (the CSS written inline in the HTML style tags, or placed in the head of the HTML or linked to the HTML document via an external CSS file). There is also a user agent style sheet applied first (this is the browsers own […]

HTML Syntax

HTML syntax from W3C: http://w3c.github.io/html/syntax.html HTML Meta Tags: Basic webpage should start like this: <!DOCTYPE html> <html lang=”en-GB”> <head> <meta charset=”utf-8″> <meta name=”author” content=”Michael Edwards”> <meta name=”description” content=”Put a description of the web page here.”> <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”> <link rel=”stylesheet” href=”./css/replace.css”>   <script src=”./js/replace.js”></script>      < <title>My test page</title> </head> <body> <p>This is […]

Lecture 2: Notes

The ‘web’ is not the same thing as the ‘Internet’! Here’s a page which credits the inventions and shows the timeline of technologies. In 1993 the Mosaic browser was the first graphical browser (following some text-based browsers like Lynx). Microsoft then introduced Internet Explorer and started on their journey to be hated by every web […]

Gutenberg

The first time I ever used WordPress the ‘Add Post’ screen looked like a box to type HTML into. It has evolved to be a WYSIWYG editor in the meantime, but it appears that the evolution stopped a few years back and we haven’t seen an update to the visual editor for a long time. […]

Colours on the Web

There are a number of ways to express colour values in CSS. Hexcode In that beautiful way that the universe has of making simple building blocks into almost infinite complexity, the screen you are reading this on mixes three colours to generate all the colours you can see on the monitor. If you look closely […]