Web design: Web browsers and how they function

How do web browsers function?browsericons-539x205

Web browsers are client softwares that display home pages on computers and other devices such as Firefox, Internet Explorer and Google Chrome. They ‘ask’ contact servers for pages built with Hypertext Markup Language (HTML) in order to successfully display the website’s pages. They also display pages that use scripting languages such as Javascript and AJAX.

Over the years, Internet Explorer has upgraded to the point where it has it’s own Anti-phishing software, and the Firefox browser has it’s own e-mail software called Thunderbird.

Client-side technologies


  • Client: The web-browser respectively used by a user’s machine e.g. Laptop or PC (Personal Computer)
  • HTML: Stands for Hypertext Markup Language. Used for achieving font, colour, graphics and hyperlinks by tagging text files.
  • CSS: Stands for Cascading Style Sheet and is used to space the layout of web pages by allowing the text, styles and other aspects of the web page by defining the space between these elements that went through HTML.
  • Bootstrap: The client that loads and executes computer commands for websites and the respective machine itself. For example, when you ‘boot up’ a machine, it starts the bootstrap process, allowing the sequence of commands to start and load the operating system.
  • Javascript: Is a client-side programme used in creating interactive websites, by making the different interactive elements in the website, such as elements that follow the mouse as it moves.
  • JQuery: JQuery is a cross-platform library in JavaScript made to simplify the way HTML operates in Java-script
  • AJAX: Is a web development used in the client-side to create web applications using different web technologies.
  • Angular: Is a technology that allows users to create interactive and dynamic web applications by allowing users to use HTML as their template language.
  • FTP: Used to access both the client and the server.
  • CMS: Uses the client to add elements to the database via the web-server.

Website elements and how they work

  • Header/banner: Appears at the top of the web-page and is often used to display the
    Image result for website header/banner
    Different website Headers

    title of the website and also houses the button used to display the menu and social media links

  • Logo: The symbol that communicates what a user’s website is created for and to identify the website, product or the company that the website’s made for.
  • Slider: A series of image used, mostly underneath the header, in the form of a slideshow, presenting different aspects of the content of the website.
  • Navigation: Different icons in an area below the header, or to the left or right of a website, used to navigate the different pages of the website. Sometimes to keep a sense of space, the website creator has the navigation menu in a separate tab (the Hamburger button) alongside the header, for the user to hide or display the menu.
  • Sticky menu: Instead of the menu being static, sometimes the creator will use Java-script to have the menu be displayed as a separate feature of the page, floating over the website’s content.
  • Hamburger button: A button displayed as a symbol depicting three parallel lines, that the user can click on to display a website’s menu.

    Image result for hamburger button
    Hamburger button
  • Links: Buttons on the user interface that the user can click to access different web-pages or social media, sometimes known as a hyper-link
  • Gallery: A collection of images, displayed below the header and menu, displayed in a grid pattern, to showcase different projects the creator may have worked on.
  • Thumbnails: An image in a web-site displayed as a small representation of a larger image, in order to make it easier for users to look through the different images in a gallery or other display.
  • Light-box: When certain images or graphical elements are displayed over the web-page, while dimming the light of the rest of the page.
  • Footer: The bottom of the website, where lines of text are shown, such as the name of the company or creator of the website, or relevant copyright information, along with link to other pages of the website such as ‘contact’ or ‘ social media’.
  • Loader: A moving or animated graphic showing the webpage’s progress as it loads it’s content.
  • Social media icons: Clickable images used as hyperlinks to the website creator’s various Social media pages, such as Instagram, Facebook or Twitter.
  • Responsive web-design: A form of web-design where the web-pages adapt to whatever platform users are viewing it on. For example, on a tablet, the website would perform at a resolution and layout that would be readable and navigable on that platform.
  • Cookies: Contain simple text files for almost all web-sites, which are readable on a notepad app on any PC. These contain two pieces of text relating to the website the user just visited, the name of the website and it’s unique user ID.
  • Protocol: Is HTTP which stands for Hyper-Text Transfer Protocol. This is the standard protocol through which web designers can securely communicate with distributed systems.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s