Extended Response Questions (ERQs) – HTML, CSS & JavaScript
Q5) Apply Border and Color to Table
To apply border and color to a table, we use Cascading Style Sheets (CSS). CSS allows us to
design the table and make it visually appealing. The 'border' property adds lines around the
table and cells, while 'background-color' adds color to the table's background. These styles
help make data easier to read and more organized. First, create a table using HTML tags like
<table>, <tr>, <th>, and <td>. Then, use CSS inside the <style> tag to add formatting. We can
also set padding and text alignment for a neat look.
Example Code:
<html>
<head>
<style>
table { border:2px solid black; background-color:lightblue; }
td, th { border:1px solid black; padding:10px; }
</style>
</head>
<body>
<table>
<tr><th>Name</th><th>Marks</th></tr>
<tr><td>Ali</td><td>85</td></tr>
<tr><td>Ayesha</td><td>90</td></tr>
</table>
</body>
</html>
Q6) Functionality of JavaScript in a Webpage
JavaScript is a scripting language that makes webpages interactive and dynamic. It allows us
to add functions that respond to user actions such as mouse clicks, typing, or hovering.
JavaScript can change the text, color, or structure of a webpage without reloading it. It can
also be used for animations, form validations, calculations, and more. Using the <script> tag,
JavaScript code can be written directly in an HTML page or linked externally. This makes
webpages more responsive and user-friendly.
Example Code:
<html>
<body>
<p id='msg'>Welcome!</p>
<button onclick='changeText()'>Click Me</button>
<script>
function changeText() {
[Link]('msg').innerHTML = 'You clicked the button!';
}
</script>
</body>
</html>
Q7) Create Scrolling Text on Webpage
Scrolling text can be created on a webpage using the <marquee> tag. This tag allows text to
move automatically in a specific direction, such as left, right, up, or down. It helps draw
attention to important messages or announcements. Although it is not recommended in
modern HTML5, it is still used for simple projects and learning purposes. You can control
the direction, speed, and behavior of the scrolling text using attributes like 'direction' and
'scrollamount'. This feature makes webpages more lively and engaging.
Example Code:
<html>
<body>
<marquee direction='left' scrollamount='5'>Welcome to My Website!</marquee>
</body>
</html>
Q8) Add a Video Clip that Auto Plays
Videos can be added to a webpage using the <video> tag in HTML5. It allows embedding
multimedia content directly into webpages without external plugins. The 'autoplay'
attribute is used to make the video start playing as soon as the webpage loads. The
'controls' attribute adds play, pause, and volume options for the user. You can also use 'loop'
to make the video play repeatedly. Adding videos makes a webpage more attractive,
interactive, and informative. Videos can be used for tutorials, advertisements, or
entertainment content.
Example Code:
<html>
<body>
<video width='400' autoplay controls>
<source src='video.mp4' type='video/mp4'>
</video>
</body>
</html>
Q9) Display Examination Result in Table
To display examination results neatly, an HTML table is used. Tables help organize data in
rows and columns, making it easy to read. The <table> tag creates the table, <tr> defines a
row, <th> defines a header cell, and <td> defines a data cell. CSS can be used to improve the
appearance by adding borders, background colors, and padding. This method is useful for
showing results, fee details, attendance records, or reports. Using tables makes information
structured and visually clear.
Example Code:
<html>
<body>
<h3>My Examination Result</h3>
<table border='1'>
<tr><th>Subject</th><th>Marks</th></tr>
<tr><td>English</td><td>85</td></tr>
<tr><td>Math</td><td>92</td></tr>
<tr><td>Science</td><td>88</td></tr>
</table>
</body>
</html>
Q10) Add a ‘Revert’ Button using JavaScript
A 'Revert' button in JavaScript can be used to undo changes made on a webpage. For
example, if a user changes the color or text of an element, clicking the Revert button can
bring it back to its original state. This is done using event-based JavaScript functions. The
'onclick' event runs the function when the button is clicked. By changing the CSS properties
or text content of an element using '[Link]()', we can control the
appearance of the webpage. This improves user experience by allowing flexibility and
control.
Example Code:
<html>
<body>
<p id='text'>Color and Index Example</p>
<button onclick='change()'>Change</button>
<button onclick='revert()'>Revert</button>
<script>
function change() {
[Link]('text').[Link] = 'red';
[Link]('text').innerHTML = 'Index: 2';
}
function revert() {
[Link]('text').[Link] = 'black';
[Link]('text').innerHTML = 'Index: 1';
}
</script>
</body>
</html>