Web Design

Web Design
Web Design is a field related to designing websites on the Internet. Without a good
design, a website fails to perform well and cannot produce a good impact on the user.
Design is a creative process that affects the ranking of the brand. A good website design
helps to create an engaging online presence that captivates the audience.
Before beginning to design a website a user has to be clear about what web designing is.
It is the art of making websites look and feel good to the user and providing easy
access to the website features to the client. It focuses on improving the user
experience rather than development.

Introduction to Internet
Internet is a group of computer systems connected from all around the world. The
Internet protocol suite is a framework defined through the Internet standards. Methods
are divided right into a layered set of protocols on this architecture. The Internet gives a
huge variety of statistics and communique offerings, which includes forums, databases,
email, and hypertext. It is made of the neighborhood to global personal, public networks
connected through plenty of digital, wireless, and networking technologies.

WWW
WWW stands for World Wide Web and is commonly known as the Web. The WWW
was started by CERN in 1989. WWW is defined as the collection of different websites
around the world, containing different information shared via local servers(or
computers).
Web pages are linked together using hyperlinks which are HTML-formatted and, also
referred to as hypertext, these are the fundamental units of the Internet and are accessed
through Hyper Text Transfer Protocol(HTTP). Such digital connections, or links, allow
users to easily access desired information by connecting relevant pieces of information.
The benefit of hypertext is it allows you to pick a word or phrase from the text and click
on other sites that have more information about it.

Website
A website is a collection of many web pages, and web pages are digital files that are
written using HTML(HyperText Markup Language). To make your website available to
every person in the world, it must be stored or hosted on a computer connected to the
Internet round a clock. Such computers are known as a Web Server.

The website’s web pages are linked with hyperlinks and hypertext and share a common
interface and design. The website might also contain some additional documents and
files such as images, videos, or other digital assets. With the Internet invading every
sphere, we see websites for all kinds of causes and purposes. So, we can also say that a
website can also be thought of as a digital environment capable of delivering information
and solutions and promoting interaction between people, places, and things to support
the goals of the organization it was created for.

Web - How it Works ?

On the simplest level, the Web physically consists of the following components −

• Your personal computer − This is the PC at which you sit to see the web.
• A Web browser − A software installed on your PC which helps you to
browse the Web.
• An internet connection − This is provided by an ISP and connects you to
the internet to reach to any Website.
• A Web server − This is the computer on which a website is hosted.
• Routers & Switches − They are the combination of software and hardware
who take your request and pass to appropriate Web server.
The Web is known as a client-server system. Your computer is the client and the
remote computers that store electronic files are the servers.

How Web Works?

The steps are as follows −

