HTML & CSS Long Answer Questions
Q1. What is HTML and explain the basic structure of an HTML document.
HTML (HyperText Markup Language) is the standard language for creating web pages. It
uses tags to structure content on the web.
Basic Structure of HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- <!DOCTYPE html>: Declares the document type.
- <html>: Root element.
- <head>: Contains metadata, title, and links.
- <body>: Contains the visible content like headings, paragraphs, images, etc.
Q2. Explain the differences between Client-side and Server-side web
programming.
Client-Side:
- Runs in the browser.
- Languages: HTML, CSS, JavaScript.
- Fast response, no server needed for actions.
Server-Side:
- Runs on the server.
- Languages: PHP, Python, Java.
- Manages databases, user authentication, etc.
Example: Clicking a button to change color = Client-side.
Submitting a form to store data = Server-side.
Q3. Explain text formatting tags in HTML with examples.
- <b>: Bold → <b>Bold</b>
- <strong>: Bold with importance
- <i>: Italic → <i>Italic</i>
- <em>: Emphasized italic
- <u>: Underline
- <mark>: Highlight
- <sup> and <sub>: Superscript and subscript
- <code>: Monospaced code
- <q> and <blockquote>: Short and long quotes
Q4. Discuss the different types of HTML lists with syntax and examples.
1. Ordered List <ol>:
<ol><li>One</li><li>Two</li></ol>
2. Unordered List <ul>:
<ul><li>Milk</li><li>Bread</li></ul>
3. Definition List <dl>:
<dl><dt>HTML</dt><dd>Markup language</dd></dl>
Q5. Describe HTML forms in detail. Explain different form elements with a
sample HTML form.
Forms collect user input. Example:
<form>
<input type="text" name="name">
<input type="password" name="pass">
<input type="radio" name="gender" value="Male">
<input type="checkbox" name="hobby" value="Reading">
<select><option>India</option></select>
<textarea></textarea>
<input type="submit">
</form>
Q6. What are Frames in HTML? How are they created using <frame> and
<frameset> tags?
Frames divide browser into sections. Syntax:
<frameset cols="30%,70%">
<frame src="left.html">
<frame src="right.html">
</frameset>
Use name in frames to target links.
Drawbacks: Poor SEO, bad mobile support, deprecated in HTML5.
Q7. Compare inline, embedded, and external CSS with examples.
Inline: style="color:red" (inside element)
Embedded: in <style> tag inside <head>
External: Linked CSS file with <link>
External is preferred for large projects. Inline is for quick changes. Embedded is for single-
page styling.
Q8. Explain CSS specificity and cascade.
Specificity = which rule wins. Order:
1. Inline style (1,0,0,0)
2. ID (#id) (0,1,0,0)
3. Class (.class) (0,0,1,0)
4. Element (p) (0,0,0,1)
Cascade checks:
1. !important
2. Specificity
3. Source order
Q9. What is CSS positioning? Explain different types with examples.
Static: Default, can't move.
Relative: Moves from its original spot.
Absolute: Positioned to parent.
Fixed: Stuck to viewport.
Sticky: Scrolls until fixed.
Example:
position: relative; top: 10px;
Q10. What are the different image formats supported in HTML?
JPG: Lossy, small size, no transparency.
PNG: Lossless, supports transparency.
GIF: Supports animation, only 256 colors.
Example:
<img src="image.jpg" alt="desc">
