Clicky

What is a website made of?

A website will seem to many people like an uncomplicated thing, because many of us spend a fair portion of our day online in some capacity – whether that be using social media, buying online or surfing the web for interest.

Website development is a complicated business, and involves a number of moving parts, which is why you can’t cut corners.  A general website will consist of three main components at the front end:

  • What is on there – the content
  • How it looks – the style
  • How it works – the interactions

It will then have a number of factors at the backend – the bit you can’t really see:

  • The content management system, or CMS
  • The hosting infrastructure
  • The domain that is used to access the site

Let’s find out more about these elements. We’ve got a bitesize version on the video we produced just below, or with a little more detail on the main post.

 

Video Explainer: How to Bake a Website from Square Daisy on Vimeo.

HTML

This stands for Hypertext Markup Language, but that’s not really important. What is important is that HTML lets you label bits of content so that the web browser can interpret what they are, and therefore display them correctly.  These elements are generally text content, such as titles, images, links and video.  Lines of HTML are written using different tags so that each bit of content can easily be recognised and ordered as such,  like the example below:

<!DOCTYPE HTML>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document……

</body>

</html>

CSS

If we were to write some HTML, the content would be there when you opened it in a browser, but it would all look pretty drab and stuck up in the top left hand corner of the browser window.  Now for those who appreciate even the most basic of websites, this may be a step too far!

To make the site look more professional, we need style it.  This is where we use CSS, which stands for Cascading Style Sheets.  The beauty of CSS is in the name – style sheets.  This means that you don’t have to style every element on every page, instead you write a series of rules that apply across the site.

For instance, if you want all of the body text to be in black but all the title and sub titles to be in red, and the copy to be centred and in the font Raleway – you write a rule and it applies across the site. This keeps it uniform, and also dramatically reduces the time required to code the site. CSS also covers elements like the boxes or containers content sits in, the general colour scheme, padding around content and in some cases, it can also deliver some simple ‘motion’.

An example of CSS looks like the code pasted below:

body {

    background-color: lightblue;

}

h1 {

    color: white;

    text-align: center;

}

p {

    font-family: verdana;

    font-size: 20px;

}

Javascript

Javascript handles the interactivity of a website. For example, a main menu- when you hover over a menu option and a series of drop down options open, or when you click on something, a response occurs. Javascript works with the HTML and CSS and involves more complex coding, but it does deliver a much more dynamic site for your customers and suppliers to use.

An example of some Javascript is as below:

document.getElementById(“demo”).style.display = “block”; 

Example of Javascript on the front-end of a website
Example of Javascript when you hover over a content box on the front-end of a website

Content Management System

Once you have your website you will no doubt want to make changes on a regular basis and in order to do this, you will need a Content Management System (CMS).  There isn’t just one type of CMS, there are lots of options.  Some are open source, such as WordPress, Joomla, Drupal and Concrete5 – and then there are bespoke content management systems, which are built and owned by a particular company.  There are lots of reasons why it is better to have an open source system rather than a bespoke one, which we’ll address in another blog, but we as an agency, we use WordPress, the reasons for doing so all laid out in a previous blog.

When the CMS is configured properly, whatever content you see on the front-end of the website will have a corresponding ‘field’, so you just add or change the content in that field and it will display on the front-end.  This is called dynamic custom fields and is the standard for good web development.  An example of how the back-end and front-end link together can be seen below – the top panel is how the fields are displayed in the CMS and how they correspond on the actual website that the public sees.

Custom field
How a dynamic custom field looks in the CMS and is mirrored on the main website

Hosting

When the front bit of your website is built and it is all linked up to the CMS, you need to put it somewhere so that people can view it. This means you need hosting. Essentially this is nothing more than uploading your site files (front-end) and database (back-end) to a server.  You want to make sure that the hosting solution that you choose and the security and back-up of that server are tip-top though.  Don’t use a server that is sat in someone’s bedroom – one, because it is unlikely to be GDPR compliant and you’ll be in bother with the authorities, and two, because it will no doubt be easy to hack – which will cause you a world of pain.

Domains

The final piece of the puzzle, and the piece that you can’t do without, is a domain.  This is the URL, or web address, that you type in to the bar at the top of your browser.  You can easily check if the domain you want is available at places like GoDaddy, 1&1, Namesco and 123-Reg to name just a few. Once you have purchased the domain, you then need to make sure that it points at the IP address of the server that your site files and database are hosted on. That might sound complicated, and it really is if this isn’t what you do for a living, but your IT company or website developers will do it for you without any problems.  One thing that you 100% need to do though is ensure that you own your domain – to find out all about that, read our very important blog on domain ownership!

There you go, that is what a website is made of. When you are picking an agency to work with, make sure you choose one that understands all of the constituent parts of the site they are building, and not some cowboys that buy a $50 template and hash it together, charging you £3000 for something that doesn’t work quite right

If you want to talk about your site, or a new project, with an agency that knows how to build a slick and technically robust website, why not give us a shout.

A few more

If you're looking to appoint an agency for a new website project, contact us and we'll explain a little more about how we can add value.

Get in touch