Discussing website project

Components Of A Website: A Super Simple Beginner’s Guide To Get You Started

Components Of A Website: A Super Simple Beginner’s Guide To Get You Started

Components of a website
Components of a website


In 2019 (and beyond!), having a website and online presence is an ABSOLUTE necessity. Especially if you’re an entrepreneur or have a small business. It’s really the only way you can compete with the big boys. The internet has made competition fierce.

But make no doubt about it, websites can be flat-out intimidating. This is particularly true if you’re not the most “tech savvy”. This can be extremely hindering if you need to have a website created.

In fact, we’ve seen and heard it all. Small businesses refusing to have a website because it’s “just too complicated” or “we don’t understand it”.

No need to be ashamed. We’ve all been there at some point.

Breaking down the basic components of a website, is the first step to understanding a website. This is why we created a super simple beginner’s guide that explains the components of a website. Hopefully with some basic knowledge, you will be able to go forth with more confidence.

What Exactly Is A Website, Anyway?

In simple tech terms, a website is computer program with an interface. This interface is a collection of files. Each file has a function and purpose. And all these files are processed by a main processor file. For example, if you want to show a specific image on the homepage of your website, you will need a specific file with a specific function. This will process the image, and display it on the homepage for everyone to view. 

Another more interactive example is when a user goes to your website and they click on a button. An interactive action will occur. This action is defined by a specific function in one of the files that form your website.

So now we can see the similarities between a normal computer program and a website. But the main difference between the two, is accessibility.

The idea of websites started with the invention of the internet, and globalizing information exchange. A website is a portal that can be accessed from anywhere in the  entire world. 


Every Website Has An Address and A Name (and you gotta pay for it)

Websites are files that are collected and hosted on a server computer (we’ll get to the hosting part in a bit). You can retrieve any website on this “server”  by accessing its’ unique IP (internet protocol) address. Let’s use a typical home address as an example. Each house has a number and a postal code, which is unique to it. Another more technical example is radio stations. You can access your favorite radio channel by calibrating it to the correct unique frequency of your radio channel.

Just as each website has an address, it also has a domain name. This unique domain name will belong to a unique IP address number.  There will never be an identical domain name and IP address together (hence the word, unique). Domain names will need to be purchased and registered.

Ok, so you have a website with an IP address and  domain name. You want that website to be visible on the internet, right? That’s where hosting comes in.

Hosting is a service that allows individuals or companies to post a website onto the internet. For this, you will need to find a web hosting service provider. These service providers offer the technology needed for the website to be viewed on the Internet. But prepared to pay yearly hosting “fees” to keep your website live on the internet.

Unique IP addresses, domain names, and hosting are major components of a website.

Street and houses of upscale neighborhood on a summer morning
Your website will have a name and address, just like a house


Ready To Learn A New Language? 

The two main programming languages to create any website on the most basic level are HTML and CSS. Programming languages are the foundation components of a website. 

HTML stands for hypertext markup language. This is the skeleton of any web page. In fact, all websites on the internet would not exist without HTML. To understand HTML in simple terms, you can think of a building. To build a new infrastructure, you will have to plan. How many floors will this building have? How many windows? Where will the main entrances be located? You get the point. 

All of this planning must be put in a blue print.  In other words, a systematic blue print for all the elements that will exist in your building. Now we can compare this blue print to  HTML.

HTML is the language that exhibits the elements that will be put in a website or a web page. Before going further, let’s clarify what we mean by  “elements”. We consider the main entrance of a building to be an element. With that said, we can say the header and footer of the website is considered to be an element, similarly to the main entrance. Images on your webpage is another element. Even the content that will be viewed on your web page is an element. In other words, anything that will be viewed on your web page is considered an element. And each of these elements on your website should be mapped in the whole blueprint of your website. This is HTML. 

HTML + CSS = The Dream Team

Now back to the example of the building. After you specified the type of elements and the number of elements, you need to ask another piece of critical  information per each element. 

