WEBSITE DESIGN

(BCS306)

Dr. Taranpreet Singh Ruprah

8600465667
Course Credit: 3
Pre-requisite(s): The students should have knowledge of :
• Computer Literacy: Students should have a basic understanding of using computers and
network.
• Operating systems (e.g., Windows, macOS), and common software applications.
• Internet Basics: Familiarity with internet usage, including web browsing and searching, is
essential.

Course Objective:
• To design web base and context aware systems to acquire, organize process, share
and use the knowledge of web sites.
• The field of website is multidisciplinary as web sites are amazingly complex
systems.
• The major objective of this course is to provide a sound foundation to the students
on the concepts, percepts and practices in a field that is of immense concern to the
industry and business.
Course Outcomes (CO)
• CO-1 Understand the fundamentals of the internet and the World Wide Web
(WWW),TCP/IP, HTTP, Telnet, and FTP, internet protocols such as URLs, email systems,
domain names, and the role of web browsers.
• CO-2 Construct web pages using HTML, including creating the structure, formatting text,
and inserting multimedia elements andManage backgrounds, colors, and hyperlinks in
web pages.
• CO-3 Create and manage tables for layout and presentation and Evaluate the advantages
and disadvantages of using frames in web design. Develop web forms and understand the
role of databases in web applications.
• CO-4 Implement CSS for website layout and print layout and utilize various CSS selectors
and properties for effective styling. working mechanism of Internet, Web Portals and
Ecommerce portals and need of Infrastructure.
• CO-5 Write basic JavaScript code to add interactivity to web pages.
Syllabus:
Module I: Overview of Internet
• Introduction to Internet and WWW, Concept of Networking and Layers of OSI Model, Internet protocols like TCP/IP, http,
telnet and ftp, URL, email, domain name, Web Browsers.
Module II: Principles of Web Design
• Key issues to be considered in web site design. Structure of a Web Page: Introduction to HTML, Elements of HTML syntax,
Head and Body sections, Building HTML documents, Inserting text, images, hyperlinks, Backgrounds and Color Control, HTML
Editors & Tools: Use of different HTML editors and tools like Netscape Communicator and Microsoft Front Page etc
Module III: HTML Tags
• Use of Different HTML tags in web pages. Table Handling: Table layout & presentation, constructing tables in a web page,
developing a web page in a table. Ordered and unordered lists. Frames: Developing Web pages using frames. Advantages
and disadvantages of frames. Creating forms, Role of Databases in web applications.Use of at least one graphical and
animation tools like Adobe Fireworks, Abode Photoshop, Gif Animator, Gimp etc.
Module IV: Cascading style-sheet (CSS) in HTML
• Introduction to Cascading Style Sheets (CSS), Types of Style Sheets (Inline, Internal and External), CSS for Website Layout and
Print Layout. Types of various CSS Selectors, CSS properties: Type Properties, Background Properties, Block Properties, Box
Model Properties, List Properties, Border Properties, Positioning Properties.
Module V: Introduction to Java Script
• Role of java script in a web page, Script writing basics, Adding interactivity to a web page, creating dynamic web pages,
Similarities to java, embedding JavaScript code, embedding java applets in a web page, Form validation using java script
Unit-I- Overview of Internet
• Introduction to Internet
• WWW
• Concept of Networking
• Layers of OSI Model
• Internet protocols like TCP/IP
• http,
• telnet
• ftp
• URL
• email
• domain name
• Web Browsers.
Internet
• A network of networks is called an internetwork, or simply the internet.
• It is the largest network in existence on this planet.
• The internet hugely connects all WANs and it can have connection to LANs
and Home networks.
• Internet uses TCP/IP protocol suite and uses IP as its addressing protocol.
• Present day, Internet is widely implemented using IPv4. Because of shortage
of address spaces, it is gradually migrating from IPv4 to IPv6.
• Internet enables its users to share and access enormous amount of
information worldwide.
• It uses WWW, FTP, email services, audio and video streaming etc. At huge
level, internet works on Client-Server model.
 WWW
• The World Wide Web (WWW), often called the Web, is a system of
interconnected webpages and information that you can access using the
Internet.
• 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 Hypertext Transfer Protocol(HTTP).
 Working of WWW
• The below diagram indicates how the
Web operates just like client-server
architecture of the internet.

