Unit-1 HTML:

Introduction to Web:

www:
1. World Wide Web, which is also known as a Web, is a collection of websites or web pages
stored in web servers and connected to local computers through the internet.
2. These websites contain text pages, digital images, audios, videos, etc. Users can access the
content of these sites from any part of the world over the internet using their devices such
as computers, laptops, cell phones, etc.
3. The WWW, along with internet, enables the retrieval and display of text and media to your
device.
4. The building blocks of the Web are web pages which are formatted in HTML and connected
by links called "hypertext" or hyperlinks and accessed by HTTP.
5. A web page is given an online address called a Uniform Resource Locator (URL)
6. A particular collection of web pages that belong to a specific URL is called a website, e.g.,
www.facebook.com, www.google.com, etc.
7. So, the World Wide Web is like a huge electronic book whose pages are stored on multiple
servers across the world.
8. The World Wide Web was invented by a British scientist, Tim Berners-Lee in 1989.

How the World Wide Web Works?

Now, we have understood that WWW is a collection of websites connected to the
internet so that people can search and share information. Now, let us understand how
it works!

The Web works as per the internet's basic client-server format as shown in the following
image. The servers store and transfer web pages or information to user's computers on the
network when requested by the users. A web server is a software program which serves the
web pages requested by web users using a browser. The computer of a user who requests
documents from a server is known as a client. Browser, which is installed on the user'
computer, allows users to view the retrieved documents.

Internet:
1. The Internet is a global network of billions of computers and other electronic
devices.
2. With the Internet, it's possible to access almost any information, communicate with
anyone else in the world, and do much more.
3. You can do all of this by connecting a computer to the Internet, which is also called
going online.
4. When someone says a computer is online, it's just another way of saying it's
connected to the Internet.
5. It's important to realize that the Internet is a global network of physical cables, which can
include copper telephone wires, TV cables, and fiber optic cables.
6. Even wireless connections like Wi-Fi and 3G/4G rely on these physical cables to access the
Internet.
7. It connects millions of computers, webpages, websites, and servers.
8. Using the internet we can send emails, photos, videos, and messages to our loved ones.
9. Or in other words, the Internet is a widespread interconnected network of computers and
electronic devices(that support Internet).
10. It creates a communication medium to share and get information online. If your device is
connected to the Internet then only you will be able to access all the applications, websites,
social media apps, and many more services.
11. The Internet nowadays is considered the fastest medium for sending and receiving
information.
IP ADDRESS:
1. An IP address represents a unique address that
distinguishes any device on the internet or any network
from another.
2. An IP address is the identifier that enables your device to send or receive data
packets across the internet.
3. It holds information related to your location and therefore making devices available
for two-way communication.
4. The internet requires a process to distinguish between different networks, routers,
and websites. Therefore, IP addresses provide the mechanism of doing so.
5. An IP address is represented by a series of numbers segregated by periods(.). They
are expressed in the form of four pairs - an example address might be
255.255.255.255 wherein each set can range from 0 to 255.
6. IP addresses are not produced randomly. They are generated mathematically
and are further assigned by the IANA (Internet Assigned Numbers Authority),
a department of the ICANN.
7. ICANN stands for Internet Corporation for Assigned Names and Numbers. It
is a non-profit corporation founded in the US back in 1998 with an aim to
manage Internet security and enable it to be available by all.

Types of IP Address

IP Address is of two types:

 IPv4: Internet Protocol version 4. It consists of 4 numbers separated by the dots.

Each number can be from 0-255 in decimal numbers. Since each number N can be
represented by a group of 8-digit binary digits. So, a whole IPv4 binary address can
be represented by 32-bits of binary digits. In IPv4, a unique sequence of bits is
assigned to a computer, so a total of (2^32) devices approximately = 4,294,967,296
can be assigned with IPv4.

IPv4 can be written as:

189.123.123.90

 IPv6: But, there is a problem with the IPv4 address. With IPv4, we can connect only the
above number of 4 billion devices uniquely, and apparently, there are much more devices in
the world to be connected to the internet. So, gradually we are making our way to IPv6
Address which is a 128-bit IP address. In human-friendly form, IPv6 is written as a group of 8
hexadecimal numbers separated with colons(:). But in the computer-friendly form, it can be
written as 128 bits of 0s and 1s. Since, a unique sequence of binary digits is given to
computers, smartphones, and other devices to be connected to the internet. So, via IPv6 a
total of (2^128) devices can be assigned with unique addresses which are actually more
than enough for upcoming future generations.