If you are going to add a main entrance to your building, you should specify the exact dimensions of the main entrance. You should also point out exactly where the main entrance exists relative to the whole building. Another piece of information about the main entrance will be the colour. HTML does not care about styling. HTML does not care about dimensions. HTML only cares about existence of elements. This is where the next big major player in the website development and website design world comes in.

CSS stands for cascading style sheets. HTML is the blueprint when it comes to existence of elements. CSS is the blueprint when it comes to specifying the styling and dimensions of each element (mentioned in the HTML blueprint). When you start developing and designing a webpage on your website, you will first write code in HTML specifying the elements. You will then use CSS to specify the colour and dimension of each element. This is a very simple explanation of how CSS works with HTML in designing and developing websites. 

This kitty knows programming basics too!



Website Pages and Their Purpose

The components of a website would not be complete without this section. Here are the 6 main pages of a website and their overall purpose:

  • Homepage
  • About
  • Team
  • Contact
  • Content/Blog
  • Offer/Sales Page.

The Homepage

This is where visitors want to understand the purpose of your company. The biggest common mistake I see in homepages is too much stuff being thrown on there. A visitor lands on the page and finds all sorts of calls to action (CTA), requests to click on this, read that, scroll here, check out this social media, etc. Don’t do this if you want a good first impression of your website.

Your homepage should answer these questions for the visitor:

  • What is the purpose of this website and company?
  • Does the brand strike you as trustworthy and interesting enough to devote a few minutes of your time?
  • How might investigating this website benefit you?

It’s also the page that displays the four prominent parts of your brand:

  1. Name: the name of your business/company/organization
  2. Logo: a symbol (images, shapes, text, ect) that identify a business/company/ organization
  3. Your sales moment: the most prominent sentence on the page, near the top and in the biggest font.
  4. Hero image: a large image, prominently placed in the front and center of a homepage.

In short, you want to answer the questions that someone in the initial consideration phase might have about your own company. Those who visit your homepage are likely to either know or have heard about you. Traffic is usually traced back to people searching for your brand name from a link or by word of mouth. 



The About Page

The about page is where people go to learn about who you are and how that could benefit them. The about page isn’t about you. It’s about how you can help the visitor. This page is great for sharing a short story that connects with the visitor emotionally.

Team/People/Bio Page

The Team page is were visitors go to get an understanding of who they spoke with or are going to speak with.

If you have a fairly large team, mend a page that lists everyone together. These pages are visited by people either prior to or right after meeting with someone. After the content pages and the homepage, the team member pages are the most visited. Humans are social creatures. We want to know about the other humans we are “dealing” with. 

Web Design and Marketing Agency - Kings Of The Web
If you have a team, be sure to put them on your website!


Contact Page

The contact page is where people go to get in touch with you. 

The contact page should be simple and contain: phone number(s), email(s) and address. Don’t go over-board with social-media links. It’s very common to have an email form on these pages. But from our experience, it’s best to have an email in plain text above the form which allows people to choose how the email is sent. The plain-text email will usually get used 3 times more than the contact form is used.

This is the page that almost never gets visited first in a website session. It is often visited last. It’s common to see a bounce rate (when people leave your site) of over 90 percent (if you look at your analytics). This is normal.


Blog Post Page

The blog section is where visitors go to get educated, entertained or both.

Blog pages such as blog posts, videos, and case studies are great pages to send new visitors to. This is because good content pages educate and/or entertain and are usually the best way to warm up cold traffic. Blog pages are replacing the sales page as the most common landing page (the first page new visitors see).


Offer/Sales Page

The offer/sales page is where visitors go at the active-evaluation phase or moment of purchase.

This is a crucial page if you sell products or services. A huge thing overlooked by most people are the different shopping habits used on a device.  Mobile use and completing purchases on a phone, is increasing rapidly.  Therefore, sales pages need to be designed separately for these devices.

Sales pages work way better with warm and hot traffic. This means that the visitor has already investigated your brand and is comfortable shortlisting you right up to the moment of purchase. Conversely, if you send cold traffic (new to you or your brand) it usually causes a very high bounce rate.




Leave a Comment

Your email address will not be published.