PART 2 - HTML Interview Questions and Expert Answers 2024: Cracking the Code to Land Your Job!
PART 2 - HTML Interview Questions and Answers 2023
Hope you have gone through the Part - 1 set of Questions which I have posted earlier. If not Please finish that and come back for this part to cover from the basic questions. I believe this would help to refresh the important concepts during your preparation.
26. How can you create an HTML link that sends an email when clicked?
<a href="mailto:contact@example.com">Send Email</a>
Output:
Send Email
27. How can you add an audio file to a web page?
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Output:
28. How can you embed a video in a web page?
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Output:
29. How can you create a hyperlink that jumps to a specific section of the same page?
<a href="#section2">Jump to Section 2</a>
<section id="section2">
<p>I am section 2</p><!-- Content of section 2 -->
</section>
Output:
Jump to Section 2
I am section 2
30. How to draw Grpahics in HTML?
Graphics defined by SVG(Scalable Vector Graphics) is in XML format. You can create simple SVG with code like below:
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
Output:
31. How can you create a form with multiple input fields?
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Submit">
</form>
Output:
32. How can you create a hyperlink that downloads a file when clicked?
<a href="myfile.pdf" download>Download PDF</a>
Output:
Download PDF
33. How to embed Youtube videos in your web page?
You can define an iframe element in to embed youtube video in your web page and also you can Use the width and height attributes to specify the dimension of the player
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
</iframe>
Output:
34. How can you add a tooltip to an element in HTML?
A tooltip is often used to specify extra information about an element or something. Tooltip that appears when the user moves the mouse over an element.
You can use the title attribute to add a tooltip to an element. Example:
<a href="#" title="Click me for more info">Learn More</a>
Output:
Learn More
35. How can you add a background image to an element in HTML?
You can use CSS to add a background image. Example:
<div class="background-image"></div>
css:
.background-image {
background-image: url('image.jpg');
background-size: cover;
width: 100px;
height: 100px;
}
Output:
36. How can you create a responsive image that adjusts its size based on the screen width?
Use CSS with the max-width property:
<img src="image.jpg" alt="Responsive Image" style="max-width: 100%;">
Output:
37. How can you create a navigation bar (navbar) using an unordered list?
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Output:
38. How can you create a horizontal rule (line) in HTML?
<hr>
Output:
39. How can you create a clickable image in HTML?
<a href="https://www.example.com">
<img src="image.jpg" alt="Clickable Image">
</a>
Output:
40. How can you add a comment that can be seen by users with disabilities?
Use the '<!-- -->' comment syntax, as screen readers will read it aloud:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page </title>
</head>
<body>
<!-- This is a comment. It will not be displayed in the browser output.
But screen readers will read it -->
<h1>Hello, World!</h1>
</body>
</html>
41. How can you set the max numbers of characters allowed in the input field?
<input type="text" maxlength="10">
Output:
You can type only 10 character input not more than that as maxlength value is 10.
42. How can you add a video that autoplays when the page loads?
<video width="320" height="240" autoplay>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
43. How can you create a responsive design using media queries?
<link rel="stylesheet" media="screen and (max-width: 600px)" href="styles-mobile.css">
<link rel="stylesheet" media="screen and (min-width: 601px)" href="styles-desktop.css">
44. How can you add a clickable telephone link for mobile users?
<a href="tel:+1234567890">Call Us</a>
Output:
Call Us
45. How can you create a button that submits a form?
<button type="submit">Submit Form</button>
Output:
46. How can you add a favicon to a web page?
Place a favicon.ico file in the root directory of your website and add the following code in the <head> section:
<link rel="icon" href="favicon.ico" type="image/x-icon">
The Favicon image format can be png or svg too.
47. How can you create a responsive navigation menu that collapses into a dropdown on small screens?
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
@media (max-width: 768px) {
.menu {
display: none;
}
.menu.active {
display: block;
}
}
JAVASCRIPT:
document.querySelector('.menu').addEventListener('click', () => {
document.querySelector('.menu').classList.toggle('active');
});
Output:
48. How can you create a hyperlink that opens an email client with a pre-filled subject and body?
<a href="mailto:contact@example.com?subject=Hello&body=I%20have%20a%20question">Email Us</a>
Output:
Email Us
49. How can you create a responsive two-column layout using CSS Flexbox?
<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
</div>
CSS:
.container {
display: flex;
}
.column {
flex: 1;
padding: 10px;
}
50. How can you create an HTML element that is hidden initially and becomes visible when clicked?
HTML:
<button id="toggleButton">Toggle Content</button>
<div id="hiddenContent" style="display: none;">This content is hidden.</div>
JAVASCRIPT:
document.getElementById('toggleButton').addEventListener('click', () => {
const hiddenContent = document.getElementById('hiddenContent');
hiddenContent.style.display = hiddenContent.style.display === 'none' ? 'block' : 'none';
});
Next set of Questions are on the way! Keep Reading and Supporting!!
Some of the examples you have to try on your own as it needs to be structured with the proper completion of a script and tags. For image, audio and video files, please try using your local sources and check.
Gear up with your HTML knowledge, and get ready to rock that interview!
Comments
Post a Comment