Module #3: Principles of Design (HTML) Flashcards

Question

Q: What are the basic HTML tags needed to build a table from scratch?

Answer 1

- < table> – starts the table - < tr> – defines a table row - < th> – defines a header cell (appears bold + centered) - < td> – defines a regular data cell

Answer 2

< table> < tr> < th>Header 1Header 2 < /tr> < tr> < td>Data 1Data 2 < /tr> < /table> this is a 2 by 2 table,

Answer 3

A: - The Tab button is used to indent lines of code - Indenting makes the structure easier to read - It shows which elements are inside (embedded in) others - For example: - contains - each contains < td> or < th> - indenting helps you see this hierarchy clearly - It doesn't affect how the table looks in the browser—only how readable your code is!

Q: How do you build an unordered list in HTML and what do each of the elements mean?

A: - < ul> – defines the unordered (bulleted) list - < li> – defines a list item - Each < li> must Embedded inside the

Structure example: < ul> < li>Coffee < li>Tea < li>Milk < /ul> Result on the page: * Coffee * Tea * Milk

Q: How do you build an ordered list in HTML and what do each of the elements mean?

A: - < ol> – defines the ordered (numbered) list - < li> – defines a list item - Each

must go inside the

Coffee
Tea
Milk

Q: What does the element do in HTML and how is it structured?

A: - < form> is a container for input elements - Used to collect user data (text fields, checkboxes, radios, etc.) - Wraps all form controls in a structured block - Often used with attributes like action and method Structure: < form> ...form elements... < /form> Result: Displays a form on the page where users can fill in data using various input fields.

Q: What does < input type="text"> do in an HTML form? <...type="text">

A: - Creates a single-line text field - Used to input names, emails, etc. - Placed inside a Code: < form> < input type="text"> < /form> Result: [ ] ← a blank field to type in

Q: What does < input type="radio"> do in an HTML form?

A: - Creates a round radio button - Used to choose only one option from a group - Buttons in the same group must share the same name Code: < form> < input type="radio" name="drink"> Coffee < input type="radio" name="drink"> Tea < /form> Result: ( ) Coffee ( ) Tea (Only one can be selected)

Q: What does < input type="checkbox"> do in an HTML form? type="checkbox"

A: - Creates a square checkbox - Used to select one or more options - Each box is independent Code: < form> < input type="checkbox"> Milk < input type="checkbox"> Sugar < /form> Result: [ ] Milk [ ] Sugar box to check

Q: What does < input type="submit"> do in an HTML form? <...type="submit" value=send>

A: - Creates a button that submits the form - Sends form data to a server - Needs to be inside a Code: < form> < input type="submit" value="Send"> Result: [ Send ] click to send the info on a page

Q: What does < input type="button"> do in an HTML form? <...="button">

A: - Creates a simple clickable button - Does not submit the form - Used for custom actions (usually with JavaScript) Code: < form> < input type="button" value="Click Me"> < /form> Result: [ Click Me ]

Q: How do you create a form with labeled text inputs for first and last names? ]

A: - Use a container - Use tags linked with for and id - Use for user input - Use
to break lines Full Code: < form> < label for="fname">First name:
< input type="text" id="fname" name="fname">
< label for="lname">Last name:
< input type="text" id="lname" name="lname"> < /form> Result: First name: [ ] Last name: [ ]

Q: How do the for attribute in and the id in work together?

A: - < label> adds a description for a form input - for="something" in the label must match the id="something" in the input - This links the label to the input field - Clicking the label focuses the input box - Improves accessibility and user experience Code Example: < label for="fname">First name: < input type="text" id="fname" name="fname"> Result: First name: [ ] Clicking "First name:" will place your cursor in the box.

Q: If the for and id are missing, will the label and input still display normally?

A: - Yes — the visual display is the same - The label still shows and the input box still works - But: clicking the label won’t focus the input - It makes the form less accessible and user-friendly - Best practice is to always link them with for and id

Q: What does the value attribute do in an HTML input

A: - Sets an initial value shown in the input field - User can edit or delete it freely - Used to pre-fill fields like names, emails, etc. - Updated value is sent when the form is submitted Example: < input type="text" value="John"> Result: [ John ]

where to place the value attribute in a bigger code

