PART 2 - HTML Interview Questions and Expert Answers 2023: Cracking the Code to Land Your Job!

By -

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:


   
   Sorry, your browser does not support inline SVG.

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:

Responsive Image

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:

Clickable Image

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

Popular posts from this blog

what is Modified Waterfall Model?

By -
Image
In response to the perceived problems with the "pure" waterfall model, many modified waterfall models have been introduced. These models may address some or all of the criticisms of the "pure"  waterfall model. In Water fall method , there is no VALIDATION OR VERIFICATION between the phases , so the customer will finally get unsatisfied product. This Modified Waterfall Model Involves VALIDATION or VERIFICATION between the phases , so any deviations can be corrected immediately , providing the customer satisfaction, so this is preferred.
Read more

What is User Documentation Testing

By -
User Documentation  covers all the manuals, user guides, installation guides, setup guides, read me files,software release notes, and online help that are provided along with the software to help the end user to understand the software system. User Documentation Testing should have two objectives:- To check if what is  stated in the document is available in the software To check if what is there in the product is explained correctly in the document This testing is plays a vital role as the users will refer this document when they start using the software at their location.a badly written document can put off a user and bias them against the product even the product offers rich functionality. Defects found in the user documentation need to be tracked to closure like any regular software defect.Because these documents are the first interactions the users have with the product. A good User Documentation  aids in reducing customer support calls.The effort and money spend on this effort
Read more

what is Prototype Model?

By -
Image
The goal of prototyping based development is to counter the first two limitations of the waterfall model. This prototype is developed based on the currently known requirements. Development of the prototype obviously undergoes design, coding and testing. But each of these phases is not done very formally or thoroughly. By using this prototype, the client can get an "actual feel" of the system. Advantages It could serve as the first system. Prototyping is an attractive idea for complicated and large systems for which there is no manual  process or existing system to help determining the requirements. The customer doesn’t need to wait long as in the Linear Model. Feedback from customers are received periodically and the changes don’t come as a last minute surprise. Users are actively involved in the development It provides a better system to users, as users have natural tendency to change their mind in specifying requirements and this method of developing systems s
Read more