Module 1 Quiz — HTML Fundamentals
1. What does HTML stand for?
a) HyperText Markup Language
b) Home Tool Markup Language
c) HyperText Modern Language
d) High Tech Markup Language
2. Which tag creates the largest heading?
a) ``
b) ``
c) ``
d) ``
3. Which attribute specifies the URL for a link?
a) `src`
b) `url`
c) `link`
d) `href`
4. Which tag is self-closing (no closing tag needed)?
a) ``
b) ``
c) `![]()
`
d) ``
5. What does
a) A numbered list
b) A bulleted list
c) An underlined text
d) A URL link
6. Where does the </code> tag go?</strong></p>
<br/>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">a) Inside `<body>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">b) Inside `<head>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">c) Inside `<h1>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">d) After `</html>`</li>
<br/>
<hr class="my-6 border-zinc-200" />
<br/>
<p class="leading-relaxed text-zinc-700 mb-2"><strong class="font-semibold text-zinc-900">7. Which meta tag makes a page mobile-friendly?</strong></p>
<br/>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">a) `<meta charset="UTF-8">`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">b) `<meta name="viewport" content="width=device-width, initial-scale=1.0">`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">c) `<meta name="author" content="...">`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">d) `<meta http-equiv="refresh">`</li>
<br/>
<hr class="my-6 border-zinc-200" />
<br/>
<p class="leading-relaxed text-zinc-700 mb-2"><strong class="font-semibold text-zinc-900">8. How do you write a comment in HTML?</strong></p>
<br/>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">a) `// comment`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">b) `# comment`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">c) `/* comment */`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">d) `<!-- comment -->`</li>
<br/>
<hr class="my-6 border-zinc-200" />
<br/>
<p class="leading-relaxed text-zinc-700 mb-2"><strong class="font-semibold text-zinc-900">9. Which is correct for an ordered list?</strong></p>
<br/>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">a) `<ul><li>Item</li></ul>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">b) `<ol><li>Item</li></ol>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">c) `<list><item>Item</item></list>`</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">d) `<li><ol>Item</ol></li>`</li>
<br/>
<hr class="my-6 border-zinc-200" />
<br/>
<p class="leading-relaxed text-zinc-700 mb-2"><strong class="font-semibold text-zinc-900">10. What does the <code class="bg-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono text-pink-600">alt</code> attribute on an <code class="bg-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono text-pink-600"><img></code> do?</strong></p>
<br/>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">a) Makes the image larger</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">b) Adds a tooltip on hover</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">c) Provides text for accessibility / when image doesn't load</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">d) Changes the image color</li></div></div><div class="mb-8"><div><div class="mb-4 grid gap-4 lg:grid-cols-2"><div><div class="mb-2 flex items-center justify-between"><label class="text-sm font-semibold text-zinc-700">🌐 HTML Editor</label><div class="flex items-center gap-2"><button title="Reset to original code" class="rounded-lg border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-all hover:bg-zinc-100">↺ Reset</button><button class="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50">👁️ Preview</button></div></div><textarea class="w-full rounded-xl border border-zinc-300 bg-zinc-900 p-4 font-mono text-sm leading-relaxed text-green-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" style="min-height:250px;resize:vertical;tab-size:2" spellCheck="false"></textarea></div><div><div class="mb-2 flex items-center justify-between"><label class="text-sm font-semibold text-zinc-700">🖼️ Live Preview</label><div class="flex items-center gap-2"></div></div><div class="w-full rounded-xl border border-zinc-200 bg-white overflow-hidden" style="min-height:250px"><iframe title="HTML Preview" class="w-full h-full min-h-[250px]" sandbox="allow-scripts allow-same-origin" style="border:none"></iframe></div></div></div></div></div><div class="flex items-center justify-between border-t border-zinc-200 pt-6"><a class="flex items-center gap-1.5 rounded-lg border border-zinc-300 px-4 py-2 text-sm font-medium text-zinc-600 transition-all hover:bg-zinc-50" href="/course/html-css/html-structure">← <!-- -->HTML Structure & Comments</a><a class="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-all hover:bg-indigo-700" href="/course/html-css/m3-quiz-css">Next: <!-- -->Module 3 Quiz - CSS Fundamentals<!-- --> →</a></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:2","S:2")</script></body></html>