✅ Full HTML Code (with value attribute): < form> < label for="fname">First name:< /label>< br> < input type="text" id="fname" name="fname" value="John">< br> < label for="lname">Last name:< /label>< br> < input type="text" id="lname" name="lname" value="Doe">< br> < input type="submit" value="Submit"> < /form> 💻 What it looks like on the page (Result): First name: [ John ] Last name: [ Doe ] [ Submit ]

Q: What does the < select> element do and how does it work with < option> and value?

A: - Creates a drop-down menu - Each choice is defined with an < option> tag - Each < option> has a value sent to the server if selected - Use selected to pre-select an option - Use name so the selected value is included when the form is submitted - The < label> is linked using for and the id of < select> Code Example: < label for="cars">Choose a car:< /label> < select id="cars" name="cars"> < option value="volvo">Volvo< /option> < option value="saab">Saab< /option> < option value="fiat"selected>Fiat< /option> < option value="audi">Audi< /option> < /select> Result: Choose a car: [ Fiat ▼ ] (pre-selected)

Q: What is the purpose of the < div> tag in HTML? | Hello! |

A: - Defines a division or section in a webpage - Acts as a container for other HTML elements - Used to group and organize content - Can be styled using CSS - By default, creates a line break before and after - Does not look like a box unless CSS is added Example Code (unstyled): < div> < p>Hello!< /p> < /div> Result (default): Just shows: Hello! (with line breaks before and after) Example Code (styled like a box): < style> div { border: 1px solid black; padding: 10px; } < /style> < div> < p>Hello!< /p> < /div> Result (styled): hello in a box

What is Bootstrap

-Front-end framework with pre-built styles -Enables responsive design (e.g., mobile adaptability) -Relies on pre-developed libraries to simplify coding -Supports low-code, usability-focused, and user-friendly design trends

how to acces bootstrap framework

In your HTML page, in the head tag, include the following: < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> < script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> < script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">

exemple of how to make a 3 by 2 table in bootstraps

< div class="jumbotron"> < h1>BS First Page< /h1> < p>Resize this page!< /p> < /div> < div class="container"> < div class="row"> < div class="col-sm-4"> < h3>1st col< /h3> < p>something interesting!< /p> < /div> < div class="col-sm-4"> < h3>2nd col< /h3> < p>Here is another thought…< /p> < /div> < div class="col-sm-4"> < h3>3rd col< /h3> < p>not short for ideas< /p> < /div> < /div> < /div> jumbotron: makes a big header box container: keeps content centered row: tells Bootstrap you want a row of columns col-sm-4: tells Bootstrap how wide each column should be

What is Bootstrap best for?

-Creating a responsive grid layout -Uses up to 12 columns (called spans) -Spans can be combined (e.g., 4 + 8, or 6 + 6) to organize content

how to create a 2 by 2 table where the first row is cut in half and the second is 1/3 , separation, 2/3. (style is for color background)

< div class="row"> < div class="col-sm-6" style="background-color: lightblue;"> Row 1 - Column 1 < /div> < div class="col-sm-6" style="background-color: lightgreen;"> Row 1 - Column 2

< /div> < div class="row"> < div class="col-sm-4" style="background-color: lightcoral;"> Row 2 - Column 1

< div class="col-sm- 8"style="background-color: lightyellow;"> Row 2 - Column 2

what is the General Structure of a Bootstrap Button

-Use btn base class + a style class -Format: < button type="button" class="btn btn-[style]">Text< /button> -Example: < button class="btn btn-primary">Click me< /button>

how to acces bootstrap in the body

class= ...

What Are Bootstrap Alerts Used For?

Bootstrap alerts are used to display quick messages to the user. These messages stand out with color and padding to show: ✅ Success ⚠️ Warnings ❌ Errors ℹ️ Info They're perfect for things like: “Your form was submitted successfully!” “Warning: Password too short.” “Error: Something went wrong.” “Info: Updates are available.”

what is the general format of an alert

General format: < div class="alert alert-[style]">Message here< /div>

what are bootstraps navigation bar

Bootstrap’s navbar helps you create: A horizontal menu at the top of your page A menu that can collapse into a hamburger icon on small screens A responsive and stylish layout without writing much CSS

explain the ancor tag