• When users request web pages or other information, then the web
browser of your system request to the server for the information.

• The web server provide requested services to web browser back and
finally the requested service is utilized by the user who made the
request.
Features of WWW

• WWW is open source.

• It is a distributed system spread across various websites.
• It is a Hypertext Information System.
• It is Cross-Platform.
• Uses Web Browsers to provide a single interface for many services.
• Dynamic, Interactive and Evolving.

Components of the Web

There are 3 components of the web:

• Uniform Resource Locator (URL): URL serves as a system for resources on the web.
• Hyper Text Transfer Protocol (HTTP): HTTP specifies communication of browser and server.
• Hyper Text Markup Language (HTML): HTML defines the structure, organization and content of a web page.
 Difference Between WWW and Internet

WWW Internet
It is originated in 1989. It is originated in 1960.

WWW is an interconnected network of

Internet is used to connect a computer
websites and documents that can be
with other computer .
accessed via the Internet.

WWW used protocols such as HTTP Internet used protocols such as TCP/IP

It is based on software. It is based on hardware.

It is a service contained inside an There is a entire infrastructure in

infrastructure. internet.
 Concept of Networking
• Networking allows devices to be connected to each other on a local area
network (LAN) or to a larger network, such as the internet.
• This allows people to share resources, communicate, and use or offer
services.
• Basics building blocks of a Computer network are Nodes and Links.
• A Network Node can be illustrated as Equipment for Data Communication
like a Switch,Modem, Router, etc., or Equipment of a Data Terminal like
connecting two computers or more.
 Basic Terminologies of Computer Networks
• Network: A network is a collection of computers and devices that are connected together to
enable communication and data exchange.
• Nodes: Nodes are devices that are connected to a network. These can include computers,
Servers, Printers, Routers, Switches, and other devices.
• Protocol: A protocol is a set of rules and standards that govern how data is transmitted over a
network. Examples of protocols include TCP/IP, HTTP, and FTP.
• Topology: Network topology refers to the physical and logical arrangement of nodes on a
network. The common network topologies include bus, star, ring, mesh, and tree.
• Service Provider Networks: These types of Networks give permission to take Network Capacity
and Functionality on lease from the Provider. Service Provider Networks include Wireless
Communications, Data Carriers, etc.
• IP Address: An IP address is a unique numerical identifier that is assigned to every device on a
network. IP addresses are used to identify devices and enable communication between them.
• DNS: The Domain Name System (DNS) is a protocol that is used to translate human-readable
domain names (such as www.google.com) into IP addresses that computers can understand.
• Firewall: A firewall is a security device that is used to monitor and control incoming and outgoing
network traffic. Firewalls are used to protect networks from unauthorized access and other
security threats
Network Types

MAN

LAN

WAN
 Layers of OSI Model
• OSI stands for Open Systems Interconnection.
• It is a 7-layer architecture with each layer having specific functionality to
perform.
• All these 7 layers work collaboratively to transmit the data from one person
to another across the globe.
• The OSI reference model was developed by ISO – ‘International Organization
for Standardization ‘, in the year 1984.
• The OSI model provides a theoretical foundation for understanding network
communication .
• Physical Layer: • Transport Layer:
• Service-point addressing.
• Physical characteristics of medium.
• Segmentation and reassembly.
• Representation of bits.
• Connection control.
• Data rate.
• Flow control.
• Synchronization of bits
• Error control.
• Line configuration.
• Physical topology. • Session Layer:
• Transmission mode. • Dialog control.
• Data Link Layer: • Synchronization.
• Framing • Presentation Layer
• Physical addressing. • Translation
• Flow control. • Encryption.
• Error control. • Compression
• Access control. • Application Layer
• Network Layer • Network virtual terminal
• Logical addressing • File transfer, access, and management.
• Routing • Mail services
Protocol in Each Layer
Internet Protocol –TCP/IP
• Internet Protocols are a set of rules that governs the communication and
exchange of data over the internet.
• Both the sender and receiver should follow the same protocols in order to
communicate the data.
• The internet and many other data networks work by organizing data into
small pieces called packets.
• Each large data sent between two network devices is divided into smaller
packets by the underlying hardware and software.
• An IP address represents an Internet Protocol address. A unique address that
identifies the device over the network.
TCP/IP (Transmission Control Protocol/ Internet Protocol)
• The IP protocol ensures that each computer that is connected to the
Internet is having a specific serial number called the IP address.
• TCP specifies how data is exchanged over the internet and how it should
be broken into IP packets.
• It also makes sure that the packets have information about the source of
the message data, the destination of the message data, the sequence in
which the message data should be re-assembled, and checks if the
message has been sent correctly to the specific destination.
• The TCP is also known as a connection-oriented protocol.
 TCP/IP Model
