Department of computer Science & Engineering

KCC ISTITUTE OF TECHNOLOGY & MANAGEMENT

2B-2C, Knowledge Park-III, Greater Noida, Uttar Pradesh

BCS353-WEB DESIGNING WORKSHOP

LAB FILE
(2024-25)
THIRD SEMESTER

SUBMITTED TO: SUBMITTED BY:

Mr. Chand Babu Student Name
(Assistant Professor) B.Tech./Branch Name (3rd Sem)
Dept. of CSE Roll No.:
Section:

Index
1
 Page
Sr. No. Name of the experiment Date
No.
1 Write a program to demonstrate headings <h1> to <h6>. 9

2
Website
A group or collection of interlinked web pages is referred to as a website. A website
is located on the web or internet under a domain. Every website has a unique web
address called URL (Uniform Resource Locator) of the website. Again, in order to
open and access the content of website, a web browser is required.

The first page of a website which displayed by the browser when the website is
opened is called the "homepage" of the website. The homepage contains links to all
the webpages of the website and can be visited by clicking on them. Website must
be hosted on a web server so that they can be accessed through the Internet.

Web Page
A web page is text file written using HTML and save with htm or html extension. A
typical web page comprises information related to the title of the web page and
hyperlinks to other related webpages. The URL of a webpage has an extension. The
URL of a web page depends upon the URL of the website of which it is a part.

A web page may contain information in different formats like text, audio, image,
video, hypertext, etc. A special application software called "web browser" is used to
display the content of a web page. In addition to HTML, many other web
programming languages like PHP, Python, Perl, etc. are used to create a webpage.

Based on the design used, the web pages can be of two types namely – static web
page and dynamic web page. A webpage is the most elementary document of a
website.

Types of Web Pages:

1. Static web page: is delivered exactly as stored, as web content in the web
server's file system. Contents cannot be changed.
2. Dynamic web page: is generated by a web application that is driven by
server-side software or client-side scripting. Dynamic web pages help the
browser (the client) to enhance the web page through user input to the server.
Contents can be changed as evolution over time.

3
Client and Server model
o A client and server networking model is a model in which computers such as
servers provide the network services to the other computers such as clients to
perform a user based tasks. This model is known as client-server networking
model.
o The application programs using the client-server model should follow the given
below strategies:

o An application program is known as a client program, running on the local

machine that requests for a service from an application program known as a
server program, running on the remote machine.
o A client program runs only when it requests for a service from the server while
the server program runs all time as it does not know when its service is
required.
o A server provides a service for many clients not just for a single client.
Therefore, we can say that client-server follows the many-to-one relationship.
Many clients can use the service of one server.

Client: When we talk the word Client, it mean to talk of a person or an

organization using a particular service. Similarly in the digital world a Client is a
computer (Host) i.e. capable of receiving information or using a particular service
from the service providers (Servers).

Servers: Similarly, when we talk the word Servers, It mean a person or medium
that serves something. Similarly in this digital world a Server is a remote
computer which provides information (data) or access to particular services.

4
Browsers and their types :
Web browsers are software applications that allow users to access and view websites
on the World Wide Web. They render and display HTML, CSS, JavaScript, and other
web technologies, enabling users to interact with web content. There are several
web browsers available, each with its unique features and characteristics. Here are
some of the most popular web browsers and their types:
Google Chrome:

Type: Proprietary, freeware

Characteristics: Google Chrome is known for its speed and performance. It offers a
simple and clean interface, frequent updates, and a vast library of extensions and
add-ons. It is available on multiple platforms, including Windows, macOS, Linux,
Android, and iOS.
Mozilla Firefox:
Type: Open-source, free software
Characteristics: Firefox is highly customizable, with a strong emphasis on user
privacy and security. It supports a wide range of extensions and provides features
like tab grouping and synchronization across devices. It is available on multiple
platforms.

Microsoft Edge: Type: Proprietary, integrated with Windows 10 and later.

Characteristics: Microsoft Edge is designed to be faster and more secure than its
predecessor, Internet Explorer. It is tightly integrated with Windows and includes
features like Cortana integration and a reading mode. It is available for Windows and
macOS.

Apple Safari:

Type: Proprietary, integrated with macOS and iOS

Characteristics: Safari is the default browser for Apple devices. It is known for its
speed and energy efficiency. It features privacy controls, reader mode, and is
integrated with other Apple services.

Opera:

Type: Proprietary, freeware

Characteristics: Opera offers a range of features, including a built-in ad blocker, a

free VPN, and a customizable start page. It is known for its speed and innovative
features. It is available on multiple platforms.

Brave:

5
Type: Open-source, freeware

Characteristics: Brave is built with a strong focus on privacy and security. It includes
a built-in ad blocker and tracking protection. Users can earn cryptocurrency tokens
(BAT) for viewing ads if they choose to opt in.

Vivaldi:

Type: Proprietary, freeware

Characteristics: Vivaldi is highly customizable and caters to power users. It offers

features like tab stacking, side panels, and a notes feature. It is available on multiple
platforms.

Tor Browser:

Type: Open-source, free software

Characteristics: The Tor Browser is built on the Tor network and is designed to
provide a high level of anonymity and privacy. It routes web traffic through multiple
servers to conceal a user's identity and location.
UC Browser:
Type: Proprietary

Characteristics: UC Browser is popular in some regions, especially on mobile devices.

It focuses on speed and data compression to reduce mobile data usage.

Internet Explorer (Legacy):

Type: Proprietary (deprecated)

Characteristics: Internet Explorer was the default browser for older versions of
Windows but has been largely replaced by Microsoft Edge. It is no longer actively
developed or recommended for use.

6
HTML Tags
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.
HTML is a markup language and makes use of various tags to format the content.
These tags are enclosed within angle braces <Tag Name>. Except few tags, most of
the tags have their corresponding closing tags.
For example, <html> has its closing tag </html> and <body> tag has its closing
tag </body> tag etc.
1. <!DOCTYPE...> This tag defines the document type and HTML version.
2. <html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by <head>...</head>
and document body which is represented by <body>...</body> tags.
3. <head> This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
4. <title> The <title> tag is used inside the <head> tag to mention the
document title.
5. <body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
6. <h1> This tag represents the heading.
7. <p> This tag represents a paragraph.

Features of HTML:

1. It is easy to learn and easy to use.

2. It is platform-independent.
3. Images, videos, and audio can be added to a web page.
4. Hypertext can be added to the text.
5. It is a markup language.
6. Case insensitive language.

HTML Document Structure

A HTML document have the following structure −

7
<!DOCTYPE html>

<html>

<head>

<title>give the title of document</title>

</head>

<body>

Document body related tags

</body>

</html>

8
Simple steps to create a basic HTML document:
1. Open notepad or another text editor.
2. At the top of the page type <html>
3. Add the opening header tag <head>
4. On the next line type <title> give title for page </title>
5. Go to next line and type closing header tag </head>
6. Go to next line and type opening body tag<body>
7. Go to next line and type closing body tag</body>
8. Finally, go to next line and type</html>
9. Visit file menu choose save as option.
10. Save as type option box choose all files.
11. Name the file file_name.html
12. Click save.

Steps to create a basic HTML document by VS Code:

1. Open Visual Studio Code.
2. Go to menu bar take a new file
3. Save file with .html extension
4. To generate HTML program Structure use (Shift + 1) and click on !
5. Write your code

9
 Program-1
<!-- Write a program to demonstrate headings <h1> to <h6> -->.

Procedure:

1. Go to start -> click on VS code.

2. Go to menu bar take a new file

3. Go to file->save->save the file with html extension.
4. Generate HTML program Structure use (Shift + 1) and click on !
5. Include title” Headings h1 to h6” in title tag.
6. Use Headings tag <h1>to<h6> to display Heading text.
7. Go Live or Run the html code using browser.

<!DOCTYPE html>

<html>

<head>

<title>Headings h1 to h6</title>

</head>

<body>

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

</body>

</html>

10
************************Output*******************************

11