The Key Components of a Web Page

Open any website, whether the Ghana Education Service, Jumia or your favourite football club, and you'll see a title at the top, a menu of links, blocks of text, pictures, perhaps a search box or a "Contact us" form. These parts appear again and again because each does an important job. This note explains how websites are made and what each part of a web page is for.

Year 1 · How websites are made and what pages contain

Web design and web development

Building a house needs an architect who decides how it will look, and builders who actually put it up. Websites are similar. Web design is about how a website looks and feels: its layout, colours, fonts and images. Web development is about how it works: web developers bring the designer's ideas to life by writing code. Web development is the process of building and maintaining websites and web apps so they are accurate, reliable, interactive and easy to use, meeting the needs of the client who is paying for them.

Front end and back end

The front end is everything you see and interact with in the browser. It is built with three technologies, which you can picture as parts of a body:

• HTML (Hypertext Markup Language) is the skeleton: it gives the page its structure and content, using bracketed codes called tags, such as <p> for a paragraph or <img> for an image.

• CSS (Cascading Style Sheets) is the skin and clothing: it styles the page's colours, fonts and layout. Keeping CSS in a separate file makes it easy to give every page the same look.

• JavaScript (JS) brings the page to life: it is a scripting language that adds interactivity, such as checking a form before it is sent, animations, interactive maps and live updates.

A responsive design adapts the page to different screen sizes, so it works well on a phone, tablet or computer.

The back end is the part you don't see: the server, the database where data is stored, and the program logic. Without it, there would be no front end to show. Common back-end languages include Python, Ruby, Java and PHP.

Hosting, URLs and browsers

Once built and tested, a website must be hosted on a web server so people can reach it over the internet; web hosting services rent out this server space. Deployment means uploading and setting up the site on that server. Every website has a unique URL (Uniform Resource Locator), its web address, which tells your browser (the software that shows web pages, such as Chrome, Safari, Firefox, Edge or Opera) where to go.