• The TCP/IP model is a fundamental framework for computer networking.
• It stands for Transmission Control Protocol/Internet Protocol, which are the core
protocols of the Internet.
• This model defines how data is transmitted over networks, ensuring reliable
communication between devices.
• It consists of four layers: the Link Layer, the Internet Layer, the Transport Layer,
and the Application Layer.
• Each layer has specific functions that help manage different aspects of network
communication, making it essential for understanding and working with modern
networks.
• The send data in reliable and accurate manner, so that the receiver will receive
the same information which is sent by the sender.
• To ensure that, each message reaches its final destination accurately, the TCP/IP
model divides its data into packets and combines them at the other end, which
helps in maintaining the accuracy of the data while transferring from one end to
another end.
Difference Between TCP and IP
Feature TCP (Transmission Control Protocol) IP (Internet Protocol)
Ensures reliable, ordered, and error-checked delivery of Provides addressing and routing of packets across
Purpose
data between applications. networks.

Type Connection-oriented Connectionless

Manages data transmission between devices, ensuring Routes packets of data from the source to the destination
Function
data integrity and order. based on IP addresses.

No, IP itself does not handle errors; relies on upper-layer

Error Handling Yes, includes error checking and recovery mechanisms.
protocols like TCP.

Flow Control Yes, includes flow control mechanisms. No

Congestion Control Yes, manages network congestion. No

Breaks data into smaller packets and reassembles them

Data Segmentation Breaks data into packets but does not handle reassembly.
at the destination.

Header Size Larger, 20-60 bytes Smaller, typically 20 bytes

Reliability Provides reliable data transfer Does not guarantee delivery, reliability, or order.

Transmission
Yes, acknowledges receipt of data packets. No
Acknowledgment
 Difference between TCP/IP and OSI Model
TCP/IP OSI

TCP refers to Transmission Control Protocol. OSI refers to Open Systems Interconnection.

TCP/IP uses both the session and presentation layer in

OSI uses different session and presentation layers.
the application layer itself.

TCP/IP follows connectionless a horizontal approach. OSI follows a vertical approach.

The Transport layer in TCP/IP does not provide In the OSI model, the transport layer provides
assurance delivery of packets. assurance delivery of packets.

TCP/IP model network layer only provides

Connectionless and connection-oriented services are
connectionless (IP) services. The transport layer (TCP)
provided by the network layer in the OSI model.
provides connections.
 HTTP
• HTTP stands for HyperText Transfer Protocol.
• It is the main way web browsers and servers communicate to share
information on the internet.
• HyperText is the type of text that is specially coded with the help of some
standard coding language called HyperText Markup Language (HTML).
• HTTP/2 is the new version of HTTP. HTTP/3 is the latest version of HTTP,
which is published in 2022.
• HTTP is a set of rules for sharing data on the World Wide Web (WWW).
• HTTP helps web browsers and servers communicate, allowing people to
access and share information over the internet.
 Working of HTTP [HyperText Transfer Protocol]
• First of all, whenever we want to open any website we first open a web
browser after that we will type the URL of that website (e.g.,
www.facebook.com ).
• This URL is now sent to the Domain Name Server (DNS).
• Then DNS first checks records for this URL in their database, and then DNS
will return the IP address to the web browser corresponding to this URL.
• Now the browser is able to send requests to the actual server.
Telnet
• Telnet is a network protocol that allows users to remotely access and control
a computer or device over a TCP/IP network.
• It's a client-server protocol that uses a virtual terminal connection emulator
to act like a physical terminal connected to the remote host.
• TELNET stands for Teletype Network.
• The local computer uses a telnet client program and the remote computers
use a telnet server program.
• The computer which starts the connection is known as the local computer.
• The computer which is being connected to i.e. which accepts the connection
known as the remote computer.
• During telnet operation, whatever is being performed on the remote
computer will be displayed by the local computer.
Logging in TELNET
• The logging process can be further categorized into two parts:
• Local Login
• Remote Login
Local Login
• Whenever a user logs into its local system, it is known as local login.