An anchor tag in HTML is used to create hyperlinks, which allow users to click and be directed to another location — either within the same page or to a different webpage altogether. The anchor tag is written as , and the most important attribute it uses is href, which stands for hypertext reference. Basic Structure: html Copier Modifier < a href="https://www.example.com">Click here Explanation: < a>: This is the opening anchor tag. href="...": This is the link destination. It can be a URL, an email address, or an internal page section. Click here: This is the clickable text that users will see. : This closes the anchor tag.

exemple of attributes

Attribute ; What it does src ; Specifies the source file (used in < img>, < script>, etc.) alt ; Alternative text for images href ; Link destination (used in < a>) id ; Unique identifier for an element class ; Groups elements with the same style; style Inline CSS styles title ; Tooltip text when hovering over an element

Key Points: how to use an attribute

Attributes go in the opening tag. They are written as attribute="value". You can use multiple attributes in one tag, separated by spaces.

Answer 4

A: - < ul> – defines the unordered (bulleted) list - < li> – defines a list item - Each < li> must Embedded inside the

Structure example: < ul> < li>Coffee < li>Tea < li>Milk < /ul> Result on the page: * Coffee * Tea * Milk

Answer 5

A: - < ol> – defines the ordered (numbered) list - < li> – defines a list item - Each

must go inside the

Coffee
Tea
Milk

Answer 6

A: - < form> is a container for input elements - Used to collect user data (text fields, checkboxes, radios, etc.) - Wraps all form controls in a structured block - Often used with attributes like action and method Structure: < form> ...form elements... < /form> Result: Displays a form on the page where users can fill in data using various input fields.

Answer 7

A: - Creates a single-line text field - Used to input names, emails, etc. - Placed inside a Code: < form> < input type="text"> < /form> Result: [ ] ← a blank field to type in

Answer 8

A: - Creates a round radio button - Used to choose only one option from a group - Buttons in the same group must share the same name Code: < form> < input type="radio" name="drink"> Coffee < input type="radio" name="drink"> Tea < /form> Result: ( ) Coffee ( ) Tea (Only one can be selected)

Answer 9

A: - Creates a square checkbox - Used to select one or more options - Each box is independent Code: < form> < input type="checkbox"> Milk < input type="checkbox"> Sugar < /form> Result: [ ] Milk [ ] Sugar box to check

Answer 10

A: - Creates a button that submits the form - Sends form data to a server - Needs to be inside a Code: < form> < input type="submit" value="Send"> Result: [ Send ] click to send the info on a page

Answer 11

A: - Creates a simple clickable button - Does not submit the form - Used for custom actions (usually with JavaScript) Code: < form> < input type="button" value="Click Me"> < /form> Result: [ Click Me ]

Answer 12

A: - Use a container - Use tags linked with for and id - Use for user input - Use
to break lines Full Code: < form> < label for="fname">First name:
< input type="text" id="fname" name="fname">
< label for="lname">Last name:
< input type="text" id="lname" name="lname"> < /form> Result: First name: [ ] Last name: [ ]

Answer 13

A: - < label> adds a description for a form input - for="something" in the label must match the id="something" in the input - This links the label to the input field - Clicking the label focuses the input box - Improves accessibility and user experience Code Example: < label for="fname">First name: < input type="text" id="fname" name="fname"> Result: First name: [ ] Clicking "First name:" will place your cursor in the box.

Answer 14

A: - Yes — the visual display is the same - The label still shows and the input box still works - But: clicking the label won’t focus the input - It makes the form less accessible and user-friendly - Best practice is to always link them with for and id

Answer 15

A: - Sets an initial value shown in the input field - User can edit or delete it freely - Used to pre-fill fields like names, emails, etc. - Updated value is sent when the form is submitted Example: < input type="text" value="John"> Result: [ John ]

Answer 16

✅ Full HTML Code (with value attribute): < form> < label for="fname">First name:< /label>< br> < input type="text" id="fname" name="fname" value="John">< br> < label for="lname">Last name:< /label>< br> < input type="text" id="lname" name="lname" value="Doe">< br> < input type="submit" value="Submit"> < /form> 💻 What it looks like on the page (Result): First name: [ John ] Last name: [ Doe ] [ Submit ]

Answer 17