IPv6 can be written as:

 2011:0bd9:75c5:0000:0000:6b3e:0170:8394

Domain Name System (DNS):

1. The Domain Name System (DNS) is the phonebook of the Internet. Humans access
information online through domain names, like nytimes.com or espn.com.
2. Web browsers interact through Internet Protocol (IP) addresses. DNS translates
domain names to IP addresses so browsers can load Internet resources.
3. Each device connected to the Internet has a unique IP address which other machines
use to find the device.
4. DNS servers eliminate the need for humans to memorize IP addresses such as
192.168.1.1 (in IPv4), or more complex newer alphanumeric IP addresses such as
2400:cb00:2048:1::c629:d7a2 (in IPv6).
5. The process of DNS resolution involves converting a hostname (such as www.example.com)
into a computer-friendly IP address (such as 192.168.1.1).
6. An IP address is given to each device on the Internet, and that address is necessary to find
the appropriate Internet device - like a street address is used to find a particular home.
7. When a user wants to load a webpage, a translation must occur between what a user types
into their web browser (example.com) and the machine-friendly address necessary to locate
the example.com webpage.

Types of Domain:

There are various kinds of domain:

1. Generic
domains: .com(commercial), .edu(educational), .mil(military), .org(nonprofit
organization), .net(similar to commercial) all these are generic domains.

2. Country domain: .in (India) .us .uk

3. Inverse domain: if we want to know what is the domain name of the website. Ip to
domain name mapping. So DNS can provide both the mapping for example to find the
IP addresses of geeksforgeeks.org then we have to type nslookup
www.geeksforgeeks.org

Name-to-Address Resolution
The host requests the DNS name server to resolve the domain name. And the name server
returns the IP address corresponding to that domain name to the host so that the host can
future connect to that IP address.
Web Browser:
1. The web browser is an application software to explore www (World Wide Web).
2. It provides an interface between the server and the client and it requests to the server
for web documents and services.
3. It works as a compiler to render HTML which is used to design a webpage.
4. Whenever we search for anything on the internet, the browser loads a web page
written in HTML, including text, links, images, and other items such as style sheets
and JavaScript functions.
5. Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of web
browsers.
6. The first web browser World Wide Web was invented in the year of 1990 by Tim
Berners-Lee.
7. The choice of a web browser depends on the user’s preference and requirements.

How does a Web Browser Work?

A web browser helps us find information anywhere on the internet. It is installed on the client
computer and requests information from the web server such a type of working model is
called a client-server model.

Client-server model
The browser receives information through HTTP protocol. In which transmission of data is
defined. When the browser received data from the server, it is rendered in HTML to user-
readable form and, information is displayed on the device screen.

Some Popular Web Browsers

Here is a list of 7 popular web browsers:

1. Google Chrome:

Developed by Google, Chrome is one of the most widely-used web browsers in the world,
known for its speed and simplicity.

2. Mozilla Firefox:

Developed by the Mozilla Foundation, Firefox is an open-source browser that is known for
its privacy features and customization options.

3. Apple Safari:

Developed by Apple, Safari is the default browser on Mac and iOS devices and is known for
its speed and integration with other Apple products.

4. Microsoft Edge:

Developed by Microsoft, Edge is the default browser on Windows 10 and is known for its
integration with other Microsoft products and services.

5. Tor Browser:

Developed by The Tor Project, Tor Browser is a web browser that is designed for anonymous
web browsing and is based on Mozilla Firefox.

6. Opera:

Developed by Opera Software, Opera is a web browser that is known for its speed and built-
in VPN feature.

7. Brave:

Developed by Brave Software, Brave is a web browser that is focused on privacy and security
and blocks third-party ads and trackers by default.
WEB SERVERS:

1. Web pages are a collection of data, including images, text files, hyperlinks, database
files etc., all located on some computer (also known as server space) on the Internet.
2. A web server is dedicated software that runs on the server-side.
3. When any user requests their web browser to run any web page, the webserver places
all the data materials together into an organized web page and forwards them back to
the web browser with the help of the Internet.
4. Basically, web servers are computers used to store HTTP files which makes a website
and when a client requests a certain website, it delivers the requested website to the
client.
5. For example, you want to open Facebook on your laptop and enter the URL in the
search bar of google.
6. Now, the laptop will send an HTTP request to view the facebook webpage to another
computer known as the webserver.
7. This computer (webserver) contains all the files (usually in HTTP format) which
make up the website like text, images, gif files, etc. After processing the request, the
webserver will send the requested website-related files to your computer and then you
can reach the website.
8. Different websites can be stored on the same or different web servers but that doesn’t
affect the actual website that you are seeing in your computer.
9. The web server can be any software or hardware but is usually a software running on
a computer.
10. One web server can handle multiple users at any given time which is a necessity
otherwise there had to be a web server for each user and considering the current world
population, is nearly close to impossible.
11. A web server is never disconnected from the internet because if it was, then it won’t
be able to receive any requests, and therefore cannot process them.

URL:
 The URL defines four parts: method, host computer, port, and path.
 Method: The method is the protocol used to retrieve the document from a server. For
example, HTTP.
 Host: The host is the computer where the information is stored, and the computer is
given an alias name. Web pages are mainly stored in the computers and the computers
are given an alias name that begins with the characters "www". This field is not
mandatory.
 Port: The URL can also contain the port number of the server, but it's an optional
field. If the port number is included, then it must come between the host and path and
it should be separated from the host by a colon.
 Path: Path is the pathname of the file where the information is stored. The path itself
contain slashes that separate the directories from the subdirectories and files.

(Or)
1. A URL (Uniform Resource Locator) is a unique identifier used to locate a
resource on the Internet. It is also referred to as a web address. It is a sequence of
characters that distinguishes one resource from another.

2. A typical website has at least 3 parts in its URL like www.google.com but some
complex URLs might also have 8 to 9 parts namely scheme, subdomain, domain
name, top-level domain, port number, path, query, parameters, and fragment.
1. Scheme :

https://

The protocol or scheme part of the URL and indicates the set of rules that will decide the
transmission and exchange of data. HTTPS which stands for Hyper Text Transfer Protocol
Secure tells the browser to display the page in Hyper Text (HTML) format as well as
encrypt any information that the user enters in the page.

2. Subdomain :

https://www.

The subdomain is used to separate different sections of the website as it specifies the type of
resource to be delivered to the client. Here the subdomain used ‘www’ is a general symbol
for any resource on the web. Subdomains like ‘blog’ direct to a blog page, ‘audio’ indicates
the resource type as audio.

3. Domain Name :

https://www.example.

Domain name specifies the organization or entity that the URL belongs to. Like in
www.facebook.com the domain name ‘facebook’ indicates the organization that owns the site.

4. Top-level Domain :

https://www.example.co.uk

The TLD (top-level domain) indicates the type of organization the website is registered
to. Like the .com in www.facebook.com indicates a commercial entity. Similarly, .org
indicates organization, .co.uk a commercial entity in the UK.

5. Port Number :

https://www.example.co.uk:443

A port number specifies the type of service that is requested by the client since servers often
deliver multiple services. Some default port numbers include 80 for HTTP and 443 for
HTTPS servers.

6. Path :

https://www.example.co.uk:443/blog/article/search

Path specifies the exact location of the web page, file, or any resource that the user wants
access to. Like here the path indicates a specific article in the blog webpage.

7. Query String Separator :

https://www.example.co.uk:443/blog/article/search?
The query string which contains specific parameters of the search is preceded by a
question mark (?). The question mark tells the browser that a specific query is being
performed.

8. Query String :

https://www.example.co.uk:443/blog/article/search?docid=720&hl=en

The query string specifies the parameters of the data that is being queried from a
website’s database. Each query string is made up of a parameter and a value joined by the
equals (=) sign. In case of multiple parameters, query strings are joined using the ampersand
(&) sign. The parameter can be a number, string, encrypted value, or any other form of data
on the database.

9. Fragment :

https://www.example.co.uk:443/blog/article/search?docid=720&hl=en#dayone

