Web Development – Complete Solved Answers
1. Explain the HTML5 tags associated with text, markups, images, lists,
tables, progress, media tags-audio and video, forms and frames.
HTML5 provides many tags for creating structured and interactive webpages.
1. Text Tags
<h1> to <h6> : Define headings
<p> : Defines paragraph
<br> : Inserts line break
<strong> : Important bold text
<em> : Emphasized text
2. Markup Tags
<mark> : Highlights text
<small> : Displays smaller text
<del> : Deleted text
<ins> : Inserted text
3. Image Tag
<img src="[Link]" alt="image">
4. Lists
<ul> : Unordered list
<ol> : Ordered list
<li> : List item
5. Tables
<table>, <tr>, <th>, <td>
6. Progress Tag
<progress value="70" max="100"></progress>
7. Media Tags
<audio> : Plays audio
<video> : Plays video
8. Form Tags
<form>, <input>, <textarea>, <button>, <select>
9. Frames
<iframe src="[Link]"></iframe>
These tags help create multimedia-rich webpages.
2. Explain client-server architecture with diagram.
Client-server architecture is a network model where the client requests services and the server provides re
Components:
1. Client – Browser or user device
2. Server – Stores and processes data
3. Network – Connects client and server
Working:
1. Client sends HTTP request
2. Server processes request
3. Server sends HTTP response
4. Browser displays webpage
Diagram:
Client (Browser) ---> Request ---> Server
Client (Browser) <--- Response <--- Server
Advantages:
• Centralized control
• Easier maintenance
• Supports multiple users
• Better scalability
3. Create Student Registration Form.
<html>
<body>
<h2>Student Registration Form</h2>
<form>
Name:
<input type="text"><br><br>
Email:
<input type="email"><br><br>
Password:
<input type="password"><br><br>
Gender:
<input type="radio" name="g"> Male
<input type="radio" name="g"> Female<br><br>
Hobbies:
<input type="checkbox"> Reading
<input type="checkbox"> Sports<br><br>
Country:
<select>
<option>India</option>
<option>USA</option>
</select><br><br>
Address:
<textarea rows="4" cols="30"></textarea><br><br>
<input type="submit" value="Register">
<input type="reset" value="Reset">
</form>
</body>
</html>
4. Explain multimedia elements.
HTML5 multimedia elements are used to display audio, video and graphics.
1. Audio Element
<audio controls>
<source src="song.mp3">
</audio>
2. Video Element
<video width="300" controls>
<source src="movie.mp4">
</video>
3. Canvas Element
Used for drawing graphics using JavaScript.
4. SVG Element
Used for scalable vector graphics.
Advantages:
• No external plugins required
• Better multimedia support
• Interactive user experience
5. Difference between Canvas and SVG for graphics.
SVG:
• Vector based
• Resolution independent
• Supports event handlers
• Best for icons and diagrams
Canvas:
• Pixel based
• Resolution dependent
• Uses JavaScript
• Best for games and animations
Difference:
SVG remembers objects while Canvas redraws graphics every time.
6. Explain HTML5 APIs (Geolocation, Web Storage, Web Worker).
1. Geolocation API
Used to get user location.
Example:
[Link]();
Uses:
• Maps
• Delivery apps
• Ride booking apps
2. Web Storage API
Used to store data in browser.
Types:
• localStorage – Permanent storage
• sessionStorage – Temporary storage
Example:
[Link]("name","John");
3. Web Worker API
Runs JavaScript in background without freezing webpage.
Advantages:
• Better performance
• Smooth UI
• Faster processing
7. What are Offline Web Applications? Write advantages and
disadvantages.
Offline web applications work without internet using browser cache and storage.
Advantages:
• Faster loading
• Works without internet
• Better user experience
Disadvantages:
• Limited storage
• Synchronization issues
• Browser compatibility problems
8. Explain different protocols and their difference.
HTTP:
Transfers web pages over internet.
HTTPS:
Secure version of HTTP using SSL/TLS.
FTP:
Used for file transfer.
SMTP:
Used for sending emails.
PPP:
Used for direct communication between devices.
Difference:
• HTTP is not secure while HTTPS is secure.
• FTP transfers files.
• SMTP handles emails.
9. Difference between Local Storage and Session Storage.
Local Storage:
• Permanent storage
• Shared across tabs
• Data remains until manually deleted
Session Storage:
• Temporary storage
• Limited to current tab
• Deleted when tab closes
Both store data as key-value pairs.
10. What are CSS3 properties? List any five properties with their use.
CSS3 properties are used to style HTML elements.
1. color – Changes text color
2. background-color – Changes background color
3. font-size – Sets text size
4. margin – Sets outer spacing
5. padding – Sets inner spacing
Example:
p{
color:red;
font-size:18px;
margin:10px;
padding:5px;
}
11. What is responsive web design? Why is it important?
Responsive web design makes webpages adapt to different screen sizes.
Importance:
• Mobile-friendly websites
• Better user experience
• Improved SEO
• Works on all devices
Techniques:
• Flexible grids
• Flexible images
• Media queries
12. Write a CSS rule to change the background color of all elements to blue.
Explain the selector and property used.
CSS Rule:
h1{
background-color: blue;
}
Explanation:
• h1 is an element selector.
• background-color is the CSS property.
• blue is the value.
13. What is Bootstrap? Mention two benefits of using it in web
development.
Bootstrap is a CSS framework for responsive web development.
Features:
• Grid system
• Responsive layouts
• Ready-made components
Benefits:
1. Faster development
2. Responsive design support
Other advantages:
• Cross-browser compatibility
• Easy customization
14. Describe how you would implement a mobile-first design using CSS.
Mobile-first design means designing webpages for mobile devices first.
Steps:
1. Create layout for mobile screens
2. Use flexible images
3. Add media queries for larger screens
Example:
body{
font-size:14px;
}
@media(min-width:768px){
body{
font-size:18px;
}
}
Advantages:
• Better mobile experience
• Faster loading
15. Show the effect of flexible images with an example HTML and CSS code
snippet.
HTML:
<img src="[Link]" class="responsive">
CSS:
.responsive{
max-width:100%;
height:auto;
}
Effect:
• Image resizes automatically
• Prevents overflow
• Maintains aspect ratio