<h1>Web Technology</h1>
Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet. A web browser is used to access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet. Hyperlinked resources on the World Wide Web can be accessed using software interfaces provided by Web browsers.

Web technology involves the use of hypertext markup language (HTML) and cascading style sheets (CSS). If you've ever checked your bank account or medical records, made a purchase, played a video game, or watched a movie online, then you've used web technology

<h2>Web Technology can be classified into the following sections:</h2>

<h3></ul><li>World Wide Web (WWW)</li></h3>
The World Wide Web is based on several different technologies : Web browsers, Hypertext Markup Language (HTML) and Hypertext Transfer Protocol (HTTP).

<h3><li>Web Browser</li></h3>
The web browser is an application software to explore www (World Wide Web). It provides an interface between the server and the client and requests to the server for web documents and services.

<h3><li>Web Server</h3>
Web server is a program which processes the network requests of the users and serves them with files that create web pages. This exchange takes place using Hypertext Transfer Protocol (HTTP).

<h3><li>Web Pages</h3>
A webpage is a digital document that is linked to the World Wide Web and viewable by anyone connected to the internet has a web browser.

<h3><li>Web Development</h3>
Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.

<h2>Web Development can be classified into two ways:</h2>
<h2><li> Frontend Development</h2>
  The part of a website that the user interacts directly is termed as front end. It is also referred to as the ‘client side’ of the application.
  <img src="https://github.com/its-red-eagle/Web-Technology/blob/main/Front-End-Frameworks-and-Libraries.png">
<h2><li> Backened Development</li></h2>
  Backend is the server side of a website. It is the part of the website that users cannot see and interact. It is the portion of software that does not come in direct contact with the users. It is used to store and arrange data.
  <img src="https://github.com/its-red-eagle/Web-Technology/blob/main/Backend-design-roadmap.jpeg">
<h2>Frontend Languages</h2>
  The front end portion is built by using some languages which are discussed below:

<h3>HTML</h3>
  HTML stands for Hypertext Markup Language. It is used to design the front-end portion of web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. The markup language is used to define the text documentation within the tag which defines the structure of web pages.
<h3>CSS</h3>
  Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
<h3>JavaScript</h3>
  JavaScript is a famous scripting language used to create magic on the sites to make the site interactive for the user. It is used to enhancing the functionality of a website to running cool games and web-based software.
<h3>AJAX</h3>
  Ajax is an acronym for Asynchronous Javascript and XML. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance.
  <br>
  <br>
<h4>There are many other languages through which one can do front-end development depending upon the framework for example Flutter user Dart, React uses JavaScript and Django uses Python, and much more.</h4>

