Sunday, 13 September 2020

Basics of Web Technologies

A website or web application can be developed by using some web technologies like HTML, CSS, Javascript, BootStrap, jQuery, PHP, Servlets, .NET etc...On the basis of  two ends, The web technologies can be divided into backend and frontend technologies. The front end technologies are used to design the web site where as back end technologies are used to develop the web site or web application.

The developers who deals with the front end technologies are known as Front End Developers. While Back End Developers exploit the back end technologies to develop the web application. The developers who is well versed with both front end and back end technologies are known as Full Stack Developers.

Lets start learning with some basics terminologies.


Affectionately called “The Web”.

It is a collection of information stored on the networked computers over the world.

Individual document pages on the World Wide Web are called web pages and are accessed with a software application running on the user's computer, commonly called a web browser.

Web pages may contain text, images, videos, and other multimedia components, as well as web navigation features consisting of hyperlinks.

The WWW was proposed in 1991 by Tim Berners-Lee at CERN.


Web or Internet, both are not the same things.

The Internet is a collection of computers or networking devices connecting together. Devices can communicate with each other.

The Web is a collection of documents that are interconnected by hyper-links.

These documents are accessed by web browsers and provided by web servers.


Client: Any computer on the network that requests services from another computer on the network.

Server: Any computer that receives requests from client computers, processes and sends the output.

Web Page: Any page that is hosted on the Internet. Web Site: Collection of interlinked web pages that is hosted on the Internet.

Web Development: The process of creating, modifying web pages.

Web Browser: A program that receives information from the web. E.g. IE, Chrome, Mozilla etc

Download PPT


The web information is stored in the web pages. (In HTML Format)

The web pages are stored in the computers called web servers. (In the web server file system.)

The computer reading the pages is called web clients with specific web browsers. ( IE, Netscape, Mozilla, Chrome, Safari, Opera etc.)

The web server waits for the request from the web clients over the Internet.

Two categories of web development


HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML is a markup language

A markup language is a set of markup tags

The tags describe document content

HTML documents contain HTML tags and plain text

HTML documents are also called web pages

Download PPT


HTML markup tags are usually called HTML tags

HTML tags are keywords (tag names) surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

The end tag is written like the start tag, with a forward slash before the tag name

Start and end tags are also called opening tags and closing tags

HTML Elements

 "HTML tags" and "HTML elements" are often used to describe the same thing.

HTML Element:

<p>This is a paragraph.</p>

HTML Page Structure

HTML Editors

• HTML can be edited by using a professional HTML editor like:

• Adobe Dreamweaver

• Microsoft Expression Web

• CoffeeCup HTML Editor

• Notepad ++ / Notepad


The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox,

Safari) is to read HTML documents and display them as web pages.

The browser does not display the HTML tags, but uses the tags to determine how

the content of the HTML page is to be presented/displayed to the user


It helps the web designers to apply style on HTML tags.

You can add new looks to your old HTML documents.

You can completely change the look of your website with only a few changes in CSS code.

CSS Syntax

A CSS rule set contains a selector and a declaration block.

Download PPT

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

CSS Element Selector

CSS Id Selector

CSS Class Selector

CSS Universal Selector

CSS Group Selector

How to add CSS

There are three ways to insert CSS in HTML documents.

Inline CSS

Internal CSS

External CSS


JavaScript (js) is a light-weight object-oriented programming language which is used by several websites for scripting the webpages.

Although, JavaScript has no connectivity with Java programming language. The name was suggested and provided in the times when Java was gaining popularity in the market.

Download PPT

Features of JavaScript

All popular web browsers support JavaScript as they provide built-in execution environments.

JavaScript follows the syntax and structure of the C programming language. 

It is a case-sensitive language.

JavaScript is supportable in several operating systems including, Windows, macOS, etc.

It provides good control to the users over the web browsers.

Javascript example is easy to code. JavaScript provides 3 places to put the JavaScript code: within body tag, within head tag and external JavaScript file.


HTML: HTML stands for Hyper Text Markup Language. With HTML you can create your own Website.

CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.

JavaScript: JavaScript is the programming language that control the behavior of web pages.

jQuery: jQuery is a lightweight and "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. Before you start studying jQuery, you should have a basic knowledge of HTML, CSS & JavaScript.

AJAX: AJAX stands for Asynchronous JavaScript And XML. AJAX is not a programming language. AJAX allows update parts of a web page, without reloading the whole page.