The fragment identifier of a URL is optional, usually appears at the end, and begins with a
hash (#). It indicates a specific location within a page such as the ‘id’ or ‘name’ attribute
for an HTML element.

MIME (MULTIPURPOSE INTERNET MAIL

EXTENSION):
Multipurpose Internet Mail Extension (MIME) is a standard that was proposed by Bell
Communications in 1991 in order to expand the limited capabilities of email.
MIME is a kind of add-on or a supplementary protocol that allows non-ASCII data to be sent
through SMTP. It allows the users to exchange different kinds of data files on the Internet:
audio, video, images, application programs as well.

Why do we need MIME?

Limitations of Simple Mail Transfer Protocol (SMTP):

1. SMTP has a very simple structure

2. Its simplicity however comes with a price as it only sends messages in NVT 7-bit
ASCII format.

3. It cannot be used for languages that do not support 7-bit ASCII format such as French,
German, Russian, Chinese and Japanese, etc. so it cannot be transmitted using SMTP.
So, in order to make SMTP more broad, we use MIME.

4. It cannot be used to send binary files or video or audio data.

Purpose and Functionality of MIME –

Growing demand for Email Messages as people also want to express themselves in terms of
Multimedia. So, MIME another email application is introduced as it is not restricted to textual
data.
MIME transforms non-ASCII data at the sender side to NVT 7-bit data and delivers it to the
client SMTP. The message on the receiver side is transferred back to the original data. As
well as we can send video and audio data using MIME as it transfers them also in 7-bit ASCII
data.

Features of MIME –

1. It is able to send multiple attachments with a single message.

2. Unlimited message length.

3. Binary attachments (executables, images, audio, or video files) may be divided if

needed.

4. MIME provided support for varying content types and multi-part messages.

Working of MIME –
Suppose a user wants to send an email through a user agent and it is in a non-ASCII format
so there is a MIME protocol that converts it into 7-bit NVT ASCII format. The message is
transferred through the e-mail system to the other side in the 7-bit format now MIME
protocol again converts it back into non-ASCII code and now the user agent of the receiver
side reads it and then information is finally read by the receiver. MIME header is basically
inserted at the beginning of any e-mail transfer.

MIME Header:
It is added to the original e-mail header section to define transformation. There are five
headers that we add to the original header:

1. MIME-Version – Defines the version of the MIME protocol. It must have the
parameter Value 1.0, which indicates that message is formatted using MIME.

2. Content-Type – Type of data used in the body of the message. They are of different
types like text data (plain, HTML), audio content, or video content.

3. Content-Type Encoding – It defines the method used for encoding the message. Like
7-bit encoding, 8-bit encoding, etc.

4. Content Id – It is used for uniquely identifying the message.

5. Content description – It defines whether the body is actually an image, video, or

audio.
 HTTP:
 HTTP stands for HyperText Transfer Protocol.
 It is a protocol used to access the data on the World Wide Web (www).
 The HTTP protocol can be used to transfer the data in the form of plain text,
hypertext, audio, video, and so on.
 This protocol is known as HyperText Transfer Protocol because of its efficiency that
allows us to use in a hypertext environment where there are rapid jumps from one
document to another document.
  HTTP is similar to the FTP as it also transfers the files from one host to another host.
But, HTTP is simpler than FTP as HTTP uses only one connection, i.e., no control
connection to transfer the files.
 HTTP is used to carry the data in the form of MIME-like format.
 HTTP is similar to SMTP as the data is transferred between client and server. The
HTTP differs from the SMTP in the way the messages are sent from the client to the
server and from server to the client. SMTP messages are stored and forwarded while
HTTP messages are delivered immediately.

Features of HTTP:
 Connectionless protocol: HTTP is a connectionless protocol. HTTP client initiates a
request and waits for a response from the server. When the server receives the request,
the server processes the request and sends back the response to the HTTP client after
which the client disconnects the connection. The connection between client and server
exist only during the current request and response time only.
 Media independent: HTTP protocol is a media independent as data can be sent as
long as both the client and server know how to handle the data content. It is required
for both the client and server to specify the content type in MIME-type header.
 Stateless: HTTP is a stateless protocol as both the client and server know each other
only during the current request. Due to this nature of the protocol, both the client and
server do not retain the information between various requests of the web pages.

HTTP Transactions
The above figure shows the HTTP transaction between client and server. The client initiates a
transaction by sending a request message to the server. The server replies to the request
message by sending a response message.

Messages
HTTP messages are of two types: request and response. Both the message types follow the
same message format.

Request Message: The request message is sent by the client that consists of a request line,
headers, and sometimes a body.

Response Message: The response message is sent by the server to the client that consists of a
status line, headers, and sometimes a body.
HTML Text Editors:
 An HTML file is a text file, so to create an HTML file we can use any text editors.
 Text editors are the programs which allow editing in a written text, hence to create a web
page we need to write our code in some text editor.
 There are various types of text editors available which you can directly download, but for
a beginner, the best text editor is Notepad (Windows) or TextEdit (Mac).
 After learning the basics, you can easily use other professional text editors which are,
Notepad++, Sublime Text, Vim, etc.

HTML text editors are used to create and modify web pages. HTML codes can be written in
any text editor including the notepad. One just needs to write HTML in any text editor and
save the file with an extension “.html” or “.htm”. Some of the popular HTML text editors are
given below:

 Notepad
 GeeksforGeeks IDE
 Brackets:
 Sublime Text Editor
 Atom
 Visual Studio Code

A. HTML code with Notepad. (Recommended for

Beginners)
Notepad is a simple text editor and suitable for beginners to learn HTML. It is available in all
versions of Windows, from where you easily access it.

Step 1: Open Notepad (Windows)

Step 2: Write code in HTML

Step 3: Save the HTML file with .htm or .html extension.

Step 4: Open the HTML page in your web browser.

To run the HTML page, you need to open the file location, where you have saved the file and then
either double-click on file or click on open with option

B. HTML code with Sublime Text-editor.(Recommended

after learning basics of HTML)
When you will learn the basics of HTML, then you can use some professional text editors,
which will help you to write an efficient and fast code. So to use Sublime Text editors, first it
needs to download and install from internet. You can easily download it from this
https://www.sublimetext.com/download link and can install in your PC. When installation of
Sublime text editor done then you can follow the simple steps to use it:

Step 1: Open Sublime Text editor(Windows 8):

To open Sublime Text editor go to Start screen ⤏ type Sublime Text⤏ Open it. To open a
new page press CTRL+N.

Step 2: Save the page before writing any code.

To save your page in Sublime Text press Ctrl+S or go to File option ⤏ save, to save a file use
extension .htm or .html. We recommend to save the file first then write the code because after
saving the page sublime text editor will give you suggestions to write code.

Step 3: Write the code in Sublime Text editor

Step 4: Open the HTML page in your Browser

To execute or open this page in Web browser just right click by mouse on sublime text page
and click on Open in Browser.

Note: You can execute HTML file in any browser, but there are some tags which are not
supported by Some Web browser.

Brackets
Brackets is an open-source software primarily used for Web development. It provides live
HTML, CSS, JavaScript editing functionality. Similar to Notepad editor, create new file and
save with .html extension to run HTML file.

GeeksforGeeks IDE
It is an online code editor to test the code. It provides a shareable link to share code with
others.

Atom
Atom is an open source code editor tool for MAC, Linux and Windows. Similar to Notepad
editor, create new file and save with .html extension to run HTML file.

Visual Studio Code

It is the one of the most poupular code editor of Today’s generation. Many company’s and
Software developer prefered these online code Editor.

Step 1: Open VS code Editor and Install Live Server on clicking the extension button simply
search live server on serach bar and download. Live server extension helps to run the code
and display output.

Step 2: Create a new File and save with .html extension and use the open live server button
to click right button.

OVERVIEW OF WEB
TECHNOLOGIES:
Web technology encompasses all tools, protocols, and languages used to create, deliver, and
interact with content on the internet. It includes HTML, CSS, JavaScript for frontend
development, alongside server-side technologies like PHP, Python, databases, and
communication protocols like HTTP.

Web Technology
Web technology refers to the collection of tools, protocols, languages, and methodologies
that enable the creation, delivery, and interaction with content over the World Wide Web. It
plays a pivotal role in shaping the online landscape and influencing the way individuals,
businesses, and organizations communicate, share information, and conduct various activities
on the internet.

Classification of Web Technology

Web technology can be broadly classified into three main categories: client-side, server-side,
and database technologies. Each category serves a specific purpose in the development and
functioning of web applications, contributing to a seamless and dynamic online experience.

1. Client-Side Technologies:

Client-side technologies are responsible for creating the visual and interactive aspects
of a website or web application. They run directly in the user's web browser and
encompass various languages and tools.

2. Server-Side Technologies:

Server-side technologies handle the processing and storage of data on the server
before delivering it to the client's browser. They involve programming languages and
tools used to create the server-side logic:

o Programming Languages:

Languages like PHP, Python, Ruby, Node.js, and Java are used to develop
server-side scripts that process user requests, access databases, and generate
dynamic content.

o Web Servers:

Software like Apache, Nginx, and Microsoft IIS manages the communication
between client and server, ensuring efficient data transfer and handling
multiple requests simultaneously.

o Server-Side Frameworks:

Frameworks like Django (Python), Ruby on Rails (Ruby), and Express.js

(Node.js) provide a structured environment for building web applications,
promoting code organization and reusability.

3. Database Technologies:

Database technologies are crucial for storing and managing the structured data that
powers web applications. They provide efficient methods for data retrieval, storage,
and manipulation:

o Relational Databases:
 Systems like MySQL, PostgreSQL, and Microsoft SQL Server organize data
into tables with defined relationships, facilitating complex queries and data
integrity.

o NoSQL Databases:

These databases, including MongoDB, Cassandra, and Redis, handle

unstructured or semi-structured data, offering flexibility and scalability for
modern web applications.

Frontend Development

Frontend development is the practice of creating the visual and interactive elements of a
website or web application that users directly interact with. It involves designing and
implementing the user interface (UI) and ensuring a seamless user experience (UX) across
various devices and browsers. Frontend developers use a combination of programming
languages, frameworks, libraries, and tools to bring web designs to life and enable dynamic
interactions.
Frontend Languages

Frontend development involves several core programming languages that are used to
structure and style web content, as well as add interactivity. The primary frontend languages
are:

 HTML (Hypertext Markup Language):

HTML is the foundation of every web page. It is used to structure content by defining
elements such as headings, paragraphs, images, links, forms, and more. For more info
click here.

 CSS (Cascading Style Sheets):

CSS is responsible for styling the appearance of HTML elements. It controls layout,
typography, colors, and other visual aspects of a web page. For more info click here.

 JavaScript:

JavaScript is a versatile scripting language that enables interactivity and dynamic

behavior on web pages. It allows developers to manipulate the DOM (Document
Object Model), handle user input, perform animations, and communicate with servers
using APIs. For more info click here.

Frontend Frameworks and Libraries

Frontend frameworks and libraries are pre-written collections of code that simplify and
expedite the frontend development process. They provide reusable components, structures,
and utilities, allowing developers to focus on creating unique features rather than reinventing
the wheel. Here are some popular frontend frameworks and libraries:

1. Frontend Frameworks:
o React:

Developed by Facebook, React is a JavaScript library for building user

interfaces. It uses a component-based architecture, enabling developers to
create reusable UI components that update efficiently when data changes.
More info.

o Angular:

Developed by Google, Angular is a full-fledged frontend framework that

offers a comprehensive set of tools for building dynamic web applications.
More info.

o Vue.js:

Vue.js is a progressive JavaScript framework that is easy to integrate into

existing projects. It offers reactive data binding and component-based
 development, making it user-friendly for both beginners and experienced
developers.

2. Frontend Libraries:
o jQuery:

jQuery is a lightweight JavaScript library that simplifies DOM manipulation,

event handling, and animation. It abstracts cross-browser inconsistencies and
offers a simpler syntax for common tasks.

o Bootstrap:

Bootstrap is a popular CSS framework that provides a responsive grid system,

typography, and a variety of UI components like buttons, forms, and
navigation. It streamlines frontend design and development by offering a
consistent and customizable design foundation.

o Material-UI:

Material-UI is a library that implements Google's Material Design guidelines

in React components. It offers a set of pre-styled components for creating
modern, visually appealing interfaces.

Backend Development
Backend Development, encompassing the intricate mechanics behind web applications, relies
on a plethora of languages, frameworks, and technologies. This essential aspect of software
engineering ensures the seamless functioning of digital services, while users interact with the
polished frontend. In this exploration, we delve into the realm of backend languages,
frameworks, and technologies that constitute the backbone of modern web applications.

Backend Languages

 Python:

Known for readability and versatility. Django offers integrated development, while
Flask is lightweight and customizable. More info.

 JavaScript (Node.js):

Transcends frontend with Node.js, enabling server-side JavaScript execution. More

info.

 Java:

Versatile choice with Spring and Spring Boot for robust web applications. Spring's
design enhances code readability. More info.
  Ruby:

Elegance and functionality in web development with Ruby on Rails. Emphasizes

convention over configuration and MVC pattern. More info.

 PHP:

Powers content-heavy apps, with Laravel and Symfony for streamlined development.
Laravel's expressive syntax contributes to efficient code. More info.

 Go (Golang):

Efficient and high-performance backend development with built-in concurrency

support. Compiled nature ensures speed. More info.

 C#:

Ideal for Windows-based web apps and services. ASP.NET framework enhances
security and integration with Windows systems. More info.

Backend Frameworks and Technology

 Node.js:

JavaScript runtime that enables server-side scripting and asynchronous operations.

For more info click here.

 Ruby on Rails:

Conventional framework in Ruby for rapid development with built-in tools. For more
info click here.

 Django:

Python-based framework following MVC architecture for complex applications. For

more info click here.

 Spring Boot:

Java-based framework for enterprise-level applications with a comprehensive

ecosystem. For more info click here.

 Express.js:

Minimalist Node.js framework for building microservices. For more info click here.

 Flask:

Lightweight Python framework for microservices development. For more info click
here.
  Databases:

MySQL, PostgreSQL, MongoDB for data storage and management. For more info
click here.

 RESTful APIs:

Facilitate communication between frontend and backend. For more info click here.

HTML – INTRODUCTION:
HTML is the standard markup language for creating Web pages. HTML stands for
HyperText Markup Language. It is used to design web pages using a markup language.
HTML is a combination of Hypertext and Markup language. Hypertext defines the link
between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages. This language is used to annotate (make notes for
the computer) text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g. HTML) are human-readable. The language uses tags to define what
manipulation has to be done on the text.

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

