HTML, CSS & BOOTSTRAP – EXAM BOOSTER (QCM +
CODE)
Based strictly on the course: Developing Static Websites
1. Fundamental Definitions (Very Important for QCM)
1 HTML (HyperText Markup Language): A markup language used to structure the content of a web page
(text, images, links). Example: <h1>Title</h1>
2 CSS (Cascading Style Sheets): A style sheet language used to control the presentation (colors, layout,
fonts) of HTML elements. Example: p { color:red; }
3 Bootstrap: A CSS framework that helps create responsive and mobile■first websites quickly using
predefined classes. Example: <div class='container'>
4 W3C (World Wide Web Consortium): The international organization responsible for defining web
standards.
5 Static Website: A website whose content does not change automatically and is written using HTML/CSS
only.
6 Web Browser: Software used to display web pages. Example: Chrome, Firefox.
7 URL (Uniform Resource Locator): The address of a resource on the web.
2. HTML – Structure, Rules & Tags
1 HTML is NOT a programming language; it is a markup language.
2 HTML uses tags to describe content.
3 Most HTML tags have an opening tag and a closing tag.
2.1 Basic HTML Page Structure
1 <!DOCTYPE html>: Declares the document as HTML5.
2 <html>: Root element of the page.
3 <head>: Contains metadata (title, charset, links).
4 <meta charset='UTF-8'>: Defines character encoding.
5 <title>: Page title shown in browser tab.
6 <body>: Contains all visible content.
2.2 Common HTML Tags
1 <h1> to <h6>: Headings from largest to smallest. Example: <h1>Main title</h1>
2 <p>: Paragraph of text. Example: <p>Hello</p>
3 <a>: Hyperlink. Example: <a href='[Link]'>Link</a>
4 <img>: Displays an image. Example: <img src='[Link]'>
5 <div>: Block■level container. Example: <div>Content</div>
6 <span>: Inline container. Example: <span>Text</span>
7 <ul>, <ol>, <li>: Unordered/ordered lists. Example: <ul><li>Item</li></ul>
8 <table>, <tr>, <td>, <th>: Table elements. Example: <table><tr><td>A</td></tr></table>
2.3 HTML Forms (Highly Tested)
1 <form>: Groups form controls. Example: <form method='post'>
2 <input type='text'>: Text input field.
3 <input type='password'>: Password field.
4 <input type='radio'>: Select one option.
5 <input type='checkbox'>: Select multiple options.
6 <textarea>: Multi■line text field.
7 <select> & <option>: Dropdown list.
8 required: Makes field mandatory. Example: <input required>
9 <input type='submit'>: Sends form data.
3. CSS – Styling & Priorities
1 CSS controls appearance, not structure.
2 CSS rules follow the syntax: selector { property: value; }
3.1 Ways to Apply CSS (Order Matters)
1 Inline CSS: Written inside HTML tags. Example: <p style='color:red'>
2 Internal CSS: Written inside <style> tag in <head>.
3 External CSS: Written in a separate .css file and linked.
3.2 Common CSS Properties
1 color: Changes text color. Example: color:red;
2 background-color: Changes background color.
3 font-size: Controls text size.
4 font-family: Changes font.
5 text-align: Aligns text.
6 margin: Space outside element.
7 padding: Space inside element.
8 border: Adds border.
9 width / height: Controls size.
3.3 Units (QCM Favorite)
1 px: Fixed size.
2 %: Relative to parent.
3 em / rem: Relative font units.
4 vw / vh: Relative to viewport.
4. Bootstrap – Responsive Design
1 Bootstrap is a CSS framework.
2 Bootstrap uses predefined classes.
3 Bootstrap is mobile■first.
4.1 Bootstrap Grid System
1 container: Wraps page content.
2 row: Creates a horizontal row.
3 col: Creates a column.
4 12■column system.
4.2 Common Bootstrap Classes
1 btn: Button class.
2 btn-primary: Blue button.
3 text-center: Centers text.
4 bg-primary: Background color.
5. Exam Traps & Smart Tips
1 HTML is NOT used for styling → CSS is.
2 <div> is block-level, <span> is inline.
3 Bootstrap is NOT JavaScript; it is mainly CSS.
4 Inline CSS has higher priority than external CSS.
5 <img> has no closing tag.