Scribd
Upload
11 views

user interface design 23cse113

The document outlines the structure and content of a mid-term examination for the User Interface Design course at Amrita University, consisting of short, descriptive, and long answer questions. Topics covered include the World Wide Web, HTML, CSS, JavaScript, responsive web design, and web application development. The examination tests students' understanding of web technologies and their practical application in creating web pages and applications.

Uploaded by

jr.vijiofficial
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

user interface design 23cse113

The document outlines the structure and content of a mid-term examination for the User Interface Design course at Amrita University, consisting of short, descriptive, and long answer questions. Topics covered include the World Wide Web, HTML, CSS, JavaScript, responsive web design, and web application development. The examination tests students' understanding of web technologies and their practical application in creating web pages and applications.

Uploaded by

jr.vijiofficial
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Amrita University - Mid-Term Examination

Course: User Interface Design (23CSE113)


Duration: 2 Hours
Maximum Marks: 100

Part A - Short Answer Questions (2 marks each)


Answer ALL questions.

1. Define the World Wide Web and explain its basic working. (CO1)

2. What are the main components of a web application? (CO1)

3. Write any four basic HTML tags and their uses. (CO2)

4. What is the role of HTML5 in modern web development? (CO2)

5. Explain the concept of CSS classes and IDs. (CO3)

6. What are JavaScript event handlers? Provide an example. (CO3)

7. Define responsive web design and its importance. (CO3)

8. What is the difference between inline, internal, and external CSS? (CO3)

9. List the steps to design a simple web application. (CO4)

10. What is the importance of web hosting and deployment? (CO4)

Part B - Descriptive Questions (5 marks each)


Answer ANY SIX questions.

1. Describe the working of the Internet and the role of protocols. (CO1)

2. Write the HTML code for creating a simple web page with text, images, and links.
(CO2)

3. Explain HTML5 form controls and validation techniques. (CO2)

4. Discuss the CSS Box model with a neat diagram. (CO3)

5. How can CSS transitions and animations be used for interactive web pages? (CO3)

6. Write JavaScript code to create a dynamic button click event. (CO3)

7. Explain the process of designing and deploying a simple web application. (CO4)

8. How do media queries help in responsive web design? Provide examples. (CO4)
Part C - Long Answer Questions (10 marks each)
Answer ANY THREE questions.

1. Create a complete HTML page with proper text markup, tables, embedded media,
and forms. (CO2, CO4)

2. Describe the fundamentals of CSS and JavaScript with practical examples. (CO3)

3. Explain the process of developing and deploying a simple web application from
scratch. (CO4)

4. What are CSS transformations and transitions? Create a simple animation using CSS
and HTML. (CO3)

5. Discuss the importance of understanding the working of the World Wide Web and
protocols used in web design. (CO1)

ANSWERS

Part A - Short Answer Questions (2 marks each)


Answer ALL questions.

1. Define the World Wide Web and explain its basic working. (CO1)
Answer: World Wide Web (WWW):
The World Wide Web is a system of interlinked hypertext documents that can be accessed
via the Internet using a web browser. It allows users to view and navigate web pages, which
may contain text, images, videos, and other multimedia.

Basic Working of the WWW:

URL (Uniform Resource Locator): Every web page has a unique address (URL) that
helps locate it on the Internet.

HTTP/HTTPS Protocol: The browser sends a request to the web server using
Hypertext Transfer Protocol (HTTP or HTTPS).

Web Server Response: The server processes the request and sends back the HTML,
CSS, and JavaScript files.

Rendering the Webpage: The browser interprets these files to display the content on
the user’s screen.
Hyperlinks: Users can navigate between web pages using links, creating a seamless
browsing experience.

2. What are the main components of a web application? (CO1)


Answer: The main components of a web application are:

o Front-end: The user interface built with HTML, CSS, and JavaScript.

o Back-end: The server-side logic and database interactions.

o Database: Stores the application’s data.

3. Write any four basic HTML tags and their uses. (CO2)
Answer:

Four basic HTML tags and their uses:

Structure Tags:

1. <html>:
- Defines the root of an HTML document.
- All other HTML elements must be nested inside this tag.
- Example
<html>
<head></head>
<body></body>
</html>
2. <head>:
- Contains meta-information about the HTML document (like title, CSS, and JavaScript
links).
- Example
<head>
<title>My Web Page</title>
</head>
3. <body>:
- Contains the main content of the webpage, such as text, images, and links.
- Example
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph.</p>
</body>
4. <a>:
- Defines a hyperlink to navigate to another web page or resource.
- Example
<a href="https://example.com">Visit Example</a>

5. <title>:
- specifies the title of the web page (appears on the browser tab).

----------------------------------------------------------------------------------------------------------
✅ Text Formatting Tags:
5. <h1> to <h6>:

 Headings, where <h1> is the largest and <h6> is the smallest.

6. <p>:
o Defines a paragraph of text.
7. <br>:
o Inserts a line break (empty tag).
8. <hr>:
o Inserts a horizontal line (used to separate content).
9. <strong>:
o Makes text bold (semantically important).
10. <em>:
o Italicizes text (for emphasis).
11. <b>:
o Makes text bold (without semantic meaning).
12. <i>:
o Italicizes text (without semantic meaning).
13. <u>:
o Underlines text.

✅ Links and Media Tags:


14. <a>:
- Defines a hyperlink.
- href attribute specifies the link destination.

15. <img>:
o Embeds an image.
o src specifies the image path, alt provides alternate text.
16. <video>:
o Embeds a video file.
17. <audio>:
o Embeds an audio file.

✅ Lists:
18. <ul>:
- Creates an unordered (bulleted) list.
19. <ol>:
- Creates an ordered (numbered) list.
20. <li>:
- Defines a list item (used inside <ul> or <ol>).

✅ Tables:
21. <table>:
- Defines a table.
22. <tr>:
- Defines a table row.
23. <td>:
- Defines a table data cell.
24. <th>:
- Defines a table header cell.

✅ Forms:
25. <form>:
- Defines an HTML form for user input.
26. <input>:
- Defines an input field (text, password, checkbox, radio, etc.).
27. <textarea>:
- Defines a multi-line text input field.
28. <button>:
- Defines a clickable button.
29. <label>:
- Provides a label for form elements.

✅ Semantic Tags (HTML5):


30. <header>:
- Represents the header section of a page or section.
31. <footer>:
- Represents the footer section.
32. <nav>:
- Defines navigation links.
33. <article>:
- Represents an independent piece of content (e.g., blog post).
34. <section>:
- Defines a section of content.
35. <aside>:
- Represents content aside from the main content (e.g., sidebars).

✅ Other Important Tags:


36. <div>:
- Defines a container for grouping HTML elements (block-level).
37. <span>:
- Defines a container for inline text or elements (inline-level).
4. What is the role of HTML5 in modern web development? (CO2)
Answer: HTML5 makes web development more efficient, interactive, and user-friendly, while
enhancing performance and cross-browser compatibility

Semantic Structure:
 HTML5 introduces semantic tags like <header>, <footer>, <article>, and <section> to
create cleaner, more meaningful code.
 This improves SEO and accessibility.
Multimedia Support:
 Native support for audio and video using <audio> and <video> tags, eliminating the
need for third-party plugins like Flash.
Forms and Validation:
 New input types (e.g., email, tel, date) and attributes like required and pattern make
form validation simpler and more reliable.
Canvas and SVG:
 Enables drawing graphics, charts, and animations directly in the browser using
<canvas> and <svg>.
Responsive Design:
 Built-in support for responsive web design with media queries and flexible layouts.
Offline and Storage:
 HTML5 provides APIs like Web Storage (localStorage and sessionStorage) and Service
Workers for offline functionality.

5. Explain the concept of CSS classes and IDs. (CO3)


Answer:

o CSS classes (.) apply styles to multiple elements.

o CSS IDs (#) apply styles to a single, unique element on the page.

(or)

✅ CSS Classes and IDs:

1. CSS Classes:

o A class is a reusable style that can be applied to multiple HTML elements.

o Defined with a dot (.) in CSS.

<style>

.button {

background-color: blue;

color: white;
padding: 10px;

</style>

<button class="button">Click Me</button>

<button class="button">Submit</button>

- Here, both buttons share the same class styling.

2. CSS IDs:

 An ID is a unique identifier for a single HTML element.

 Defined with a hash (#) in CSS.

 Example

<style>

#header {

font-size: 24px;

color: green;

</style>

<h1 id="header">Welcome to My Page</h1>

- IDs are unique—an ID should only be used once per page.

✨ Key difference: Classes are reusable, IDs are unique!

6. What are JavaScript event handlers? Provide an example. (CO3)


Answer: JavaScript event handlers are functions that run in response to events (like
clicks or mouseovers). Example:

<button onclick="alert('Button clicked!')">Click Me</button>

7. Define responsive web design and its importance. (CO3)


Answer:

✅ Responsive Web Design (RWD):


Responsive web design is an approach to web development that ensures a website
looks and functions well on all devices—desktops, tablets, and smartphones—by
using flexible layouts, images, and CSS media queries.

👉 Key Concepts:

 Fluid Grids: Layouts that use percentages instead of fixed units like pixels.

 Flexible Images: Images that resize based on the screen width.

 Media Queries: CSS techniques that apply different styles based on device screen
size or resolution.

⭐ Importance of Responsive Web Design:

1. Improved User Experience:

o Ensures the website is easy to navigate and read, regardless of device size.

2. SEO Benefits:

o Google prioritizes mobile-friendly websites in search rankings.

3. Cost and Time Efficiency:

o One responsive site eliminates the need for separate mobile and desktop
versions.

4. Increased Reach:

o Attracts a wider audience by accommodating all screen sizes.

5. Future-Proofing:

o Adapts to new devices without requiring constant redesigns.

8. What is the difference between inline, internal, and external CSS? (CO3)
Answer:

✅ Difference between Inline, Internal, and External CSS:

Type of
Definition Syntax Example Pros Cons
CSS
- Hard to
CSS written - Quick to
maintain.
Inline directly within <h1 apply.
CSS an HTML style="color:blue;">Hello</h1> - No need - Not
reusable.
element using for
- Violates
Type of
Definition Syntax Example Pros Cons
CSS
the style external
separation of
attribute. files.
concerns.
- Not
CSS written - Styles reusable
inside a multiple across
Internal <style> tag html <style> h1 { color: blue; elements. multiple
CSS within the } </style> - No extra pages.
HTML <head> file - Increases
section. required. page load
time.
- Requires an
- Reusable
CSS written in a extra HTTP
across
separate .css request.
multiple
External file and linked html <link rel="stylesheet" - No styles if
href="styles.css"> pages.
CSS to the HTML the file is
- Cleaner
with a <link> missing or
HTML
tag. path is
structure.
wrong.

⭐ When to use:

 Use inline CSS for quick fixes.

 Use internal CSS for single-page styling.

 Use external CSS for larger projects to maintain consistency and performance.

9. List the steps to design a simple web application. (CO4)

Answer:

a. Design the front-end with HTML and CSS.

b. Add interactivity with JavaScript.

c. Set up the back-end server and database.

d. Deploy the application on a web server.

10. What is the importance of web hosting and deployment? (CO4)


Answer: Web hosting makes a website accessible online, and deployment involves
transferring web files to a server, ensuring the application runs smoothly for users.
Part B - Descriptive Questions (5 marks each)
Answer ANY SIX questions.

1. Describe the working of the Internet and the role of protocols. (CO1)

✅ Working of the Internet:


The Internet is a global network that connects millions of computers to share information
and resources. Let’s break it down!

1. Data Transmission:

o When you request a web page (e.g., by entering a URL), your browser sends a
request to a web server.

o The request travels through multiple networks, routers, and switches.

2. Client-Server Model:

o Your computer (the client) sends a request to a web server using the
HTTP/HTTPS protocol.

o The server processes the request and sends back the required data (HTML,
CSS, JavaScript).

3. Packets and Routing:

o Data sent over the Internet is broken into small packets.

o Each packet travels independently and may take different routes to reach the
destination.

o At the destination, the packets are reassembled to present the requested web
page or resource.

✅ Role of Internet Protocols:

1. Transmission Control Protocol (TCP):

o Ensures reliable, ordered, and error-checked delivery of data packets.

o Responsible for establishing a connection between the client and server.

2. Internet Protocol (IP):

o Handles addressing and routing of packets to ensure they reach the correct
destination.

o Every device on the Internet has a unique IP address.

3. Hypertext Transfer Protocol (HTTP/HTTPS):


o Used for transferring web pages from a web server to a web browser.

o HTTPS adds encryption for secure communication.

4. Domain Name System (DNS):

o Translates human-friendly domain names (e.g., google.com) into IP


addresses.

5. File Transfer Protocol (FTP):

o Used for transferring files between computers over the Internet.

✨ In short: The Internet works through the coordination of multiple protocols that ensure
fast, secure, and reliable communication between devices across the globe!

2. Write the HTML code for creating a simple web page with text, images, and links. (CO2)

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 0;

padding: 0;

h1 {

color: #4CAF50;

p{

font-size: 18px;

}
img {

max-width: 100%;

height: auto;

a{

color: #007BFF;

text-decoration: none;

a:hover {

text-decoration: underline;

</style>

</head>

<body>

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

<p>This is a simple web page created using HTML.</p>

<h2>About Me</h2>

<p>Hello! I am learning how to create websites with HTML, CSS, and JavaScript.</p>

<h2>My Favorite Image</h2>

<img src="https://via.placeholder.com/400" alt="Sample Image">

<p>This is a placeholder image displayed on my webpage.</p>

<h2>Useful Links</h2>

<p>Check out this amazing resource for learning web development:</p>

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>


<h2>Contact</h2>

<p>Email me at: <a href="mailto:[email protected]">[email protected]</a></p>

</body>

</html>

3. Explain HTML5 form controls and validation techniques. (CO2)


✅ HTML5 Form Controls and Validation Techniques:
✨ HTML5 Form Controls:
HTML5 introduced several new input types and attributes that make form creation
easier and more interactive. Let’s break them down!
1. Input Types:
o text: For single-line text input.
Example
<input type="text" placeholder="Enter your name">
o email: For email addresses (validates the format).
Example
<input type="email" required>
o number: For numerical input with optional min/max.
Example
<input type="number" min="1" max="100">
o date and datetime-local: For selecting dates and times.
Example
<input type="date">
o range: Slider control for selecting a value within a range.
Example
<input type="range" min="0" max="100">

✨ HTML5 Form Validation Techniques:


1. Required Attribute:
o Ensures a field is not left empty.
Example
<input type="text" required>
2. Pattern Attribute:
o Uses a regular expression to enforce input format.
Example
<input type="text" pattern="[A-Za-z]{3,}" title="Enter at least 3 letters.">
3. Min and Max Attributes:
o Sets boundaries for numerical or date inputs.
Example
<input type="number" min="10" max="100">
4. Step Attribute:
o Defines increments for number or range inputs.
Example
<input type="number" step="5">
5. Email and URL Validation:
o Automatically checks for valid email and URL formats.
Example
<input type="email" required>
<input type="url" required>

✅ Why HTML5 Validation is Important:


 Reduces the need for JavaScript-based validation.
 Provides instant feedback to users.
 Improves form usability and accessibility.
✨ In short: HTML5 form controls and validation techniques make web forms more
interactive, secure, and user-friendly!

4. Discuss the CSS Box model with a neat diagram. (CO3)

The CSS Box Model is a fundamental concept for layout design on the web. It
describes the rectangular boxes generated for elements on a webpage and consists
of four parts: content, padding, border, and margin. These parts define the space an
element occupies, and the overall size of an element is calculated by combining
them.

Here's a breakdown:

1. Content: The actual content of the element, such as text, images, etc.

2. Padding: The space between the content and the border. It clears space around the
content.

3. Border: A border surrounding the padding (if set). It can be styled with width, color,
and type (e.g., solid, dashed).

4. Margin: The outermost space that clears space between this element and other
elements.

The total width and height of an element are calculated like this:

 Width = content width + padding-left + padding-right + border-left + border-right +


margin-left + margin-right

 Height = content height + padding-top + padding-bottom + border-top + border-


bottom + margin-top + margin-bottom
5. How can CSS transitions and animations be used for interactive web pages? (CO3)

CSS Transitions and Animations for Interactive Web Pages

CSS transitions and animations are powerful tools for creating engaging and
interactive web pages. They enable changes in the appearance of elements to occur
smoothly, improving user experience. Here's how they can be used:

1. CSS Transitions

A CSS transition allows you to change property values smoothly over a specified
duration when an event occurs (such as hovering over an element).

 Example Use: A common example is changing the background color of a button


when a user hovers over it. The change in color will happen gradually instead of
instantly.

button {

background-color: blue;

transition: background-color 0.3s ease;

}
button:hover {

background-color: red;

 How it works:

o transition: Defines which property to transition, the duration, and easing


function.

o On hovering over the button (button:hover), the background color will change
from blue to red over 0.3 seconds.

 Interactive Experience: Users get visual feedback, which makes the page feel more
responsive and interactive.

2. CSS Animations

CSS animations allow more complex and multi-step changes, letting elements move,
transform, or change in a sequence. They use keyframes to define the stages of the
animation.

 Example Use: You can animate an element's position to make it "bounce" or move in
and out of the screen.

@keyframes bounce {

0% { transform: translateY(0); }

50% { transform: translateY(-20px); }

100% { transform: translateY(0); }

.element {

animation: bounce 1s ease infinite;

 How it works:

o @keyframes bounce: Defines the stages of the animation, where the element
moves up and down.
o animation: Specifies which animation to apply (bounce), the duration (1s),
easing function (ease), and whether it should repeat infinitely.

 Interactive Experience: Animations draw the user's attention to certain elements,


making the page feel lively. For example, a button might animate when clicked to
show confirmation or indicate an action.

3. Combining Transitions and Animations for Interactivity

You can combine both transitions and animations to create highly interactive, visually
appealing pages. For example, a navigation menu could slide in from the side when
the user hovers over a menu icon, and the items could animate into view with a
transition effect.

.menu {

transform: translateX(-100%);

transition: transform 0.5s ease;

.menu:hover {

transform: translateX(0);

.menu-item {

opacity: 0;

animation: fadeIn 0.5s forwards;

@keyframes fadeIn {

0% { opacity: 0; }

100% { opacity: 1; }

4. Enhancing User Interactions


By using CSS transitions and animations, you can:

 Provide Feedback: Elements change smoothly in response to user actions like


hovering, clicking, or focusing (e.g., form field highlights).

 Guide User Focus: Animations can direct attention to specific elements, like buttons
or notifications.

 Improve Visual Appeal: Subtle animations or transitions make pages more dynamic
without overwhelming the user.

Conclusion

CSS transitions and animations improve the interactivity and visual appeal of web
pages by providing smooth and engaging effects. They enhance user experience by
giving responsive feedback, guiding attention, and adding creativity without relying
on JavaScript or other libraries.

6. Write JavaScript code to create a dynamic button click event. (CO3)

JavaScript Code for Dynamic Button Click Event


In this example, we will create a dynamic button that changes its text and background
color when clicked. The JavaScript code listens for a click event and dynamically
updates the button’s content and style.
HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Dynamic Button Click</title>
<style>
/* Initial Button Style */
#dynamicButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
/* Style for clicked button */
.clicked {
background-color: #FF5733;
color: white;
}
</style>
</head>
<body>

<button id="dynamicButton">Click Me!</button>

<script>
// JavaScript to handle the click event

document.getElementById("dynamicButton").addEventListener("click
", function() {
// Change button text
this.textContent = "Clicked!";

// Add class to change button style


this.classList.add("clicked");

// Disable the button after being clicked (optional)


this.disabled = true;
});
</script>

</body>
</html>
Explanation:
1. HTML:
o A simple button element with the ID dynamicButton is created.
2. CSS:
o We style the button with basic padding, font size, and
background color.
o The .clicked class changes the button's background and text color
after it's clicked.
3. JavaScript:
o The addEventListener method listens for the click event on the
button.
o When the button is clicked:
 Text content is changed from "Click Me!" to "Clicked!".
 The button's style is dynamically updated by adding the
clicked class, which alters its background and text color.
 The button is optionally disabled after the click to prevent
further interaction.
Outcome:
 When you click the button, its text changes to "Clicked!" and its
background color turns to a new color. The button is also disabled,
making it unclickable afterward.

7. Explain the process of designing and deploying a simple web application. (CO4)

1. Planning and Design (Initial Phase)

A. Identify Requirements

 Functionality: Determine the main features and goals of the web application (e.g.,
user login, form submission, data display).

 User Experience (UX): Plan how users will interact with the app. Design a simple and
intuitive layout for ease of navigation.

B. Wireframing and UI Design

 Wireframes: Sketch the layout of the application, focusing on the positioning of


elements (buttons, forms, navigation menus).

 UI Design: Create mockups or UI designs using tools like Figma or Adobe XD,
choosing color schemes, fonts, and interactive elements.

2. Development Phase (Building the Web App)

A. Front-end Development

 HTML: Structure the content of the web pages (headings, paragraphs, forms,
images).

 CSS: Style the page for visual appeal, layout, and responsiveness (ensuring the app
looks good on all devices).

 JavaScript: Add interactivity to the page, such as form validation, dynamic content
changes, and event handling (e.g., button clicks).

B. Back-end Development (Optional for Dynamic Apps)


 Server-side Programming: If the app requires dynamic content (like database
access), use a back-end language (Node.js, Python, PHP) to handle requests.

 Database: Set up a database (e.g., MySQL, MongoDB) to store and retrieve data if
needed (e.g., user data, messages, posts).

C. Testing

 Functional Testing: Ensure that all features work as expected (buttons, forms, data
retrieval).

 Cross-browser Testing: Check that the application works across different browsers
(Chrome, Firefox, Edge).

 Responsive Testing: Test on various screen sizes to ensure the app is mobile-friendly.

3. Deployment Phase (Making the App Live)

A. Hosting Setup

 Choose a web hosting provider (e.g., Netlify, Vercel, GitHub Pages for static sites, or
Heroku, DigitalOcean, AWS for dynamic applications).

 Set up an account and configure your hosting environment (server, databases,


domain name).

B. Upload and Deploy

 For Static Sites (HTML, CSS, JavaScript only):

o Upload your files directly to the hosting platform via the web interface or
using a Git-based deployment process (e.g., GitHub → Netlify).

 For Dynamic Sites (includes back-end):

o Push your code to a Git repository (e.g., GitHub).

o Link the repository to the hosting service (e.g., Heroku, Vercel).

o Configure environment variables (e.g., database connections) if required.

C. Domain Configuration

 Custom Domain: Purchase a custom domain (e.g., from GoDaddy, Namecheap) and
link it to your hosting service.

 Update DNS records to point to your hosted application.


4. Final Testing and Maintenance

 Test Deployment: After deployment, test the live version of the web app to ensure
everything works as expected.

 Monitoring: Set up monitoring (e.g., Google Analytics, error tracking tools like
Sentry) to track the app's performance and user interactions.

 Regular Updates: Maintain the app by adding new features, fixing bugs, and ensuring
the application is secure and up-to-date.

Summary:

The process of designing and deploying a simple web application involves:

1. Planning and Design: Define the app’s functionality and create wireframes/UI
designs.

2. Development: Build the front-end (HTML, CSS, JavaScript) and back-end (if needed),
followed by testing.

3. Deployment: Choose a hosting platform, upload your files or connect your back-end
code, configure your domain, and make the app live.

4. Final Testing and Maintenance: Ensure everything works on the live site, and
regularly maintain the app for updates or issues.

By following these steps, you can successfully design and deploy a simple web
application that functions smoothly for users.

8. How do media queries help in responsive web design? Provide examples. (CO4)

Media Queries in Responsive Web Design


Media queries are a key feature of CSS that enable web pages to adapt to different
screen sizes and devices. They allow developers to apply specific styles based on
conditions like screen width, height, orientation, resolution, and user preferences.
How Media Queries Work
Media queries follow this structure:
@media (condition) {
/* CSS rules apply when the condition is met */
}
For example, to apply styles when the screen width is 600px or smaller:
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
Examples of Media Queries
1. Responsive Typography
Adjusts text size for different screen widths:
@media (max-width: 768px) {
h1 {
font-size: 20px;
}
}
@media (min-width: 769px) {
h1 {
font-size: 32px;
}
}
2. Layout Adjustments Using CSS Flexbox/Grid
Switches from a multi-column layout to a single-column layout on small screens:
@media (max-width: 768px) {
.container {
display: block;
}
}
@media (min-width: 769px) {
.container {
display: flex;
}
}
3. Hiding Elements on Small Screens
Hides the sidebar for better mobile usability:
@media (max-width: 800px) {
.sidebar {
display: none;
}
}
4. Enhancing User Experience with Dark Mode
Uses media queries to detect user preferences:
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
5. Image Scaling for Different Devices
Ensures images scale properly:
@media (max-width: 600px) {
img {
width: 100%;
height: auto;
}
}
Conclusion
Media queries help create flexible, responsive designs that enhance user
experience on various devices. They are a fundamental part of CSS, layout
design, and typography, making them essential in modern web development.

Part C - Long Answer Questions (10 marks each)


Answer ANY THREE questions.

1. Create a complete HTML page with proper text markup, tables, embedded media, and
forms. (CO2, CO4)

Here's a complete HTML page that includes:


✅ Text Markup (Headings, Paragraphs, Lists)
✅ Tables
✅ Embedded Media (Image, Video)
✅ Forms (User Input, Selection, Buttons)

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Complete HTML Page</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;
padding: 20px;

background-color: #f9f9f9;

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

table, th, td {

border: 1px solid black;

padding: 10px;

text-align: center;

form {

margin-top: 20px;

</style>

</head>

<body>

<!-- Text Markup -->

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

<p>This is a sample webpage demonstrating text markup, tables, embedded


media, and forms.</p>

<h2>About This Page</h2>

<p>This page is structured using proper HTML elements to ensure good readability
and organization.</p>

<!-- Table Markup -->


<h2>Sample Data Table</h2>

<table>

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>Alice</td>

<td>25</td>

<td>USA</td>

</tr>

<tr>

<td>Bob</td>

<td>30</td>

<td>UK</td>

</tr>

</table>

<!-- Embedded Media -->

<h2>Embedded Media</h2>

<img src="https://via.placeholder.com/400" alt="Sample Image">

<p>Here is an embedded video:</p>

<video width="400" controls>

<source src="sample-video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>
<!-- Web-Based Form -->

<h2>Contact Us</h2>

<form action="#" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label><br>

<textarea id="message" name="message" rows="4"


cols="30"></textarea><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Key Features of This HTML Page

✔ Text Markup: Headings, paragraphs, and structured content


✔ Table: Displays structured data
✔ Embedded Media: An image and a video
✔ Form: Collects user input with validation

2. Describe the fundamentals of CSS and JavaScript with practical examples. (CO3)
CSS (Cascading Style Sheets) Fundamentals
CSS is used to style and format HTML elements, enhancing the visual appeal of a
webpage.
1. CSS Syntax
CSS follows this basic structure:
selector {
property: value;
}
Example:
p{
color: blue;
font-size: 16px;
}
his styles all <p> elements with blue text and a font size of 16px.
2. Types of CSS
a. Inline CSS: Applied directly within an HTML tag

<p style="color: red;">This is inline CSS.</p>

b. Internal CSS: Defined within a <style> tag inside the <head> section

<style>

h1 { color: green; }

</style>

c. External CSS: Stored in a separate .css file and linked using <link>.

body {

background-color: lightgray;

font-family: Arial, sans-serif;

h1 {

color: blue;

text-align: center;

button {

background-color: green;

color: white;

padding: 10px;

border: none;
}

JavaScript Fundamentals

JavaScript is a scripting language used to make web pages interactive.

1. JavaScript Syntax

JavaScript statements are written inside <script> tags in an HTML file or in an external .js
file.

Example:

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

2. JavaScript Example: Alert Message

<button onclick="showAlert()">Click Me</button>

<script>

function showAlert() {

alert("Hello! This is a JavaScript alert.");

</script>

When the button is clicked, an alert box appears.

3. JavaScript Example: Changing CSS Dynamically

<p id="text">This is a paragraph.</p>

<button onclick="changeColor()">Change Color</button>

<script>

function changeColor() {

document.getElementById("text").style.color = "red";

</script>
When the button is clicked, the paragraph turns red.

Conclusion

✅ CSS is used for presentation and styling (colors, layouts, fonts).


✅ JavaScript is used for interactivity (events, dynamic updates).
✅ Together, they make websites visually appealing and interactive.

3. Explain the process of developing and deploying a simple web application from
scratch. (CO4)

Developing and Deploying a Simple Web Application from Scratch

Creating a web application involves several steps, from planning and development to
deployment. Below is a structured approach to developing and deploying a simple
web application.

Step 1: Planning the Web Application

Before writing code, decide on:


✅ The purpose of the web app (e.g., a contact form, blog, or to-do list).
✅ The technology stack (HTML, CSS, JavaScript, and a backend if needed).
✅ A simple wireframe or design layout.

Step 2: Setting Up the Development Environment

1. Install a code editor like VS Code or Sublime Text.

2. Set up a project folder (e.g., mywebapp/).

3. Install a local web server (optional for backend apps).

Step 3: Writing the Code

1. Creating the Frontend (HTML, CSS, JavaScript)

 HTML (Structure)

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

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

<title>Simple Web App</title>

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

</head>

<body>

<h1>Welcome to My Web App</h1>

<p id="message">Click the button to see a message.</p>

<button onclick="showMessage()">Click Me</button>

<script src="script.js"></script>

</body>

</html>

CSS (Styling)

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f2f2f2;

button {

background-color: blue;

color: white;

padding: 10px;

border: none;

JavaScript (Interactivity

function showMessage() {
document.getElementById("message").innerText = "Hello! This is a simple web
app.";

Step 4: Adding a Backend (Optional)

If the app needs data storage, a backend can be created using Node.js and
Express.js:

Step 5: Testing the Web App

✅ Open index.html in a browser.


✅ Test the JavaScript function.
✅ Use Developer Tools (F12) for debugging.

Step 6: Deploying the Web App

1. Hosting on GitHub Pages (Frontend Only)

1. Create a GitHub repository and upload your files.

2. Go to Settings → Pages → Select branch (main) → Save.

3. Your site is live at https://your-username.github.io/your-repository/.

2. Hosting with Netlify/Vercel (Easier Deployment)

 Upload the project or link your GitHub repository.

3. Deploying a Backend (Heroku, Render, or Firebase)

 Use Heroku or Render for Node.js apps.

 Deploy using git push heroku main.

Step 7: Maintaining and Updating the Web App

✅ Monitor performance and errors.


✅ Update code and redeploy when needed.
✅ Add features based on user feedback.

Conclusion

🚀 Developing a web app involves writing HTML, CSS, JavaScript, and optionally a
backend.
🌍 Deploying can be done using GitHub Pages, Netlify, or Heroku.
🔄 Testing and updates ensure long-term functionality.

4. What are CSS transformations and transitions? Create a simple animation using CSS
and HTML. (CO3)

CSS Transformations and Transitions

1. CSS Transformations

CSS transformations allow elements to be rotated, scaled, skewed, or translated


without affecting other elements on the page.

Example of Transformations

.box {

width: 100px;

height: 100px;

background-color: blue;

transform: rotate(45deg); /* Rotates the box */

Other transformation functions:

 scale(1.5) → Enlarges an element by 1.5 times.

 translateX(50px) → Moves an element 50px to the right.

 skew(20deg, 10deg) → Skews an element.

2. CSS Transitions
CSS transitions enable smooth animations between changes in CSS properties.
Example of a Transition

.box {

width: 100px;

height: 100px;

background-color: red;
transition: background-color 0.5s ease-in-out;

.box:hover {

background-color: green; /* Changes color smoothly when hovered */

Other transition properties:

 transition: all 1s ease; → Applies to all properties.

 transition-delay: 0.3s; → Adds a delay before transition starts.

3. Simple CSS Animation Example


The following example creates an animated bouncing box using transformations and
transitions:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: relative;
animation: bounce 2s infinite ease-in-out;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>
Explanation of the Animation
✅ @keyframes bounce defines the movement of the ball.
✅ translateY(-100px) makes the ball move up and down.
✅ The animation property makes it run infinitely.

Conclusion
🚀 CSS Transformations modify element appearance (rotate, scale, move).
🎨 CSS Transitions create smooth visual effects.
💡 CSS Animations use @keyframes for dynamic movements.

5. Discuss the importance of understanding the working of the World Wide Web and
protocols used in web design. (CO1)

Importance of Understanding the Working of the World Wide Web and Protocols in Web
Design

1. Introduction to the World Wide Web (WWW)

The World Wide Web (WWW) is a system of interlinked web pages accessed through the
Internet. It consists of:
✅ Websites hosted on servers
✅ Web browsers (Chrome, Firefox) to access web pages
✅ Protocols (HTTP, HTTPS) to transfer data

Understanding how the web works helps developers create efficient, secure, and user-
friendly websites.

2. How the Web Works

1. A user enters a URL (e.g., https://example.com) in the browser.

2. The browser sends an HTTP/HTTPS request to the web server.

3. The web server processes the request and retrieves the web page.

4. The server sends the HTML, CSS, and JavaScript files to the browser.

5. The browser renders the web page for the user.


3. Importance of Web Protocols in Web Design

Web protocols define how data is transferred between users and web servers. The most
important ones include:

A. HTTP (HyperText Transfer Protocol)

✅ Defines rules for requesting and delivering web pages.


✅ Uses methods like GET, POST, PUT, and DELETE.
✅ Example:

html

CopyEdit

<form action="https://example.com/login" method="POST">

<input type="text" name="username">

<input type="password" name="password">

<button type="submit">Login</button>

</form>

This form sends user data using HTTP POST.

B. HTTPS (Secure HTTP)

✅ Encrypts data using SSL/TLS for security.


✅ Prevents hacking and ensures data privacy.
✅ Essential for e-commerce, banking, and user authentication.

C. FTP (File Transfer Protocol)

✅ Used for uploading/downloading files to a web server.


✅ Example: Developers use FTP clients (FileZilla) to upload website files.

D. DNS (Domain Name System)

✅ Converts domain names (example.com) into IP addresses.


✅ Without DNS, users would need to remember IP addresses instead of domain names.

E. TCP/IP (Transmission Control Protocol/Internet Protocol)

✅ Ensures data is transmitted accurately over the Internet.


✅ Divides data into packets and reassembles them on the receiving end.
4. Why Web Designers Should Understand These Concepts

✅ Optimized Performance: Choosing the right protocols improves page load time.
✅ Security: Using HTTPS and secure authentication prevents attacks.
✅ Cross-Browser Compatibility: Ensures websites work on all devices.
✅ SEO Benefits: Google ranks secure (HTTPS) and fast websites higher.
✅ Better Debugging: Understanding requests, responses, and errors helps in fixing issues.

5. Conclusion

🌍 The WWW is a network of interconnected web pages, requiring protocols for smooth
functioning.
📡 Protocols like HTTP, HTTPS, DNS, and FTP are essential for communication and security.
💡 Understanding how the web works helps developers build fast, secure, and reliable
websites.

You might also like