1. A user enters a URL into a browser (for example, Google.com. This request
is passed to a domain name server.
2. The domain name server returns an IP address for the server that hosts the
Website (for example, 68.178.157.132).
3. The browser requests the page from the Web server using the IP address
specified by the domain name server.

4. The Web server returns the page to the IP address specified by the browser
requesting the page. The page may also contain links to other files on the
same server, such as images, which the browser will also request.
5. The browser collects all the information and displays to your computer in
the form of Web page.

Web Pages
A webpage is a digital document that is linked to the World Wide Web and viewable by
anyone connected to the internet having a web browser. It can contain any type of
information, such as text, color, graphics, animations, videos, sounds, etc.
A webpage is a document that is written in the HTML, it can be viewed from the
Internet. It can be accessed by entering the URL on the address bar of the web browser.

Front-End
Front-end is the part that is accessible to the user only, It should be self-explanatory and
must be user-friendly and designed. so to achieve this we have some basic languages
which can be used to create interactive web pages.

What is Front-End Development?

Front-end Development is the development or creation of a user interface using some
markup languages and other tools. It is basically the development of the user side where
only user interaction will be counted. It consists of the interface where buttons, texts,
alignments, etc are involved and used by the user.

Back End
The back end refers to parts of a computer application or a program's code that allow it to
operate and that cannot be accessed by a user. Most data and operating syntax are stored and
accessed in the back end of a computer system. Typically the code is comprised of one or
more programming languages. The back end is also called the data access layer of software or
hardware and includes any functionality that needs to be accessed and navigated to by digital
means.

Frontend vs Backend
• The front end is the part of the website users can see and interact with such as the
graphical user interface (GUI) and the command line including the design, navigating
menus, texts, images, videos, etc. The backend, on the contrary, is part of the website
users cannot see and interact with.
• The visual aspects of the website that can be seen and experienced by users are
frontend. On the other hand, everything that happens in the background can be
attributed to the backend.
• Languages used for the front end are HTML, CSS, and JavaScript while those used
for the back end include Java, Ruby, Python, and .Net.

HTML Responsive Web Design

HTML Responsive Web Design is a smart way of designing web pages to look great on
any device. It’s all about making HTML elements adjust themselves, like resizing or
hiding, based on the device’s screen size. This ensures that no matter if someone’s using
a phone, tablet, or computer, the web pages will always look good.
Responsive Web Design comprises two words i.e., responsive and web design.
Responsive means to respond and web design means to design website. Therefore,
responsive web design generally means website that respond to or resize or adjust itself
depending upon screen size it is being seen through. It automatically adjusts to fit user’s
screen whether it’s desktop, laptop, mobile, tablet, etc. It only uses one layout for web
page and it can be done either using CSS and HTML or CSS3 and HTML5.

Static vs Dynamic Website

Static Website: In Static Websites, Web pages are returned by the server which are
prebuilt source code files built using simple languages such as HTML, CSS, or
JavaScript. There is no processing of content on the server (according to the user) in
Static Websites. Web pages are returned by the server with no change therefore, static
Websites are fast. There is no interaction with databases. Also, they are less costly as the
host does not need to support server-side processing with different languages.

Dynamic Website: In Dynamic Websites, Web pages are returned by the server which
are processed during runtime means they are not prebuilt web pages but they are built
during runtime according to the user’s demand with the help of server-side scripting
languages such as PHP, Node.js, ASP.NET and many more supported by the server. So,
they are slower than static websites but updates and interaction with databases are
possible.

Difference Between Static and Dynamic Websites:

Static Website Dynamic Website

Content of Web pages can not be change at

Content of Web pages can be changed.
runtime.

No interaction with database possible. Interaction with database is possible

It is faster to load as compared to dynamic

It is slower than static website.
website.

Cheaper Development costs. More Development costs.

No feature of Content Management. Feature of Content Management System.

HTML, CSS, Javascript is used for Server side languages such as PHP,
developing the website. Node.js are used.

Same content is delivered everytime the page Content may change everytime the page
is loaded. is loaded.
URL (Uniform Resource Locator)

URL stands for Uniform Resource Locator. Any internet location available on the server
is called a web URL, web address, or website. Each website or webpage has a unique
address called URL.

• type: It specifies the type of the server in which the file is located.
• address: It specifies the address or location of the internet server.
• path: It specifies the location of the file on the internet server.

Types of URL: URL gives the address of files created for webpages or other documents
like an image, pdf for a doc file, etc.
There are two types of URLs:

Absolute URL
This type of URL contains both the domain name and directory/page path. An absolute
URL gives complete location information. It begins with a protocol like “http://” and
continues, including every detail. An absolute URL typically comes with the following
syntax.
Syntax:
protocol://domain/path

Relative URL
This type of URL contains the path excluding the domain name. Relative means “in
relation to”, and a relative URL tells a URL location on terms of the current location.
Relative path is used for reference to a given link of a file that exist within the same
domain.
Let us assume a web developer setting up a webpage and want to link an image called
“geeksforgeeks.jpg”.
<img src="geeksforgeeks.jpg">
It would internally be interpreted like the following.
<img src="./geeksforgeeks.jpg">

Ports
Port is a logical address of a 16-bit unsigned integer that is allotted to every application
on the computer that uses the internet to send or receive data.

Whenever any application in one computer sends data to another application of a

different computer then it sends using IP Address and MAC Address but how does our
computer know that this data is for a specific application and this data is sent by any
specific application? There comes the concept of Port. Ports are assigned by computer
i.e. operating system to different applications. Ports help computer to differentiate
between incoming and outgoing traffic. Since the port is a 16-bit unsigned number it
ranges from 0 to 65535.

Types of Ports
Ports are further divided into three categories:
• Well Known Port
• Registered port
• Dynamic Port
Well Known Port
• It is from the range 0 to 1023
• It is reserved for common and specifically used service
• It is used by some widely adopted protocols and services like HTTP(port 80),
FTP(port 21), DNS(Port 53), SSH(port 22), etc…..
Registered Port
• It is from range 1024 to 49151
• These are used by applications or services that are not as common
• But it is used by those applications or services which require its specific port
• Organizations can ask IANA(Internet Assigned Number Authority) for any specific
port number within this range
Dynamic Port
• It is from range 49152 to 65535
• It is also known as Ephemeral or Private Port
• It is used for those connections that are temporary or short-lived
• It is not registered or assigned and can be used by any process

http:// and https://

HTTP
HTTP stands for HyperText Transfer Protocol. It is invented by Tim Berner. HyperText
is the type of text which is specially coded with the help of some standard coding
language called HyperText Markup Language (HTML). HTTP provides a standard
between a web browser and a web server to establish communication. It is a set of rules
for transferring data from one computer to another. Data such as text, images, and other
multimedia files are shared on the World Wide Web. Whenever a web user opens their
web browser, the user indirectly uses HTTP. It is an application protocol that is used for
distributed, collaborative, hypermedia information systems.

HTTPS
HTTPS stands for Hyper Text Transfer Protocol Secure. HTTP Secure (HTTPS), could
be a combination of the Hypertext Transfer Protocol with the SSL/TLS convention to
supply encrypted communication and secure distinguishing proof of an arranged web
server. HTTPS is more secure than HTTP because HTTPS is certified by the SSL(Secure
Socket Layer). Whatever website you are visiting on the internet, if its URL is HTTP,
then that website is not secure.
Difference between HTTP and HTTPS
HTTP HTTPS

HTTPS stands for HyperText

HTTP stands for HyperText Transfer Protocol. In Transfer Protocol Secure. In
HTTP, the URL begins with “http://”. HTTPS, the URL starts with
“https://”.

HTTPS uses port number 443

HTTP uses port number 80 for communication.
for communication.

HTTPS is considered to be
secure but at the cost of
Hyper-text exchanged using HTTP goes as plain text
processing time because Web
i.e. anyone between the browser and server can read it
Server and Web Browser need
relatively easily if one intercepts this exchange of data
to exchange encryption keys
and due to which it is Insecure.
using Certificates before
actual data can be transferred.

HTTPS works at Transport

HTTP Works at the Application Layer.
Layer.

HTTPS uses Encryption

HTTP does not use encryption, which results in low
which results in better security
security in comparison to HTTPS.
than HTTP.

HTTPS speed is slower than

HTTP speed is faster than HTTPS.
HTTP.

HTTPS will have the data

before sending it and
HTTP does not use data hashtags to secure data.
returning it to its original state
on the receiver side.

HTTP is used to transfer text, video, and images via HTTPS is used to transfer
web pages. data securely via a network

IP Address
All the computers of the world on the Internet network communicate with each other
with underground or underwater cables or wirelessly. If I want to download a file from
the internet or load a web page or literally do anything related to the internet, my
computer must have an address so that other computers can find and locate mine in order
to deliver that particular file or webpage that I am requesting. In technical terms, that
address is called IP Address or Internet Protocol Address.

Uses of the Internet

Some of the important usages of the internet are:
• Online Businesses (E-commerce): Online shopping websites have made our life
easier, e-commerce sites like Amazon, Flipkart, and Myntra are providing very
spectacular services with just one click and this is a great use of the Internet.
• Cashless Transactions: All the merchandising companies are offering services to
their customers to pay the bills of the products online via various digital payment
apps like Paytm, Google Pay, etc. UPI payment gateway is also increasing day by
day. Digital payment industries are growing at a rate of 50% every year too because
of the INTERNET.
• Education: It is the internet facility that provides a whole bunch of educational
material to everyone through any server across the web. Those who are unable to
attend physical classes can choose any course from the internet and can have point-
to-point knowledge of it just by sitting at home. High-class faculties are teaching
online on digital platforms and providing quality education to students with the help
of the Internet.
• Social Networking: The purpose of social networking sites and apps is to connect
people all over the world. With the help of social networking sites, we can talk, and
share videos, and images with our loved ones when they are far away from us. Also,
we can create groups for discussion or for meetings.
• Entertainment: The Internet is also used for entertainment. There are numerous
entertainment options available on the internet like watching movies, playing games,
listening to music, etc. You can also download movies, games, songs, TV Serial, etc.,
easily from the internet.

Internet services

To access/exchange a large amount of data such as software, audio clips, video clips, text
files, other documents, etc., we need internet services. You must use an Internet service
to connect to the Internet. Data can be sent from Internet servers to your machine via
Internet service. Some of the commonly used internet services are :
• Communication Services
• Information Retrieval Services
• File Transfer
• World Wide Web Services
• Web Services
• Directory Services
• Automatic Network Address Configuration
• Network Management Services
• Time Services
• Usenet
• NewsGroup
• Ecommerce

Introduction to Electronic Mail

Electronic mail, commonly known as email, is a method of exchanging messages
over the internet. Here are the basics of email:

1. An email address: This is a unique identifier for each user, typically in the format of
[email protected].
2. An email client: This is a software program used to send, receive and manage emails,
such as Gmail, Outlook, or Apple Mail.
3. An email server: This is a computer system responsible for storing and forwarding
emails to their intended recipients.

Electronic Mail (e-mail) is one of most widely used services of Internet. This service
allows an Internet user to send a message in formatted manner (mail) to the other
Internet user in any part of world. Message in mail not only contain text, but it also
contains images, audio and videos data. The person who is sending mail is
called sender and person who receives mail is called recipient. It is just like postal mail
service.

File Transfer Protocol (FTP)

File transfer protocol (FTP) is an Internet tool provided by TCP/IP. The first feature of
FTP is developed by Abhay Bhushan in 1971. It helps to transfer files from one
computer to another by providing access to directories or folders on remote computers
and allows software, data, text file to be transferred between different kinds of
computers. The end-user in the connection is known as localhost and the server which
provides data is known as the remote host.

What Does File Transfer Mean?

File transfer is the process of copying or moving a file from one computer to another over a network
or Internet connection. It enables sharing, transferring or transmitting a file or a logical data object
between different users and/or computers both locally and remotely.

Real-Time Communications (RTC)

What is the Real-Time Communications (RTC)?

Real-Time Communications (RTC) refers to the ability to communicate and exchange
information in real time over the internet. RTC includes technologies and protocols that
enable synchronous communication of audio, video, and other types of data between devices.

RTC technologies are used in a wide range of applications, including voice and video calls,
video conferencing, instant messaging, and live streaming. RTC relies on a combination of
protocols and technologies, including Real-time Transport Protocol (RTP) and Session
Initiation Protocol (SIP), to establish and maintain real-time communication sessions between
devices.

Real-Time Communications Examples

Here are some examples of real-time communication (RTC) applications −

Voice and video calls − Applications such as Skype, Zoom, and FaceTime enable users to
make voice and video calls over the internet in real time. These applications allow users to
see and hear each other in real time, making them an effective alternative to traditional phone
calls.

Video conferencing − Applications such as Zoom, Skype, and Google Meet enable users to
participate in video conferences with multiple participants. These applications allow users to
share their screens, collaborate on documents, and interact with each other in real time.

Instant messaging − Applications such as Slack, Microsoft Teams, and WhatsApp enable
users to send and receive messages in real time. These applications also allow for the
exchange of media, such as photos and videos, in real time.

Live streaming − Applications such as YouTube Live and Facebook Live enable users to
stream video in real time over the internet. These applications allow users to interact with
each other and with the streamer in real time through comments and other forms of feedback.

The Importance of Real-Time Communications

Some of the key benefits of RTC include −

Immediacy − RTC allows for immediate communication and interaction, which can be
particularly important in situations where quick response is required, such as emergency
situations or customer service inquiries.

Collaboration − RTC enables multiple parties to collaborate in real time, which can be
useful in a wide range of applications, such as video conferencing, team meetings, and online
education.
Flexibility − RTC allows for communication from anywhere, at any time, which can be
useful for people who are on the go or who work remotely.

Personalization − RTC allows for more personalized communication, as it enables face-to-

face interaction and the exchange of nonverbal cues, such as facial expressions and gestures.

Remote Login
Remote Login is a process in which user can login into remote site i.e. computer and use
services that are available on the remote computer. With the help of remote login a user
is able to understand result of transferring and result of processing from the remote
computer to the local computer.