<h2>Front End Frameworks and Libraries </h2>
<h6><div style="width:100%;float:left;text-align:left;border:1px solid #000;padding-top:20px;padding-left:20px"><div><div style="width:50%;float:left"><p><strong><a href="https://www.geeksforgeeks.org/html/">HTML</a></strong></p><p><strong><a href="https://www.geeksforgeeks.org/css/">CSS</a></strong></p><ul><li><strong>CSS Frameworks</strong><p></p><ul><li><a href="https://www.geeksforgeeks.org/bootstrap-tutorials/">Bootstrap</a></li><li><a href="https://www.geeksforgeeks.org/tailwind-css/">Tailwind CSS</a></li><li><a href="https://www.geeksforgeeks.org/bulma/">Bulma</a></li><li><a href="https://www.geeksforgeeks.org/foundation/">Foundation</a></li><li><a href="https://www.geeksforgeeks.org/primer-css/">Primer CSS</a></li><li><a href="https://www.geeksforgeeks.org/spectre-css/">Spectre CSS</a></li><li><a href="https://www.geeksforgeeks.org/materialize-css/">Materialize CSS</a></li><li><a href="https://www.geeksforgeeks.org/onsen-ui/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Onsen UI</font></font></a></li><li><a href="https://www.geeksforgeeks.org/semantic-ui/">Semantic UI</a></li><li><a href="https://www.geeksforgeeks.org/blaze-ui/">Blaze UI</a></li><li><a href="https://www.geeksforgeeks.org/pure-css/">Pure CSS</a></li><li><a href="https://www.geeksforgeeks.org/tachyons/">Tachyons</a></li></ul></li><li><strong>CSS Preprocessors</strong><p></p><div style="min-height:90px;text-align:center;margin:20px 0" id="GFG_AD_Desktop_MTF_Postcontent_728x90"></div><ul><li><a href="https://www.geeksforgeeks.org/sass/">SASS</a></li><li><a href="https://www.geeksforgeeks.org/less/">LESS</a></li></ul></li></ul></div><div style="width:50%;float:right"><p><strong><a href="https://www.geeksforgeeks.org/javascript/">JavaScript:</a></strong></p><ul><li><strong>JavaScript Technology</strong><p></p><ul><li><a href="https://www.geeksforgeeks.org/introduction-to-es6/">ES6</a></li><li><a href="https://www.geeksforgeeks.org/introduction-to-typescript/">TypeScript</a></li></ul></li><li><strong>JavaScript Frameworks</strong><p></p><ul><li><a href="https://www.geeksforgeeks.org/angularjs/">AngularJS</a><p></p><ul><li><a href="https://www.geeksforgeeks.org/angular-ngx-bootstrap/">Angular ngx Bootstrap</a></li><li><a href="https://www.geeksforgeeks.org/angular-primeng/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Angular PrimeNG</font></font></a></li><li><a href="https://www.geeksforgeeks.org/angular-material-ui/">Angular Material UI</a></li></ul></li><li><a href="https://www.geeksforgeeks.org/vue-js/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">VueJS</font></font></a><p></p><ul><li><a href="https://www.geeksforgeeks.org/nuxt-js/">Nuxt.js</a></li></ul></li><li><a href="https://www.geeksforgeeks.org/script-aculo-us-introduction/">script.aculo.us</a></li></ul></li><li><strong>JavaScript Libraries</strong><p></p><ul><li><a href="https://www.geeksforgeeks.org/jquery-tutorials/">jQuery</a><p></p><ul><li><a href="https://www.geeksforgeeks.org/jquery-ui/">jQuery UI</a></li><li><a href="https://www.geeksforgeeks.org/jquery-mobile/">jQuery Mobile</a></li><li><a href="https://www.geeksforgeeks.org/jqwidgets/">jQWidgets</a></li><li><a href="https://www.geeksforgeeks.org/jquery-easyui/">jQuery EasyUI</a></li></ul></li><li><a href="https://www.geeksforgeeks.org/reactjs-tutorials/">ReactJS</a><p></p><ul><li><a href="https://www.geeksforgeeks.org/next-js/">Next.js</a></li><li><a href="https://www.geeksforgeeks.org/ant-design/">Ant Design</a></li><li><a href="https://www.geeksforgeeks.org/react-desktop/">React Desktop</a></li><li><a href="https://www.geeksforgeeks.org/react-rebass/">React Rebass</a></li><li><a href="https://www.geeksforgeeks.org/react-bootstrap/">React Bootstrap</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-reactstrap/">React Reactstrap</a></li><li><a href="https://www.geeksforgeeks.org/blueprint-js/">Blueprint.js</a></li><li><a href="https://www.geeksforgeeks.org/react-suite/">React Suite</a></li><li><a href="https://www.geeksforgeeks.org/reactjs-evergreen/">React.js Evergreen</a></li><li><a href="https://www.geeksforgeeks.org/react-material-ui/">React Material UI</a></li></ul></li><li><a href="https://www.geeksforgeeks.org/p5-js/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">P5.js</font></font></a></li><li><a href="https://www.geeksforgeeks.org/fabric-js/">Fabric.js</a><a></a></li><li><a href="https://www.geeksforgeeks.org/d3-js/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">D3.js</font></font></a><a></a></li><li><a href="https://www.geeksforgeeks.org/collect-js/">Collect.js</a></li><li><a href="https://www.geeksforgeeks.org/underscore-js-introduction/">Underscore.js</a></li><li><a href="https://www.geeksforgeeks.org/lodash/"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Lodash</font></font></a></li><li><a href="https://www.geeksforgeeks.org/script-aculo-us-introduction/">TensorFlow.js</a></li>
<li><a href="https://threejs.org/">THREE.js</a></li>
</ul></li></ul></div></div></div></h6>

<br>
<br>
<h2>Backend Languages</h2>
The back end portion is built by using some languages which are discussed below:

<h3>PHP</h3>
PHP is a server-side scripting language designed specifically for web development. Since PHP code executed on the server-side, so it is called a server-side scripting language.
<h3>Node.js</h3>
Node.js is an open-source and cross-platform runtime environment for executing JavaScript code outside a browser. You need to remember that NodeJS is not a framework, and it’s not a programming language. Most people are confused and understand it’s a framework or a programming language. We often use Node.js for building back-end services like APIs like Web App or Mobile App. It’s used in production by large companies such as Paypal, Uber, Netflix, Wallmart, and so on.
<h3>Python</h3>
Python is a programming language that lets you work quickly and integrate systems more efficiently.
<h3>Ruby</h3>
Ruby is a dynamic, reflective, object-oriented, general-purpose programming language. Ruby is a pure Object-Oriented language developed by Yukihiro Matsumoto. Everything in Ruby is an object except the blocks but there are replacements too for it i.e procs and lambda. The objective of Ruby’s development was to make it act as a sensible buffer between human programmers and the underlying computing machinery.
<h3>Java</h3>
Java is one of the most popular and widely used programming languages and platforms. It is highly scalable. Java components are easily available.
<h3>JavaScript</h3>
JavaScript can be used as both (front end and back end) programming.
<h3>Golang</h3>
Golang is a procedural and statically typed programming language having the syntax similar to C programming language. Sometimes it is termed as Go Programming Language.
<h3>C# </h3>
C# is a general-purpose, modern and object-oriented programming language pronounced as “C sharp”.
<h3>DBMS</h3>
The software which is used to manage database is called Database Management System (DBMS).