The Procedure of Local Login

• Keystrokes are accepted by the terminal driver when the user types at the terminal.
• Terminal Driver passes these characters to OS.
• Now, OS validates the combination of characters and opens the required application.
 Remote Login
• Remote Login is a process in which users can log in to a 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 the result of
transferring the result of processing from the remote computer to the local
computer.
FTP
• File Transfer Protocol (FTP) is a standard network protocol that allows users to transfer
files between hosts on a TCP-based network, such as the internet.

• FTP or File Transfer Protocol is said to be one of the earliest and also the most common
forms of transferring files on the internet.

• Located in the application layer of the OSI model, FTP is a basic system that helps in
transferring files between a client and a server.

• It is what makes the FTP unique that the system provides a reliable and efficient means of
transferring files from one system to another even if they have different file structures and
operating systems.

• Contrary to other protocols such as http that cover hypertexts and web resources in
general, ftp is dedicated to the management and the transfer of text, binary, or image files.
FTP is useful for a variety of purposes, including:
• Large file transfers: FTP can transfer hundreds of gigabytes of data at once.
• Multiple file transfers: FTP allows users to select multiple files and send them all at once.
• Backup: FTP can be used to back up data from one location to a secured backup server.
• Replication: FTP can be used to duplicate data from one system to another.
• Access and data loading: FTP can be used to access shared web hosting and cloud
services.
• Remote File Management: Files on a remote server can be uploaded, downloaded, deleted,
renamed, and copied according to the users’ choices.
• Automating File Transfers: FTP is a great protocol for the execution of file transfers on
predefined scripts and employments.
• Accessing Public Files: Anonymous FTP means that everybody irrespective of the identity
is allowed to download some files with no permissions needed.
 How Does FTP Work?
• FTP is a client server protocol that has two
communication channel, command channel for
conversation control and data channel for file
content.

The steps mentioned in which FTP works:

• A user has to log in to FTP Server first, there
may be some servers where you can access to
content without login, known as anonymous
FTP.

• Client can start a conversation with server,

upon requesting to download a file.

• The user can start different functions like

upload, delete, rename, copy files, etc. on
server.
 URL(Uniform Resource Locator)
• URL is the abbreviation of Uniform Resource Locator.
• It is the resource address on the internet.
• The URL (Uniform Resource Locator) is created by Tim Berners-Lee and the
Internet Engineering working group in 1994.
• URL is the character string (address) which is used to access data from the
internet.
• URLs consist of multiple parts -- including a protocol and domain name -- that
tell web browsers how and where to retrieve a resource.
• The URL is the type of URI (Uniform Resource Identifier).
• Uniform Resource Identifiers (URIs) are strings of characters used to identify a
resource over a network.
• A URL is the most common type of URI. URLs are essential to navigating the
internet.
A URL contains the following information which is listed below:
• Protocol name
• A colon followed by double forward-slash (://)
• Hostname (domain name) or IP address
• A colon followed by port number (optional – unless specified otherwise, “:80” is the
default when using HTTP, and “:443” is the default when using HTTPS)
• Path of the file
• Computers use both HTTP and HTTPS to retrieve data from web servers to view
content in a browser.
• One difference between them is that HTTPS uses a Secure Sockets Layer certificate to
encrypt the end-user and server connection. HTTPS uses TCP/IP port number 443 by
default, whereas HTTP uses port 80.
A URL contains the following information which is listed below:
• Protocol name
• A colon followed by double forward-slash (://)
• Hostname (domain name) or IP address
• A colon followed by port number (optional – unless specified otherwise, “:80” is the
default when using HTTP, and “:443” is the default when using HTTPS)
• Path of the file
• Computers use both HTTP and HTTPS to retrieve data from web servers to view
content in a browser.
• One difference between them is that HTTPS uses a Secure Sockets Layer certificate to
encrypt the end-user and server connection. HTTPS uses TCP/IP port number 443 by
default, whereas HTTP uses port 80.
Email
• Electronic mail, commonly known as email, is a method of exchanging
messages over the internet. Here are the basics of email:
• An email address: This is a unique identifier for each user, typically in the
format of name@domain.com.
• An email client: This is a software program used to send, receive and
manage emails, such as Gmail, Outlook, or Apple Mail.
• An email server: This is a computer system responsible for storing and
forwarding emails to their intended recipients.
To send an email:
• Compose a new message in your email client.
• Enter the recipient’s email address in the “To” field.
• Add a subject line to summarize the content of the message.
• Write the body of the message.
• Attach any relevant files if needed.
• Click “Send” to deliver the message to the recipient’s email server.

Emails can also include features such as cc (carbon copy) and bcc (blind
carbon copy) to send copies of the message to multiple recipients, and reply,
reply all, and forward options to manage the conversation.
Components of E-Mail System
The basic components of an email system are : User Agent (UA), Message
Transfer Agent (MTA), Mail Box, and Spool file.

• User Agent (UA) :

• The UA is normally a program which is used to send and receive mail.
• Sometimes, it is called as mail reader. It accepts variety of commands for composing,
receiving and replying to messages as well as for manipulation of the mailboxes.

• Message Transfer Agent (MTA) :

• MTA is actually responsible for transfer of mail from one system to another.
• To send a mail, a system must have client MTA and system MTA.
• It transfer mail to mailboxes of recipients if they are connected in the same machine.
• It delivers mail to peer MTA if destination mailbox is in another machine.
• The delivery from one MTA to another MTA is done by Simple Mail Transfer Protocol.
• Mailbox :
• It is a file on local hard drive to collect mails.
• Delivered mails are present in this file.
• The user can read it delete it according to his/her requirement.
• To use e-mail system each user must have a mailbox . Access to mailbox is only to
owner of mailbox.
• Spool file :
• This file contains mails that are to be sent.
• User agent appends outgoing mails in this file using SMTP.
• MTA extracts pending mail from spool file for their delivery.
• E-mail allows one name, an alias, to represent several different e-mail addresses.
• It is known as mailing list, Whenever user have to sent a message, system checks
recipient’s name against alias database.
• If mailing list is present for defined alias, separate messages, one for each entry in the
list, must be prepared and handed to MTA.
• If for defined alias, there is no such mailing list is present, name itself becomes naming
address and a single message is delivered to mail transfer entity.
 Domain name
• The Domain Name System (DNS) is like the internet’s phone book.
• It helps you find websites by translating easy-to-remember names (like
www.example.com) into the numerical IP addresses (like 192.0.2.1) that
computers use to locate each other on the internet.
• Without DNS, you would have to remember long strings of numbers to visit
your favorite websites.
• Domain Name System (DNS) is a hostname used for IP address translation
services.
• DNS is a distributed database implemented in a hierarchy of name servers.
• It is an application layer protocol for message exchange between clients and
servers. It is required for the functioning of the Internet.
 Types of Domain
• Generic Domains: .com(commercial), .edu(educational), .mil(military),
.org(nonprofit organization), .net(similar to commercial) all these are generic
domains.
• Country Domain: .in (India) .us .uk
• 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 www.facebook then we have to type:
• Nslookup www.facebook.com 157.240.22.35
 Web Browsers
• The web browser is an application software to explore www (World Wide
Web).
• It provides an interface between the server and the client and it requests to
the server for web documents and services.
• It works as a compiler to render HTML which is used to design a webpage.
• 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.
• Google Chrome, Microsoft Edge, Mozilla Firefox, and Safari are examples of
web browsers.
• The first web browser World Wide Web was invented in the year of 1990 by
Tim Berners-Lee. Later, it becomes Nexus.
• In the year of 1993, a new browser Mosaic was invented by Mark
Andreessen and their team.
• It was the first browser to display text and images at a time on the device
screen.
• He also invents another browser Netscape in 1994.
• Next year Microsoft launched a web browser Internet Explorer which was
already installed in the Windows operating system.
• After this many browsers were invented with various features like Mozilla
Firefox, Google Chrome, Safari, Opera, etc.
 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.
• 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.

• When we visited any website over the internet our web browser stores information
about us in small files called cookies.
• Cookies are designed to remember stateful information about our browsing history.
• Some more cookies are used to remember about us like our interests, our browsing
patterns, etc. Websites show us ads based on our interests using cookies.
Some 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.