HTML Versions
HTML is a markup language used by the browser to manipulate text, images, and other
content, in order to display it in the required format. HTML was created by Tim Berners-Lee
in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was
HTML 2.0, published in 1995.
In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a
system for CERN researchers. In 1989, he wrote a memo proposing an internet based
hypertext system.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML
was a document called "HTML Tags" proposed by Tim in late 1991. The latest version of
HTML is HTML5, which we will learn later in this tutorial.

Features of HTML
 It is easy to learn and easy to use.

 It is platform-independent.

 Images, videos, and audio can be added to a web page.

 Hypertext can be added to the text.

 It is a markup language.

Why learn HTML?

 It is a simple markup language. Its implementation is easy.

 It is used to create a website.

 Helps in developing fundamentals about web programming.

 Boost professional career.

Advantages of HTML
 HTML is used to build websites.

 It is supported by all browsers.

 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages of HTML
 HTML can only create static web pages. For dynamic web pages, other languages
have to be used.

 A large amount of code has to be written to create a simple web page.

 The security feature is not good.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> None None

Case-insensitivity:
All versions of HTML including HTML5 are case insensitive except XHTML.

HTML, being case-insensitive language, means whether you write a tag or an attribute in
lowercase letters or uppercase letters or both, it will be treated as the same. We can also mix
the cases in a single tag or attribute name as well. But as already discussed above, XHTML is
case sensitive, and the important thing to remember is that XHTML has a strict rule for
writing all elements in lowercase letters.