A: - Creates a drop-down menu - Each choice is defined with an < option> tag - Each < option> has a value sent to the server if selected - Use selected to pre-select an option - Use name so the selected value is included when the form is submitted - The < label> is linked using for and the id of < select> Code Example: < label for="cars">Choose a car:< /label> < select id="cars" name="cars"> < option value="volvo">Volvo< /option> < option value="saab">Saab< /option> < option value="fiat"selected>Fiat< /option> < option value="audi">Audi< /option> < /select> Result: Choose a car: [ Fiat ▼ ] (pre-selected)

Answer 18

A: - Defines a division or section in a webpage - Acts as a container for other HTML elements - Used to group and organize content - Can be styled using CSS - By default, creates a line break before and after - Does not look like a box unless CSS is added Example Code (unstyled): < div> < p>Hello!< /p> < /div> Result (default): Just shows: Hello! (with line breaks before and after) Example Code (styled like a box): < style> div { border: 1px solid black; padding: 10px; } < /style> < div> < p>Hello!< /p> < /div> Result (styled): hello in a box

Answer 19

-Front-end framework with pre-built styles -Enables responsive design (e.g., mobile adaptability) -Relies on pre-developed libraries to simplify coding -Supports low-code, usability-focused, and user-friendly design trends

Answer 20

In your HTML page, in the head tag, include the following: < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> < script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> < script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">

Answer 21

< div class="jumbotron"> < h1>BS First Page< /h1> < p>Resize this page!< /p> < /div> < div class="container"> < div class="row"> < div class="col-sm-4"> < h3>1st col< /h3> < p>something interesting!< /p> < /div> < div class="col-sm-4"> < h3>2nd col< /h3> < p>Here is another thought…< /p> < /div> < div class="col-sm-4"> < h3>3rd col< /h3> < p>not short for ideas< /p> < /div> < /div> < /div> jumbotron: makes a big header box container: keeps content centered row: tells Bootstrap you want a row of columns col-sm-4: tells Bootstrap how wide each column should be

Answer 22

-Creating a responsive grid layout -Uses up to 12 columns (called spans) -Spans can be combined (e.g., 4 + 8, or 6 + 6) to organize content

Answer 23

< div class="row"> < div class="col-sm-6" style="background-color: lightblue;"> Row 1 - Column 1 < /div> < div class="col-sm-6" style="background-color: lightgreen;"> Row 1 - Column 2

< /div> < div class="row"> < div class="col-sm-4" style="background-color: lightcoral;"> Row 2 - Column 1

Answer 24

-Use btn base class + a style class -Format: < button type="button" class="btn btn-[style]">Text< /button> -Example: < button class="btn btn-primary">Click me< /button>

Answer 25

class= ...

Answer 26

Bootstrap alerts are used to display quick messages to the user. These messages stand out with color and padding to show: ✅ Success ⚠️ Warnings ❌ Errors ℹ️ Info They're perfect for things like: “Your form was submitted successfully!” “Warning: Password too short.” “Error: Something went wrong.” “Info: Updates are available.”

Answer 27

General format: < div class="alert alert-[style]">Message here< /div>

Answer 28

Bootstrap’s navbar helps you create: A horizontal menu at the top of your page A menu that can collapse into a hamburger icon on small screens A responsive and stylish layout without writing much CSS

Answer 29

An anchor tag in HTML is used to create hyperlinks, which allow users to click and be directed to another location — either within the same page or to a different webpage altogether. The anchor tag is written as , and the most important attribute it uses is href, which stands for hypertext reference. Basic Structure: html Copier Modifier < a href="https://www.example.com">Click here Explanation: < a>: This is the opening anchor tag. href="...": This is the link destination. It can be a URL, an email address, or an internal page section. Click here: This is the clickable text that users will see. : This closes the anchor tag.

Answer 30

Attribute ; What it does src ; Specifies the source file (used in < img>, < script>, etc.) alt ; Alternative text for images href ; Link destination (used in < a>) id ; Unique identifier for an element class ; Groups elements with the same style; style Inline CSS styles title ; Tooltip text when hovering over an element

Answer 31

Attributes go in the opening tag. They are written as attribute="value". You can use multiple attributes in one tag, separated by spaces.

Module #3: Principles of Design (HTML) Flashcards

(55 cards)