<h2>Back End Frameworks and Technology</h2>
<h6><div style="width:100%;float:left;text-align:left;border:1px solid #000;padding-top:20px;padding-left:20px"><div><div style="width:50%;float:left"><strong><a href="https://www.geeksforgeeks.org/php-tutorials/">PHP:</a></strong><p></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/laravel/">Laravel</a></li><li>CMS: <a href="https://www.geeksforgeeks.org/introduction-wordpress/">WordPress</a></li></ul><p><strong><a href="https://www.geeksforgeeks.org/nodejs/">NodeJS:</a></strong></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/introduction-to-express/">Express</a></li></ul><p><strong><a href="https://www.geeksforgeeks.org/python-programming-language/">Python:</a></strong></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/django-tutorial/">Django</a></li><li>Package Manager: <a href="https://www.geeksforgeeks.org/python-pip/">Python PIP</a></li></ul><p><strong><a href="https://www.geeksforgeeks.org/ruby-programming-language-introduction/">Ruby:</a></strong></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/ruby-on-rails-introduction/">Ruby on Rails</a></li></ul></div><div style="width:50%;float:right"><strong><a href="https://www.geeksforgeeks.org/java/">Java:</a></strong><p></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/introduction-to-spring-framework/">Spring,</a> <a href="https://www.geeksforgeeks.org/introduction-to-hibernate-framework/">Hibernate</a></li></ul><p><strong><a href="https://www.geeksforgeeks.org/c-sharp-tutorial/">C#:</a></strong></p><ul><li>Framework: <a href="https://www.geeksforgeeks.org/introduction-to-net-framework/">.NET</a></li></ul><p><strong>Database:

<p>There are many types of databases</p>
<p><ul>
<li>Hierarchical databases</li>
<li>Network databases</li>
<li>Object-oriented databases</li>
<li>Relational databases</li>
<li>NoSQL databases</li>
</ul>
</p>
<p>
1. Hierarchical Databases :
Just as in any hierarchy, this database follows the progression of data being categorized in ranks or levels, wherein data is categorized based on a common point of linkage. As a result, two entities of data will be lower in rank and the commonality would assume a higher rank. Refer to the diagram below:
</p>
<p>
2. Network Databases :
In Layman’s terms, a network database is a hierarchical database, but with a major tweak. The child records are given the freedom to associate with multiple parent records. As a result, a network or net of database files linked with multiple threads is observed. Notice how the Student, Faculty, and Resources elements each have two-parent records, which are Departments and Clubs.
</p>
<p>
3. Object-Oriented Databases :
Those familiar with the Object-Oriented Programming Paradigm would be able to relate to this model of databases easily. Information stored in a database is capable of being represented as an object which response as an instance of the database model. Therefore, the object can be referenced and called without any difficulty. As a result, the workload on the database is substantially reduced.
</p>

<p>
4. Relational Databases :
Considered the most mature of all databases, these databases lead in the production line along with their management systems. In this database, every piece of information has a relationship with every other piece of information. This is on account of every data value in the database having a unique identity in the form of a record.
</p>

<p>
5. NoSQL Databases :
A NoSQL originally referring to non SQL or non-relational is a database that provides a mechanism for storage and retrieval of data. This data is modeled in means other than the tabular relations used in relational databases.
</p>
</h6>

<h2>Data Format</h2>
Format of data is used by web applications to communicate with each other. It is light weight text based data interchange format which means, it is simpler to read and write.

<h3>Below are two common data formats used in web development:</h3>

<h3>XML</h3>
Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable.
<h3>JSON</h3>
JSON or JavaScript Object Notation is a format for structuring data.
<h3>API</h3>
API is an abbreviation for Application Programming Interface which is a collection of communication protocols and subroutines used by various programs to communicate between them.

<h2>Web Protocols</h2>
Web protocols are set of rules followed by everyone communicating over the web.

<h3>HTTP</h3>
The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers.
HTTP works as a request-response protocol between a client and server.
A web browser may be the client, and an application on a computer that hosts a web site may be the server.
<h3>Other Protocols</h3>
<li>TCP/IP Model</li>
<li>UDP</li>
<li>FTP</li>
<li>SMTP</li>
<li>SOAP</li>

<h2>Graphics</h2>
Graphical elements are one of the key feature of any webpage. They can be used to convey important points better than text does and beautify the webpage.

<h2>Canvas</h2>
The HTML “canvas” element is used to draw graphics via JavaScript.
<h6><div style="width:100%;float:left;text-align:left;border:1px solid #000;padding-top:20px;padding-left:20px"><div><div style="width:50%;float:left"><strong><a href="https://threejs.org/">THREE.Js</a></strong><p></p>
<h6><div style="width:100%;float:left;text-align:left;border:1px solid #000;padding-top:20px;padding-left:20px"><div><div style="width:50%;float:left"><strong><a href="https://p5js.org/">P5.Js</a></strong><p></p>

<h2>SVG</h2>
SVG stands for Scalable Vector Graphics.
It basically defines vector-based graphics in XML format.