Example All the following ways to print the same text using HTML code are correct and
bug-free, irrespective of the fact whether lowercase or uppercase or some random hybrid case
is used.

<!DOCTYPE html>
<html>
<BODY>

<h1 ID="header1">This is a h1 tag used to determine a heading</h1>

<p class="para1">This is a 'p' tag used for writing a paragraph</p>

</BODY>
</html>

---------------------------------------------------------------------
<!doctype html>
<HTml>
<BoDY>

<H1 iD="header1">This is a h1 tag used to determine a heading</h1>

<p cLaSs="para1">This is a 'p' tag used for writing a paragraph</P>

</boDy>
</htML>

Note:

 During the parsing process of the HTML, all tags and attributes are converted
to lowercase.
 Another important point to note is that although attribute names are not case-
sensitive in HTML, the values provided by you are considered case-sensitive.

Is HTML 5 Case Sensitive?

HTML 5, the latest version of HTML is also case insensitive. HTML5 is the new web
standard. It was made to bring flexibility and to address all the new technologies and the
latest multimedia that is being viewed in browsers through mobile phones, cars, televisions,
etc.

Note:

Although there is no hard-bound rule for people to write HTML tags and attributes in either
lowercase or uppercase, or any case for that matter, in general, most web designers in the
world follow the practice of writing lowercase letters in HTML tags and attributes. Due to
this, it has become a worldwide accepted standard among designers to use lowercase letters
in HTML.