XML: XML stands for eXtensible Markup Language. XML was designed to store and transport data. XML was designed to be both human- and machine-readable. XML is a W3C Recommendation.

 JSON: JSON stands for JavaScript Object Notation. JSON is a syntax for storing and exchanging data(same like XML). JSON is better than XML in all the ways.

Bootstrap: Bootstrap is the most popular front-end(HTML, CSS, and JavaScript) framework for developing responsive, mobile-first websites. Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

PHP: PHP stands for Hypertext Preprocessor. PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages. PHP is a widely-used, free, and efficient server- side scripting language.

ASP: ASP stands for Active Server Pages. ASP is a development framework for building web pages.  ASP is a Microsoft's first server side scripting language.

SQL: SQL stands for Structured Query Language.: SQL is a standard language for accessing and manipulating databases. ● SQL is an ANSI (American National Standards Institute) standard.

 AngularJS: AngularJS is a JavaScript framework. AngularJS is perfect for Single Page Applications (SPAs). Before you study AngularJS, you should have a basic understanding of HTML, CSS & JavaScript.

Node.js: Node.js is an open source server framework. Node.js allows you to run JavaScript on the server. Node.js is free and runs on various platforms(Windows, Linux, Unix, Mac OS X, etc.)

 BackboneJS: BackboneJS is a lightweight JavaScript library that allows to develop and structure client side applications that run in a web browser. It offers MVC framework which abstracts data into models, DOM (Document Object Model) into views and bind these two using events.

 ExpressJS: Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open source framework developed and maintained by the Node.js foundation.

KnockoutJS: KnockoutJS is basically a library written in JavaScript, based on MVVM pattern that helps developers in building rich and responsive websites. KnockoutJS library provides an easy and clean way to handle complex data-driven interfaces. It is independent of any other framework.

 ReactJS: React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

AWS: AWS stands for Amazon Web Services. AWS is Amazon’s cloud web hosting platform that offers flexible, reliable, scalable, easy-to- use, and cost-effective solutions.

 Firebase: Firebase is a backend platform for building Web, Android and IOS applications. It offers real time database, different APIs, multiple authentication types and hosting platform.

 CakePHP: CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. It is based on an MVC architecture that is both powerful and easy to grasp. It guarantee a strict but natural separation of business logic from data and presentation layers.

 CodeIgnitor: CodeIgniter is a powerful PHP framework built for developers who need a simple and elegant toolkit to create full-featured web applications. It is an Open Source framework. It has a very rich set of functionality, which will increase the speed of website development work.

 Laravel: Laravel is a powerful MVC PHP framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications. It offers a robust set of tools and an application architecture that incorporates many of the best features of frameworks like CodeIgniter, Yii, ASP.NET MVC, Ruby on Rails, Sinatra, & others.

Zend: Zend is an open source PHP framework. It is pure object-oriented and built around the MVC design pattern. Zend framework contains collection of PHP packages which can be used to develop web applications and services.

 Yii: The Yii framework is an open-source PHP framework for rapidly-developing, modern Web applications. It is built around the Model-View- Controller composite pattern. Yii provides secure and professional features to create robust projects rapidly.

 Symfony: Symfony is an open-source PHP web application framework, designed for developers who need a simple and elegant toolkit to create full-featured web applications.

 Magento: Magento is an open source E-commerce software, created by Varien Inc., which is useful for online business. It has a flexible modular architecture and is scalable with many control options that is helpful for users. Magento uses E-commerce platform which offers organizations ultimate E-commerce solutions and extensive support network.

 WordPress: WordPress is an open source Content Management System (CMS), which allows the users to build dynamic websites and blog. WordPress is the most popular blogging system on the web and allows updating, customizing and managing the website from its back-end CMS and components.

 Joomla: Joomla is an open source CMS, which is used to build websites and online applications. It is free and extendable which is separated into front- end templates and back-end templates (administrator). Joomla is developed using PHP, Object Oriented Programming, software design patterns and MySQL (used for storing the data).

Drupal: Drupal is a free and open source Content Management System (CMS) that allows organizing, managing and publishing your content. This reliable and secure CMS is built on PHP based environment and powers millions of applications and websites., World Economic Forum, Stanford University, etc...

No comments:

Post a comment

All about journals and research paper | What is impact factor? | how the impact factor is calculated? | who calculate the impact factor? Scopous journals

Figure 1: One of my Research Papers When the Scholars are in their Master or PhD or in any research field. They are supposed to writ...