Practice Questions
Question 1) Write whether the following statements are true or false.
• HTML is a programming language. Hyper Text Markup Language.
• HTML stands for HyperText Markup Language.
• CSS is used to create the structure of a web page. used to control the presentation and formatting
• The <head> element is visible on the web page.
• The <title> text appears in the browser tab.
• The <body> element contains the main visible content.
• HTML tags are case-sensitive.
• <p> is used for paragraphs.
• <br> creates a line break.
• <hr> creates a horizontal rule/line. <area>, <br>, <hr>, <img>, <link>, <meta>, <param>
• The <img> tag requires a closing </img> tag. known as empty tags, void tags, singletons tags that does
not need to be closed manually by its closing tag, which
• The alt attribute on <img> helps accessibility.
means it does not have a separate closing tag as </tag>.
• The src attribute specifies the image file path.
● HTML5: Using a slash is absolutely optional.
• <a> is used to create hyperlinks.
●
HTML4: Using a slash is technically invalid. However, the W3C's
• The href attribute is used to specify a link destination.
HTML validator still accepts it.
• A table is created using the <table> element. ●
XHTML: A slash is required, and all tags can be self-closed.
• <tr> defines a table row.
• <td> defines a table header cell. a table column
• <th> defines a table header cell.
• <thead> and <tbody> can help organize table sections.
• Multiple elements can share the same class value.
• The style attribute is used to apply inline CSS.
• <header> and <footer> are semantic elements.
• <section> is used to define a thematic grouping of content.
• <article> is best for self-contained content (like a blog post).
• <nav> is intended for navigation links.
• Forms are created using the <form> element.
• <input type="password"> hides typed characters.
• <label> improves form accessibility when linked to an input.
• The for attribute on <label> should match an input’s id.
• <textarea> is used for multi-line text input.
• The required attribute makes an input mandatory before submission.
• The placeholder attribute provides a default value that is submitted.
Question 2)
<p>Chicken Burger</p> Chicken Burger
<p> Chicken Burger</p> Chicken Burger
Will these two lines look the same or different? What will you see?
Question 3)
<p>1<!--2-->3</p> 13
What will be displayed? ﺗﻌﻠﯿﻖ
Question 4)
<p>First
<p>Second 2
How many paragraphs/lines will appear?
Question 5) Bold → ﻏﺎﻣﻖ ﻓﻘﻂ
<b>Bold <i>Italic</b> Normal</i>
Italic → ﻣﺎﺋﻞ+ ﻏﺎﻣﻖ
Which words will appear bold and/or italic?
Normal → ﻣﺎﺋﻞ ﻓﻘﻂ
Question 6) Above
<p>Above<hr>Below</p>
────────
What will the browser show and how will it be arranged?
Below
Question 7)
<img src="[Link]" alt="A sad penalty kick">
Assume the file is missing, what will the user likely see? A sad penalty kick
Question 8)
<p>Right
then Right then left
left</p>
Will the words appear on separate lines or on one line?
Question 9)
<h1>F16</h1> F16
<h6>Train</h6> Train
How will these two lines differ visually?
Question 10)
<form>
<input type="checkbox" id="x">
<label for="x">Check me</label> ☐ Check me
</form>
What will be displayed (controls + text) and how are they aligned?
Question 11)
<!doctype html>
<html>
<head>
<title>INVISIBLE TITLE</title>
</head>
<body>
<h1>VISIBLE TITLE</h1>
</body>
</html>
What appears on the page, and what appears on the browser tab?
VISIBLE TITLE INVISIBLE TITLE
Question 12)
<!doctype html>
<html>
<body> Two
<p>A B</p>
<p> A B
C C D
D
</p>
</body>
</html>
How many lines are displayed, and what’s on each line?
Question 13)
<!doctype html>
<html>
<body> Line 1
<textarea rows="3" cols="20">Line 1
Line 2</textarea>
Line 2
</body> Third row is empty.
</html>
What text is already inside the textarea when the page loads, and how is it laid out?
Question 14)
<!doctype html>
<html>
<body>
<input type="hidden" value="TOP SECRET">
<input type="password" value="12345">
</body>
</html>
What controls are visible on the page, and what do they look like?
Question 15)
<!doctype html>
<html>
<body>
<input placeholder="Full Name"> Full Name
</body>
</html>
What text appears inside the input before typing anything?
Question 16)
<!doctype html>
<html>
<body>
<p>Above</p>
<input type="text" value="first">
<input type="text" value="second" autofocus>
<p>Below</p>
</body>
</html>
Which field gets focus on load? What visible clue shows that?
The second input gets focus.
Question 17)
<!doctype html>
<html>
<body>
<table border="1"> |A|B|
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr> |C|D|
</table>
</body>
</html>
Draw the table exactly as it appears.
Question 18)
<!doctype html>
<html>
<body>
<form>
<input type="submit" value="Launch">
</form>
</body>
</html>
What appears on the page? (Be precise about what the user can click/see.)
clickable button labeled “Launch”
Question 19)
<!doctype html>
<html>
<body>
<table border="1">
<thead>
<tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tfoot>
<tr><td>FOOT1</td><td>FOOT2</td></tr>
</tfoot>
<tbody>
<tr><td>R1C1</td><td>R1C2</td></tr>
<tr><td>R2C1</td><td>R2C2</td></tr>
</tbody>
</table>
</body>
</html>
In what order do header/body/footer appear visually in the rendered table?
Question 20)
<!doctype html>
<html>
<body>
<input type="text" value="A" autofocus>
<input type="text" value="B" autofocus>
</body>
</html>
Which input ends up focused when the page loads?
Question 21)
<!doctype html>
<html>
<body>
<label for="x">Click Me</label>
<input id="x" type="text" value="Focused?">
</body>
</html>
What happens if the user clicks the text “Click Me”? (Describe the visible effect.)
Question 22)
<!doctype html>
<html>
<body>
<form>
<input type="text" placeholder="Name" required>
<input type="submit" value="Send">
</form>
</body>
</html>
What happens when the user clicks Send without typing anything?
Question 23)
<!doctype html>
<html>
<body>
<form>
<input pattern="[a-zA-Z0-9]+" title="Letters and numbers only please" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
If the user types abc-123 and hits Submit, what happens?
Then if they type abc123 and hit Submit, what happens?
Question 24)
<!doctype html>
<html>
<body>
<input type="text" list="sources">
<datalist id="sources">
<option>Professor</option>
<option>Master</option>
</datalist>
</body>
</html>
What does the user see initially, and what changes when they type “M”?
Question 25)
<!doctype html>
<html>
<body>
<input type="number" min="1" max="5" step="2" value="1">
</body>
</html>
What control is shown? If the user clicks the up arrow once, what value appears? Twice?
Question 26)
<!doctype html>
<html>
<body>
<input type="range" min="0" max="100" step="1" value="50">
</body>
</html>
What control appears, and is the number 50 shown to the user anywhere by default?
Question 27)
<!doctype html>
<html>
<body>
<form>
<input type="text" value="Hello">
<input type="reset" value="Undo">
<input type="submit" value="Go">
</form>
</body>
</html>
After the page loads, the user changes “Hello” to “Bye”.
What happens when they click Undo? What happens when they click Go?
Question 28) Select the option that does the following task.
“Souq Waqif Guide” should appear in the browser tab, while the page shows an <h1> title.
a)
<!doctype html>
<html>
<head><title>Souq Waqif Guide</title></head>
<body><h1>Souq Waqif Guide</h1></body>
</html>
b)
<!doctype html>
<html>
<body><title>Souq Waqif Guide</title><h1>Souq Waqif Guide</h1></body>
</html>
c)
<!doctype html>
<html>
<head><h1>Souq Waqif Guide</h1></head>
<body></body>
</html>
d)
<html>
<title>Souq Waqif Guide</title>
<h1>Souq Waqif Guide</h1>
</html>
Question 29) Select the option that does the following task.
Create a semantic page skeleton: header + nav + main + footer.
a)
<header>Header</header>
<nav>Menu</nav>
<main>Main content</main>
<footer>Footer</footer>
b)
<top>Header</top>
<menu>Menu</menu>
<content>Main content</content>
<bottom>Footer</bottom>
c)
<head>Header</head>
<nav>Menu</nav>
<body>Main content</body>
<footer>Footer</footer>
d)
<header>Header</header>
<navbar>Menu</navbar>
<main>Main content</main>
<foot>Footer</foot>
Question 29) Select the option that does the following task.
Make a simple paragraph about Doha Corniche.
a)
<p>Walking the Doha Corniche at sunset is beautiful.</p>
b)
<paragraph>Walking the Doha Corniche at sunset is beautiful.</paragraph>
c)
<p>Walking the Doha Corniche at sunset is beautiful.</p>
</p>
d)
<hp>Walking the Doha Corniche at sunset is beautiful.</hp>
Question 30) Select the option that does the following task.
Add a line break between “Karak” and “Tea”.
a)
<p>Karak</p><br><p>Tea</p>
b)
<p>Karak\nTea</p>
c)
<p>Karak<br>Tea</p>
d)
<p>Karak<break>Tea</break></p>
Question 31) Select the option that does the following task.
Show a dhow photo with good accessibility text.
a)
<img href="[Link]" alt="Traditional dhow boat in Doha">
b)
<image src="[Link]">Traditional dhow boat in Doha</image>
c)
<img src="[Link]" alt="Traditional dhow boat in Doha">
d)
<img alt="Traditional dhow boat in Doha">
Question 32) Select the option that does the following task.
Build a simple 2x2 table (rows/columns) showing “Item / Price”.
a)
<table>
<td>Item</td><td>Price</td>
<td>Karak</td><td>5 QAR</td>
</table>
b)
<table>
<tr><th>Item</th><th>Price</th></tr>
<tr><td>Karak</td><td>5 QAR</td></tr>
</table>
c)
<tr>
<td>Item</td><td>Price</td>
</tr>
d)
<table>
<tr><td>Item</td><td>Price</td></tr>
<tr><td>Karak</td><td>5 QAR</td></tr>
</table>
Question 33) Select the option that does the following task.
Link an external CSS file named [Link].
a)
<script src="[Link]"></script>
b)
<link rel="stylesheet" href="[Link]">
c)
<style src="[Link]"></style>
d)
<link href="[Link]">
Question 34) Select the option that does the following task.
Create an email input for “Contact email” (validated as email).
a)
<input type="text" name="email">
b)
<input type="mail" name="email">
c)
<input type="email" name="email">
d)
<email name="email"></email>
Question 35) Select the option that does the following task.
Create a “Full Name” input that shows hint text and is mandatory.
a)
<input value="Full Name" required>
b)
<input placeholder="Full Name" important>
c)
<input required="false" placeholder="Full Name">
d)
<input placeholder="Full Name" required>
Question 36) Select the option that does the following task.
You want the first field to automatically get focus when page loads.
a)
<input type="text" name="name" autofocus>
b)
<input type="text" name="name" autoselect>
c)
<input type="text" name="name" focus>
d)
<input type="text" name="name" selected>
Question 37) Select the option that does the following task.
Create a “Guests” number input (spinbox) min 1, max 6, step 1, default 2.
a)
<input type="number" name="guests" minimum="1" maximum="6" step="1" value="2">
b)
<input type="range" name="guests" min="1" max="6" step="1" value="2">
c)
<input type="number" name="guests" min="1" max="6" value="2" step="0">
d)
<input type="number" name="guests" min="1" max="6" step="1" value="2">
Question 38) Select the option that does the following task.
Create a range slider for “Volume” from 0 to 100 with default 50.
a)
<input type="number" name="volume" min="0" max="100" value="50">
b)
<input type="range" name="volume" min="0" max="100" step="1" value="50">
c)
<input type="slider" name="volume" min="0" max="100" value="50">
d)
<input type="range" name="volume" min="0" max="100" value="50" showvalue>
Question 39) Select the option that does the following task.
Create a date picker for “Trip date”.
a)
<input type="calendar" id="tripdate" name="tripdate">
b)
<input type="datetime" id="tripdate" name="tripdate">
c)
<input type="date" id="tripdate" name="tripdate">
d)
<date id="tripdate" name="tripdate"></date>
Question 40) Select the option that does the following task.
Build a complete table: header uses <th> (not <td>).
a)
<table>
<thead><tr><td>Event</td><td>Time</td></tr></thead>
<tbody><tr><td>Falcon show</td><td>18:00</td></tr></tbody>
</table>
b)
<table>
<header><tr><th>Event</th><th>Time</th></tr></header>
<body><tr><td>Falcon show</td><td>18:00</td></tr></body>
</table>
c)
<table>
<thead><tr><th>Event</th><th>Time</th></tr></thead>
<tbody><tr><td>Falcon show</td><td>18:00</td></tr></tbody>
</table>
d)
<table>
<thead><th>Event</th><th>Time</th></thead>
<tbody><td>Falcon show</td><td>18:00</td></tbody>
</table>
Question 41) Select the option that does the following task.
Create a datalist suggestion box for “Level” (Professor/Master).
a)
<select id="levels">
<option>Professor</option>
<option>Master</option>
</select>
b)
<input type="text" source="levels">
<list id="levels"><option>Professor</option></list>
c)
<input type="datalist" id="levels">
<option>Professor</option>
d)
<input type="text" list="levels">
<datalist id="levels">
<option>Professor</option>
<option>Master</option>
</datalist>
Question 42) Select the option that does the following task.
Username must be letters only, show help text, and be required.
a)
<input name="username" pattern="[a-zA-Z0-9]+" title="Letters and numbers only please">
b)
<input name="username" pattern="[a-zA-Z]+" title="Letters and numbers only please"
required>
c)
<input name="username" pattern="[a-zA-Z0-9]+" required="false">
d)
<input name="username" regex="[a-zA-Z0-9]+" title="Letters and numbers only please"
required>
Question 43) Select the option that does the following task.
Qatar phone input: use type="tel" and require exactly 8 digits (example: 12345678).
a)
<input type="tel" name="phone" pattern="[0-9]{8}" title="Enter 8 digits">
b)
<input type="tel" name="phone" pattern="[0-9]{8}" title="Enter 8 digits" required>
c)
<input type="phone" name="phone" pattern="[0-9]{8}" required>
d)
<input type="tel" name="phone" min="00000000" max="99999999" required>
Question 44) Select the option that does the following task.
Qatar ID must be exactly 11 digits, required, with a clear title message.
a)
<input name="qid" pattern="[0-9]{11,}" title="Enter exactly 11 digits" required>
b)
<input name="qid" pattern="[0-9]{11}" title="Enter exactly 11 digits">
c)
<input name="qid" pattern="[0-9]{11}" title="Enter exactly 11 digits" required>
d)
<input name="qid" length="11" required>
Question 45) Select the option that does the following task.
Create a table with header/body/footer. Footer comes BEFORE tbody in the code (but still renders as a footer).
a)
<table>
<thead><tr><th>Item</th><th>QAR</th></tr></thead>
<tbody>
<tr><td>Karak</td><td>5</td></tr>
<tr><td>Qahwa</td><td>10</td></tr>
</tbody>
<tfoot><tr><td>Total</td><td>15</td></tr></tfoot>
</table>
b)
<table>
<thead><tr><td>Item</td><td>QAR</td></tr></thead>
<tfoot><tr><td>Total</td><td>15</td></tr></tfoot>
<tbody><tr><td>Karak</td><td>5</td></tr></tbody>
</table>
c)
<table>
<header><tr><th>Item</th><th>QAR</th></tr></header>
<footer><tr><td>Total</td><td>15</td></tr></footer>
</table>
d)
<table>
<thead><tr><th>Item</th><th>QAR</th></tr></thead>
<tfoot><tr><td>Total</td><td>15</td></tr></tfoot>
<tbody>
<tr><td>Karak</td><td>5</td></tr>
<tr><td>Qahwa</td><td>10</td></tr>
</tbody>
</table>
Question 46) Select the option that does the following task.
You need semantic structure for a blog post about “Desert Safari”: article with sections.
a)
<article>
<section><h2>Intro</h2><p>Meet at Sealine.</p></section>
<section><h2>Plan</h2><p>Dunes, then dinner.</p></section>
</article>
b)
<div class="article">
<section><h2>Intro</h2><p>Meet at Sealine.</p></section>
<post><h2>Plan</h2><p>Dunes, then dinner.</p></post>
</div>
c)
<article>
<div><h2>Intro</h2><p>Meet at Sealine.</p></div>
<div><h2>Plan</h2><p>Dunes, then dinner.</p></div>
</article>
d)
<section>
<article><h2>Intro</h2></article>
<article><h2>Plan</h2></article>
</section>
Question 47) Select the option that does the following task.
Use the correct tag for a generic container when no semantic tag fits.
a)
<container class="box">Content</container>
b)
<generic class="box">Content</generic>
c)
<section class="box">Content</section>
d)
<div class="box">Content</div>
Question 48) Select the option that does the following task.
Make an input that accepts a URL (validated loosely as a URL).
a)
<input type="website" name="website">
b)
<input type="link" name="website">
c)
<url name="website"></url>
d)
<input type="url" name="website">