Does Capitalization matter in HTML? (explain with an

example)
A simple answer to the question is "NO", and capitalization does not matter in HTML. After
parsing, any type of casing where lowercase or uppercase or camel case or kebab case, etc.,
are the same.

Best Practices for Letter Casing

A few best practices for letter casing are:

 Following a Single Case can save you time: If you have started using a particular
case, say lowercase, then keep using that only everywhere. It will save you time while
writing it, as you do not need to worry about using the Caps Lock key or some other
shortcut keys for turning the upper case on and off.
 Following a single casing strategy makes your code look consistent and easy to
read: For example, following the below kind of strategy is not a good practice:

<!doctype html>
<HTml>
<BoDY>

<iMG sRc="image.png">This is an Image Tag</h1>

<p cLAss="para1">This is a Paragraph Tag</P>

</boDy>
</htML>

 When you are working in an organization or with some community, try following the
same trend which is being followed by all your co-workers so that it is easy for each
one of them to understand and modify it.

Conclusion
 HTML is not a Case Sensitive Language because, during parsing, all HTML elements
are converted to lowercase first.
 HTML5, the latest version of HTML, which is a new web standard, is also case
insensitive.
 XHTML, an older version of HTML, was case-sensitive for lowercase letters.

Platform Independent:
HTML is not platform-dependent, as web pages can be displayed on any operating system
like macOS, Windows, etc using a browser.
 1. HTML is like a set of instructions for building a
