3.1 Introduction

This topic introduces web development, explaining the difference between a webpage and a website, web applications, static and dynamic websites, front-end and back-end development.

Definition

Web and Website: A document which exists and is accessible through the internet is a webpage, while a set of webpages is termed as a Website.

Web Application: A computer program which offers a service or executes tasks via a browser and internet connection by remotely accessing a server is called a web application.

Core Concept

Think of the web as a giant library. A webpage is a single page in a book; a website is the whole book. A web application is like an interactive service desk in the library—it doesn't just show information, it lets you do things (like search, book a room, or pay a fine). Static websites are like printed books—the content doesn't change unless someone reprints them. Dynamic websites are like a live news feed—the content changes based on who is viewing and what they do. Front-end development is the cover and layout of the book; back-end development is the library's management system that organizes everything behind the scenes.

Detailed Explanation

Web and Website

A document which exists and is accessible through the internet is a webpage, while a set of webpages is termed as a Website. For example, a news website has different sections, and each one of them has at least one webpage in every section.

To access a webpage, software namely web browser is used. You just provide the Universal Resource Locator (URL) in the website which is the generally accessible address of the document. This way, the web browser will locate the document and display it.

In case you are unable to recall the URL of the website you are searching, help of search engines is quite useful. Search engine provides the service to seek relevant information based on the keywords you have entered. The search engine on the basis of keywords creates different combinations and searches the relevant information. Apart from the relevant matches, auxiliary results are also displayed to help the user explore extra information and viewpoints.

Once the results are collected by the search engine, it displays the website address and little content from every website in a list fashion. This way, it is easier to select the website you are looking for.

Key Point: Every website has a 'Homepage'. As soon as a webpage opens up, its homepage is displayed and thereafter you can navigate the website to extract information. Every website and relevant pages need to be uploaded to a web hosting service, which offers web servers that are available round the clock. This way, clients and visitors can access the website on their digital devices.

Web Application

On the other hand, a computer program which offers a service or executes tasks via a browser and internet connection by remotely accessing a server is called a web application. Through a web browser, a web application can be visited by users like a Customer Relations Management (CRM) system which handles retailing, supplies, promotions, customer feedback, etc. At the backend, there can be more than one server, for each type of task, or a single server handling all the requests and managing it accordingly, while keeping the front-end updated. It all depends on the architecture which is being deployed to facilitate the front-end and is transparent to a normal user.

Website Development

Website is the first step to show your presence in the digital world. A website only shares information and contents and does not allow any changes by the viewer. A website can have single or multiple pages linked together. For example, you can create a personal page of your interest highlighting your hobbies, activities, and passion. You can share your ambitions and achievements. Like, if photography is your hobby, you can upload picture albums on the website on a separate page. Anyone who visits the website can view the contents but in no manner can manipulate it.

Static Website

Regardless of how much content and how many pages you increase in your website, the contents remain unchanged unless you change it yourself. In other words, the website is static, and once accessed by the user, it will be loaded from the server where you have hosted it. After loading, on the user's computer, the link to the server is no more required. Such static websites are easy to create and load on the client's site.

• Content remains unchanged.
• Loaded from the server once.
• No server interaction after loading.
• Easy to create and host.

Dynamic Website

A website is dynamic if the information is changed or adjusted in accordance with user input or choice. For example, alteration of background color of a webpage every time a user clicks a button.

Why a website needs to be dynamic? The intention of every website owner is to have frequent visitors and the visitors should stay long. For example, online shopping sites offer promotions and packages so that the visitors lengthen their stay on the interested page, get awareness, and shop. To achieve this, dynamicity in websites is applied using scripts, like JavaScript, Python, PHP, ASP.Net, etc.

In the context of an online-shopping site, every member of the website can customize its webpage based on his/her interest, while non-members and visitors get the same page to view every time.

• Content changes based on user input.
• Uses scripts (JavaScript, Python, PHP, ASP.Net).
• Interacts with the server for every event.
• Personalized experience for members.

Front-End Development

A front-end of a website provides the interface which is graphical nowadays and termed as Graphical User Interface (GUI) . The person visiting your website views and interacts with GUI. The front-end of a website is developed using HTML, CSS, and JavaScript, etc. A person who develops such front-end websites and GUIs is termed as a 'Front-end Developer' .

Back-End Development

Front-end developed websites and GUIs need to communicate with the server for every event which the user generates, and the corresponding result is to be displayed on the front-end. This bridging between the front-end and the server is taken care of by back-end development. A person who writes code about such services that are provided by the website is called a 'Back-end Developer' . Back-end development requires more knowledge and skill level than front-end development, like knowledge of JavaScript, Python, PHP, ASP.Net, etc.

Intermediate Level

A webpage is a single document on the internet; a website is a collection of webpages. Web browsers use URLs to locate pages; search engines help find them. A web application is a program that runs in a browser and interacts with a server to perform tasks (e.g., CRM systems). Static websites have fixed content that doesn't change unless manually updated. Dynamic websites change content based on user input, using scripts like JavaScript, Python, PHP, and ASP.Net. Front-end development creates the user interface (HTML, CSS, JavaScript). Back-end development handles server communication, databases, and logic (JavaScript, Python, PHP, ASP.Net).

Important Points

• - Webpage: single document on the internet.
• - Website: collection of webpages.
• - URL: address of a webpage.
• - Search engine: finds websites based on keywords.
• - Web application: interactive program via browser and server.
• - Static website: fixed content.
• - Dynamic website: content changes based on user input.
• - Front-end: HTML, CSS, JavaScript (GUI).
• - Back-end: server-side logic (Python, PHP, ASP.Net).

Remember

• - Webpage: Single page.
• - Website: Collection of pages.
• - URL: Web address.
• - Search Engine: Finds websites.
• - Web App: Interactive, server-based.
• - Static: Fixed content.
• - Dynamic: Changes with user input.
• - Front-End: HTML, CSS, JS.
• - Back-End: Server logic (Python, PHP).

Common Mistakes

• - Confusing webpage and website: A webpage is one page; a website is a collection.
• - Thinking static websites are outdated: Static sites are still used for simple, fast-loading content.
• - Mixing up front-end and back-end: Front-end is what you see; back-end is what runs on the server.
• - Assuming all websites are dynamic: Many websites are static.
• - Forgetting that web applications require a server: They interact with servers for every event.

Quick Revision

A webpage is a single document on the internet; a website is a collection of webpages. URLs are addresses; search engines help find websites. A web application is an interactive program that runs in a browser and communicates with a server. Static websites have fixed content; dynamic websites change based on user input using scripts. Front-end development creates the GUI (HTML, CSS, JavaScript); back-end development handles server logic (Python, PHP, ASP.Net).

60-Second Revision

• Webpage: Single page.
• Website: Collection of pages.
• URL: Address.
• Search Engine: Finds websites.
• Web App: Interactive, server-based.
• Static: Fixed content.
• Dynamic: Changes with user input.
• Front-End: HTML, CSS, JS.
• Back-End: Server logic (Python, PHP, ASP.Net).
• Key Point: Front-end is what you see; back-end is what makes it work.