HTML Interview Questions - Set 4

HTML Interview Questions

This page contains HTML interview questions and answers.

Q1: How to add copyright symbol?

For this we can use © or ©.

Example:

Copyright © DYclassroom.

Q2: How to create paragraph having multi color words using HTML tags?

For this we can use the font tag and set the color property.

Example:

<p>The <font color="red">quick</font> brown <font color="green">fox</font> jumps over the lazy <font color="blue">dog</font>.</p>

Output:

The quick brown fox jumps over the lazy dog.

Q3: What is the use of marquee in HTML?

A marquee element is used to create scrolling text.

Example:

<marquee>stay happy and keep smiling :-)</marquee>

Output:

stay happy and keep smiling :-)

Q4: How to set background image of a web page?

To set the background image of a webpage we can add background attribute to the opening body tag.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body background="path/to/image.png">
  <h1>Hello World</h1>
</body>
</html>

Q5: What are empty elements in HTML?

Empty elements are the ones without any content. Example: br and hr.

Q6: How to embed a web page inside a page?

We can use iframe to accomplish this task.

In the following example we are showing the dyclassroom.com home page in an iframe having width 100% and height 400 pixels and with no iframe border.

<iframe
  src="https://dyclassroom.com"
  style="border: 0; width: 100%; height: 400px;"
></iframe>

Q7: How to create list with roman numeral?

For this we have to use an ordered list and set the the type to I.

<ol type="I">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output:

  1. Apple
  2. Mango
  3. Orange

Click here to learn more about list in HTML.

Q8 How to make an image responsive?

Responsive image means that its width and height will adjust itself depending on the area where it is displayed. So, for example if the width of the browser is increased the image will expand and if the width is decreased then the image will contract.

Following is an example of responsive image.

<img
  src="path/to/image.png"
  style="width: 100%; height: auto;">

Sample example:

Q9 How to make a table column take up two columns?

For this we can add colspan and set it to 2.

<table border="1" cellpadding="5" cellspacing="5">
  <tr>
    <td colspan="2">Cell 1</td>
  </tr>
  <tr>
    <td>Cell 3</td> <td>Cell 4</td>
  </tr>
</table>

Check out HTML tables tutorial for more detail.

Q10 How to make a table row take up two rows?

For this we can set the rowspan to 2.

<table border="1" cellpadding="5" cellspacing="5">
  <tr>
    <td rowspan="2">Cell 1</td> <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>