webpage. It uses special codes (tags) to define how the
page should look and what content it should have.
2. Now, the cool thing is, these instructions are just plain
text. They don't depend on whether you're using a
Windows computer, a Mac, or something else.
3. When you open a webpage, your internet browser (like
Chrome or Firefox) reads these instructions and shows
you the page accordingly. Since browsers are available
for different systems, you can view the same webpage
on a Windows computer, a Mac, or any other device.
4. So, in a nutshell, HTML doesn't care about the type of
computer or operating system you're using. It's like a
universal language that web browsers understand,
making webpages work on pretty much any device.
That's why we say HTML is platform-independent!

DOCTYPE Declaration:
Doctype:
A doctype or document type declaration is an instruction that tells the web browser about the
markup language in which the current page is written. The Doctype is not an element or tag,
it lets the browser know about the version of or standard of HTML or any other markup
language that is being used in the document.

Declaration of a Doctype:
A DOCTYPE declaration appears at the top of a web page before all other elements.
According to the HTML specification or standards, every HTML document requires a
document type declaration to ensure that the pages are displayed in the way they are intended
to be displayed.

The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:

< !DOCTYPE html >

Doctype Usage:
In the version, HTML 4.01, the usage of DOCTYPE declaration was to create a reference to a
document type definition (DTD), since the version HTML 4.01 was completely based on a
Standard Generalized Markup Language(SGML).
The document type definition (DTD) is responsible for specifying the rules for the Standard
Generalized Markup Language(SGML) so that the browser processes the content correctly.
But in the HTML version, HTML 5 there isn’t any need for a reference to a document type
definition (DTD) because HTML 5 is not based on a Standard Generalized Markup
Language(SGML).

 In HTML 5, the DOCTYPE declaration is only required for enabling the standard
mode for writing documents.

 The <!DOCTYPE> declaration is NOT case sensitive.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>

Definition and Usage

All HTML documents must start with a <!DOCTYPE> declaration.

The declaration is not an HTML tag. It is an "information" to the browser about what
document type to expect.

In HTML 5, the declaration is simple:

<!DOCTYPE html>

Older HTML Documents

In older documents (HTML 4 or XHTML), the declaration is more complicated because the
declaration must refer to a DTD (Document Type Definition).

The <!DOCTYPE> declaration is NOT case sensitive.

Examples
<!DOCTYPE html>

<!DocType html>

<!Doctype html>

<!doctype html>
HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML used in
the document. It is called as the document type declaration (DTD).

Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about
the document type. It is a null element which does not contain the closing tag, and must not
include any content within it.

The <!DOCTYPE> declaration refers Document Type Declaration (DTD) in HTML 4.01;
because HTML 4.01 was based on SGML. But HTML 5 is not SGML based language.

Syntax
<!DOCTYPE html>

Following are some specifications about the HTML <!DOCTYPE>

Display None

Start tag/End tag Start tag only

Usage Structural

It is always a good practice to add a declaration to your HTML documents to enable web
browser to recognize that what type of document to expect.

Supported Browsers:
 Google Chrome

 Edge

 Firefox

 Opera

 Safari

TYPES OF ELEMENTS: