Experiment 1: Survey of Ten Websites

AIM:

To analyze and document ten websites that I like and dislike, providing
reasons for each preference.

Objective:

1. To understand the factors that make a website user-friendly and

appealing.
2. To identify the design flaws or features that contribute to a negative user
experience.
3. To develop critical analysis skills for web design.

Websites: -

1. Google (www.google.com)
About: Google is the most widely used search engine that provides instant access to
information from across the web.

Likes:

1. Minimalist and fast interface.

2. Highly accurate and relevant search results.
3. Integrates well with other Google services like Gmail, Maps, and Drive.
Dislikes:
4. Ads in search results can sometimes feel intrusive.
5. Privacy concerns due to data tracking and collection.
6. Limited visual appeal compared to some modern search engines.

2. YouTube (www.youtube.com)

About: YouTube is the largest video-sharing platform, where users can watch, upload, and
share videos for free.

Likes:

1 Tanishq Gupta
 1. Huge variety of content, from tutorials to entertainment.
2. Intuitive platform with personalized recommendations.
3. Allows creators to monetize their content.
Dislikes:
4. Ads interrupt the viewing experience unless you subscribe to Premium.
5. The recommendation algorithm often promotes repetitive content.
6. The platform lacks robust tools for parental control.

3. Amazon (www.amazon.com)

About: Amazon is a global e-commerce platform that offers a vast selection of products
and services, including online shopping and cloud computing.

Likes:

1. Offers a wide variety of products in almost every category.

2. Fast and reliable delivery options, including same-day delivery in some areas.
3. Secure and trustworthy payment system.
Dislikes:
4. Overwhelming product recommendations and sponsored listings.
5. Cluttered interface due to numerous features and options.
6. Fake or misleading product reviews are a recurring issue.

4. Netflix (www.netflix.com)
About: Netflix is a subscription-based streaming service offering a large library of movies,
TV shows, and original productions.

Likes:

1. High-quality original content and exclusive series.

2. Easy-to-use interface across devices.
3. Offers offline viewing options.
Dislikes:
4. Frequent content removals due to licensing issues.
5. Limited regional content libraries.
6. Periodic price increases for subscriptions.

2 Tanishq Gupta
5. Wikipedia (www.wikipedia.org)

About: Wikipedia is a free, open-source encyclopedia with articles contributed by

volunteers worldwide.

Likes:

1. A vast repository of information on almost every topic.

2. Multilingual support for a global audience.
3. Pages load quickly, even on slower connections.
Dislikes:
4. Information may occasionally be outdated or biased.
5. The plain and text-heavy design can feel boring.
6. No official offline reading support without third-party tools.

6. Instagram (www.instagram.com)

About: Instagram is a social media platform for sharing photos, videos, and stories with
friends and followers.

Likes:

1. Visually appealing and user-friendly for sharing media.

2. Strong social connectivity with features like reels, stories, and direct messages.
3. Perfect for influencers and small businesses to reach an audience.
Dislikes:

4. Ad-heavy feed that disrupts the user experience.

5. Algorithmic feed reduces control over the content users see.
6. Concerns over addiction and negative mental health impacts.

7. Flipkart (www.flipkart.com)
About: Flipkart is one of India's leading e-commerce platforms, offering products across
categories like electronics, fashion, and groceries.

Likes:

1. User-friendly shopping experience with well-organized categories.

3 Tanishq Gupta
 2. Competitive pricing and regular sales events.
3. Multiple payment options, including cash-on-delivery.
Dislikes:
4. Delivery services are slower in rural areas.
5. Occasional glitches or crashes in the app during peak sales.
6. Limited customer support for some products or issues.

8. Facebook (www.facebook.com)

About: Facebook is a social networking platform used for connecting with friends, family,
and communities.

Likes:

1. Rich features for social interaction, such as groups, events, and marketplace.
2. Tools for businesses to reach and engage customers.
3. Easy-to-use event creation and planning features.
Dislikes:
4. Interface is often cluttered with too many features.
5. Notifications and ads can become overwhelming.
6. Privacy concerns regarding data sharing and breaches.

9. Coursera (www.coursera.org)

About: Coursera is an online learning platform offering courses from top universities and
institutions worldwide.

Likes:

1. Provides access to high-quality educational content and certifications.

2. Flexible learning schedules for working professionals.
3. Partnered with prestigious universities like Stanford and Yale.
Dislikes:
4. Some courses are expensive.
5. Limited free content compared to paid offerings.
6. Course updates are sometimes delayed.

10. Zomato (www.zomato.com)

4 Tanishq Gupta
About: Zomato is a food delivery and restaurant review platform, popular for ordering
meals online.

Likes:

1. Simplifies food ordering with an intuitive interface.

2. Provides detailed restaurant reviews and ratings.
3. Reliable and quick delivery in urban areas.
Dislikes:
4. Delivery charges can be high during peak hours.
5. Inconsistent customer service for refunds or complaints.
6. The app sometimes crashes or lags during heavy usage.

Conclusion:
The survey of ten websites highlights the key factors that contribute to a positive or
negative user experience. While usability, content variety, and intuitive design are
appreciated, issues like intrusive ads, privacy concerns, and platform limitations detract
from the experience. This analysis emphasizes the importance of balancing functionality,
design, and user-centric features in web development.

5 Tanishq Gupta
Experiment 2: Introduction to Basic HTML Elements

Aim:

To understand and implement basic HTML elements to create a simple webpage.

Objective:

To learn the structure of HTML documents and explore basic elements like headings,
paragraphs, links, images, and lists.

Explanation of Basic HTML Elements:

HTML (HyperText Markup Language) is the standard language for creating and
structuring web pages. Below is a detailed explanation of basic HTML tags:

1. <html>
Purpose: The root element that contains all the content of the HTML document.

Syntax:

Html code

<html>
<!-- All other HTML elements go here -->
</html>

2. <head>

Purpose: Contains meta-information about the webpage, such as its title, character
encoding, and linked stylesheets/scripts.

Key Elements Inside <head>:

<title>: Specifies the title displayed on the browser tab.

6 Tanishq Gupta
<meta>: Defines metadata (e.g., character set, viewport settings for responsiveness).

<link>: Links external stylesheets.

<style>: Adds internal CSS for styling.

<script>: Links or embeds JavaScript.

Example:

Html code

<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
</head>

3. <body>
Purpose: Contains all the visible content of the webpage, including text, images, links, and
other elements.

Syntax:

Html code

<body>
<!-- Visible content goes here -->
</body>

4. Headings (<h1> to <h6>)

Purpose: Used to define headings, with <h1> being the largest and most important, and
<h6> the smallest.

Syntax:

Html code

<h1>Main Heading</h1>
<h2>Subheading</h2>

7 Tanishq Gupta
<h3>Smaller Subheading</h3>

5. <p> (Paragraph)
Purpose: Defines a block of text.

Syntax:

Html code

<p>This is a paragraph of text.</p>

6. <a> (Anchor)
Purpose: Creates hyperlinks to navigate to other pages, sections, or websites.

Attributes:

href: Specifies the link's destination.

target: Specifies where to open the link (e.g., _blank for a new tab).

Syntax:

Html code

<a href="https://www.example.com" target="_blank">Visit Example</a>

7. <img> (Image)
Purpose: Embeds images in a webpage.

Attributes:

src: Specifies the image file path or URL.

alt: Provides alternative text for accessibility.

width and height: Define the dimensions of the image.

8 Tanishq Gupta
Syntax:

Html code

<img src="image.jpg" alt="Description of Image" width="300" height="200">

8. Lists
Unordered List (<ul>):

Purpose: Creates a bullet-point list.

Syntax:

Html code

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Ordered List (<ol>):

Purpose: Creates a numbered list.

Syntax:

Html code

<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>

9. <table> (Table)
Purpose: Displays data in a tabular format with rows and columns.

9 Tanishq Gupta
Key Tags:

<table>: Defines the table.

<tr>: Table row.

<th>: Table header (bold and centered by default).

<td>: Table data (cell content).

Syntax:

Html code

<table border="1">
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

10. <div> (Division)

Purpose: Groups related elements together for styling or layout purposes.

Syntax:

Html code

<div>
<p>This is inside a div.</p>
</div>

11. <span>
Purpose: Used to style or manipulate small sections of text within other elements.

10 Tanishq Gupta
Syntax:

Html code

<p>This is <span style="color: red;">highlighted</span> text.</p>

12. <form> (Form)

Purpose: Collects user input and sends it to a server.

Key Elements:

<input>: Defines input fields (e.g., text, password, submit).

<textarea>: Defines multiline text input.

<button>: Creates clickable buttons.

Syntax:

Html code

<form action="submit.php" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

13. <br> (Line Break)

Purpose: Inserts a line break in text.

Syntax:

Html code

<p>This is a line.<br>This is a new line.</p>

14. <hr> (Horizontal Rule)

11 Tanishq Gupta
Purpose: Inserts a horizontal line to separate content.

Syntax:

Html code

<hr>

15. <strong> and <em>

•
Purpose:
o <strong>: Makes text bold (indicating importance).
o <em>: Makes text italicized (emphasis).
• Syntax:
Html code
<p>This is <strong>bold</strong> text and <em>italic</em> text.</p>

Conclusion:

These basic HTML tags form the foundation of all web pages. By mastering them, you can
build simple, static websites and create a strong base for more advanced topics like CSS
and JavaScript.

Experiment 3: Using Table Tag to Format Web Page

AIM:
To use the table tag in HTML to format a web page and create a timetable for the class.

Objective:

12 Tanishq Gupta
 1. To learn how to structure data using the <table> tag in HTML.
2. To apply styling to enhance the visual appearance of tables.

Explanation of table tags in HTML:

The <table> tag in HTML is used to create a table on a webpage. It organizes data into
rows and columns, with each row defined by the <tr> tag. The <th> tag is used for header
cells, which typically contain column titles, and the <td> tag is used for regular data cells.
Tables are often styled using CSS to improve readability and appearance, such as adding
borders, padding, and alternating row colors. The <thead>, <tbody>, and <tfoot>
elements can be used to group the header, body, and footer sections of the table for better
organization.

CODE IN HTML
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, initial-scale=1.0">

<title>Timetable(Tanishq Gupta)</title>

<style>

table {

width: 100%;

border-collapse: collapse;

th, td {

border: 1px solid black;

13 Tanishq Gupta
padding: 8px;

text-align: center;

th {

background-color: #f2f2f2;

caption {

font-weight: bold;

font-size: 1.2em;

margin: 10px 0;

</style>

</head>

<body>

<table>

<caption>CSE-B 1st Semester</caption>

<tr>

<th>Day/Time</th>

<th>9:00-10:00</th>

<th>10:00-11:00</th>

<th>11:00-12:00</th>

<th>12:00-1:00</th>

<th>1:00-2:00</th>

<th>2:00-3:00</th>

<th>3:00-4:00</th>

<th>4:00-5:00</th>

14 Tanishq Gupta
</tr>

<tr>

<th>Monday</th>

<td>EVS</td>

<td>Comm. English</td>

<td>Eng. Graph. (G2, Dr. Anu)<br>Prog.

using C (G1, Eng. Lab)</td>

<td>Eng. Graph. (G2, Dr. Anu)<br>Prog.

using C (G1, Eng. Lab)</td>

<td></td>

<td>Sports</td>

<td></td>

<td></td>

</tr>

<tr>

<th>Tueday</th>

<td>Maths</td>

<td>Physics</td>

<td>Physics Lab (G1, AS &

MR)<br>>Comm. English Lab (G2, XXXX)</td>

<td>Physics Lab (G1, AS &

MR)<br>Comm. English Lab (G2, XXXX)</td>

<td></td>

<td>Sports</td>

<td>EVS</td>

<td></td>

15 Tanishq Gupta
</tr>

<tr>

<th>Wednesday</th>

<td>Prog. using C</td>

<td>Physics</td>

<td>Physics Lab (G2, AS & MR)<br>Eng.

Graph. (G1)</td>

<td>Physics Lab (G2, AS & MR)<br>Eng.

Graph. (G1)</td>

<td></td>

<td>Library</td>

<td>Maths</td>

<td></td>

</tr>

<tr>

<th>Thursday</th>

<td>Prog. using C</td>

<td>Physics</td>

<td>Eng. Graph. </td>

<td>Comm. English </td>

<td></td>

<td>Maths</td>

<td></td>

<td>Club Activity</td>

</tr>

<tr>

16 Tanishq Gupta
<th>Friday</th>

<td>Prog. using C</td>

<td>Physics</td>

<td>Comm. English Lab (G1,

XXX)<br>Prog. using C (G2, Comp Lab)</td>

<td>Comm. English Lab (G1,

XXX)<br>Prog. using C (G2, Comp Lab)</td>

<td></td>

<td>Maths</td>

<td></td>

<td></td>

</tr>

</table>

<br>

<table>

<caption>Course and Faculty</caption>

<tr>

<th>Course</th>

<th>Faculty</th>

<th>Course</th>

<th>Faculty</th>

</tr>

<tr>

<td>Communication Skills in English</td>

<td>Dr. Suman</td>

<td>Communication Skills in English Lab,

17 Tanishq Gupta
G1</td>

<td>Dr. Suman</td>

</tr>

<tr>

<td>Maths</td>

<td>Dr. Vipin</td>

<td>Communication Skills in English Lab,

G2</td>

<td>Ms. Sharon</td>

</tr>

<tr>

<td>Physics + Lab</td>

<td>Dr. GK</td>

<td>Programming for problem solving

using C + Lab</td>

<td>Dr. Shalu</td>

</tr>

<tr>

<td>EVS</td>

<td>EVS Department</td>

<td>Engineering Graphics (web

design)</td>

<td>Dr. Navdeep</td>

</tr>

<tr>

<td>Sports</td>

18 Tanishq Gupta
<td>Dr. Sunita Kaok</td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

19 Tanishq Gupta
OUTPUT: -

Conclusion:

The use of the <table> tag in HTML demonstrates how to effectively organize and present
structured data in a visually appealing format. By incorporating styling and captions, tables
can enhance the readability and usability of web pages. This experiment helps build
foundational skills for creating professional and well-formatted web layouts.

20 Tanishq Gupta
Experiment 4: Making Portfolio of Myself
AIM:
To create a comprehensive portfolio that reflects my personal development,
achievements, skills, and experiences. The portfolio will serve as a tool for self-reflection,
career growth, and future goal setting.

Objective:
• Showcase Personal Achievements and Skills: Highlight key accomplishments,
experiences, and skills to demonstrate personal growth and capabilities.
• Reflect on Strengths and Areas for Improvement: Engage in self-reflection to
identify strengths, weaknesses, and areas for future development.
• Set Clear Personal and Professional Goals: Define short-term and long-term
goals, outlining a path for future growth and success.

Explanation of Profile page:

A profile page in HTML is a personal webpage that introduces you to others. It typically
includes essential details such as your name, contact information, and a brief bio. The
page may also showcase your skills, experience, and projects. A well-designed profile
page serves as a professional introduction and a tool for networking.
CODE IN HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tanishq Gupta - Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 0;
}

21 Tanishq Gupta
 header {
background-color: #333;
color: white;
text-align: center;
padding: 20px 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.profile img {
border-radius: 50%;
width: 150px;
height: 150px;
margin-right: 20px;
}
.profile h2 {
margin: 0;
font-size: 28px;
}
.profile p {
margin: 5px 0;
}
.skills, .hobbies, .projects {
margin-bottom: 30px;
}
.skills ul, .hobbies ul, .projects ul {
list-style: none;
padding: 0;
}
.skills li, .hobbies li, .projects li {
background-color: #fff;

22 Tanishq Gupta
 margin: 10px 0;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: white;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>

<header>
<h1>Tanishq Gupta - Portfolio</h1>
</header>

<div class="container">
<div class="profile">
<img src="my pic.jpg" alt="Tanishq Gupta">
<div>
<h2>Tanishq Gupta</h2>
<p>Email: <a
href="mailto:[email protected]">[email protected]</a></p>
<p>Phone: +91 8130595216</p>
</div>
</div>

<div class="skills">
<h3>Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>

23 Tanishq Gupta
 <li>Flutter</li>
<li>C</li>
</ul>
</div>

<div class="hobbies">
<h3>Hobbies</h3>
<ul>
<li>Reading books</li>
<li>Coding and building projects</li>
<li>Playing chess</li>
<li>Traveling and exploring new places</li>
<li>Photography</li>
</ul>
</div>

<div class="projects">
<h3>Projects</h3>
<ul>
<li>Calculator</li>
<li>Todo List App</li>
<li>Tic Tac Toe Game</li>
</ul>
</div>
</div>

</body>
</html>

24 Tanishq Gupta
OUTPUT: -

Tanishq Gupta
Email: [email protected]
Phone: +91 8130595216

Skills

• HTML
• CSS
• Flutter
• C

Hobbies

• Reading books
• Coding and building projects
• Playing chess
• Traveling and exploring new places
• Photography

Projects

• Calculator
• Todo List App
• Tic Tac Toe Game

25 Tanishq Gupta
Conclusion:
In this practical, I successfully created a personal portfolio webpage using HTML and CSS.
The portfolio showcases my skills, hobbies, projects, and contact details in a visually
appealing format. This experiment helped me understand how to design a professional and
user-friendly profile page. It also emphasized the importance of organizing and presenting
personal information effectively.

Experiment 5: Create a Style Sheet using CSS to format text tags and
embed it into a webpage to enhance text presentation and styling.

AIM:
To create a style sheet (CSS) to define formatting for text tags and embed the style sheet
into a webpage.

OBJECTIVE:

• Learn the use of CSS to format text-based HTML elements.

• Understand the concept of internal and external style sheets in web design.
• Apply CSS rules to enhance the visual presentation of a webpage.

TOPIC EXPLANATION:
Cascading Style Sheets (CSS) are used to separate content from design in web
development. It provides an efficient way to apply styles to HTML elements, such as fonts,
colors, and layouts. By using CSS, developers can maintain consistency across multiple
web pages and enhance the user interface.

Steps and Code:

1. Create a CSS File (External Style Sheet): Save this file as style.css.

Code in CSS:

body {

font-family: Arial, sans-serif;

line-height: 1.6;

26 Tanishq Gupta
}

h1 {

color: navy;

text-align: center;

p{

font-size: 16px;

color: #333;

a{

color: green;

text-decoration: none;

a:hover {

text-decoration: underline;

2. Create an HTML File and Link the CSS File: Save this file as index.html.

Code in HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

27 Tanishq Gupta
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Styled Web Page</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Welcome to My Styled Page</h1>

<p>This is an example of how to use a CSS file to style your web page.</p>

<a href="#">Click here for more details</a>

</body>

</html>

OUTPUT:

When you open the HTML file in a browser, the text will appear styled as per the CSS rules
defined in style.css.

CONCLUSION:

Using CSS, we successfully formatted the webpage by applying styles to text elements like
headings, paragraphs, and links. This approach enhances the web page's presentation and
ensures consistency.

28 Tanishq Gupta