Web Development – Solved Important Questions (Unit 1 &
2)
1. Explain the HTML5 tags associated with text, markups, images, lists,
tables, progress, media, forms and frames.
HTML5 provides many tags for structuring web pages.
• Text Tags: <h1> to <h6>, <p>, <br>, <strong>, <em>
• Markup Tags: <mark>, <small>, <del>, <ins>
• Image Tag: <img src='[Link]' alt='image'>
• Lists: <ul>, <ol>, <li>
• Tables: <table>, <tr>, <th>, <td>
• Progress Tag: <progress value='70' max='100'></progress>
• Media Tags: <audio>, <video>
• Forms: <form>, <input>, <textarea>, <button>, <select>
• Frames/Iframes: <iframe src='[Link]'></iframe>
These tags help in creating structured, multimedia-rich and interactive web pages.
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 – Medium for communication
Working:
1. Client sends HTTP request
2. Server processes request
3. Server sends response
4. Browser displays output
Diagram:
Client (Browser) ---> Request ---> Server
Client (Browser) <--- Response <--- Server
Advantages:
• Centralized management
• Easy maintenance
• Supports multiple users
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>
<input type='submit' value='Register'>
</form>
</body>
</html>
4. Explain multimedia elements.
HTML5 multimedia elements are used to display audio, video and graphics.
• <audio> – Plays audio files
• <video> – Plays video files
• <source> – Specifies media source
• <canvas> – Draws graphics using JavaScript
• <svg> – Creates scalable vector graphics
Example:
<audio controls>
<source src='song.mp3'>
</audio>
<video controls width='300'>
<source src='movie.mp4'>
</video>
Advantages:
• No need for external plugins
• Better multimedia support
• Interactive graphics
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
• Faster for complex graphics
• Best for games and animations
SVG remembers objects while Canvas redraws graphics using JavaScript.
6. Explain HTML5 APIs (Geolocation, Web Storage, Web Worker).
1. Geolocation API:
Used to get user location.
Example:
[Link]()
2. Web Storage API:
Used to store data in browser.
Types:
• localStorage – permanent storage
• sessionStorage – temporary storage
3. Web Worker:
Runs JavaScript in background without freezing webpage.
Advantages:
• Improves performance
• Enables advanced web applications
7. What are Offline Web Applications? Write advantages and
disadvantages.
Offline web applications work without internet connection using browser storage and cache.
Advantages:
• Faster loading
• Works without internet
• Better user experience
Disadvantages:
• Limited storage
• Synchronization issues
• Browser compatibility problems
8. Explain different protocols and their differences.
HTTP – Transfers web pages
HTTPS – Secure version of HTTP
FTP – Transfers files
SMTP – Sends emails
PPP – Direct communication between devices
Difference:
• HTTP is not secure while HTTPS uses SSL/TLS encryption.
• FTP is used for file transfer.
• SMTP is used for email communication.
9. Difference between Local Storage and Session Storage.
Local Storage:
• Permanent storage
• Shared across tabs
• Large storage capacity
Session Storage:
• Temporary storage
• Deleted when tab closes
• Limited to current tab
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;
}
11. What is responsive web design? Why is it important?
Responsive web design makes webpages adapt to different screen sizes using flexible layouts and media queri
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 selector and property used.
CSS Rule:
h1{
background-color: blue;
}
Explanation:
• h1 is the element selector.
• background-color is the CSS property.
• blue is the property value.
13. What is Bootstrap? Mention two benefits of using it in web
development.
Bootstrap is a popular CSS framework used for responsive and mobile-first web development.
Benefits:
1. Faster development using ready-made components
2. Responsive design support
Features:
• Grid system
• Buttons, forms and navigation components
• Cross-browser compatibility
14. Describe how you would implement a mobile-first design using CSS.
Mobile-first design starts designing for small screens first and then adds styles for larger screens.
Steps:
1. Write base CSS for mobile devices
2. Use media queries for tablets and desktops
3. Use flexible layouts and images
Example:
body{
font-size:14px;
}
@media(min-width:768px){
body{
font-size:18px;
}
}
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 according to screen size.
• Prevents overflow on small devices.