HTML Flashcards
Where do you put non-visible content about the HTML document?
In the “head” element.
Where do you put visible content about the HTML document?
In the “body” element.
Where do the <head> and <body> tags go in a valid HTML document?
Within the “html” element as siblings.
What is the purpose of a <!DOCTYPE> declaration?
Instruction to the web browser about what version of HTML the page is written in. Ensures the web page is parsed the same way by different web browsers.
What is the purpose of the HTML attributes?
To provide additional information about HTML elements.
name=”value”
ex. HTML element types
ex. HTML entity(escape character)
” <head>, <title>, <body>, <h1>, <p>, <html> "</title>
< (<), ® (Ⓡ), & (&), " (“), &apos (‘) **
**followed by semicolon
How do block-level elements affect the document flow?
default value for height and width
They stack, block-level elements start on a new line.
Block-level element occupies the entire horizontal space of its parent element(container), and vertical space equal to the height of its contents.
height - auto
How do inline elements affect the document flow?
default value for height and width
Only occupy the space bounded by the tags defining the element.
Do NOT force a new line to begin in the document flow.
height and width - auto
Is an HTML list a block or an inline element?
Difference between an ordered list and unordered list.
HTML lists are block elements.
Ordered lists are used to create a list of related items, in a specific order. (Ascending numerical order)
Unordered lists are used to create a list of related items, in no particular order. (Bullet points)
What HTML tag is used to link to another website?
Absolute URL vs Relative URL
The anchor tag (<a>) is used to link to another website.</a>
Absolute - contains the whole URL address, including protocol (http/https), the optional subdomain (www.), domain (google.com), and path (directory and slug)
Relative - contains a URL that only includes the path (directory and slug). Path is everything after the domain.
How do you indicate the relative link to the same directory?
a parent directory?
a child directory?
a grand parent directory?
File name or .
../ + file name
Name of child folder + file name
../../ + file name
What is the purpose of an HTML form element?
Give five examples of form control elements.
Boundary of the form element and used to collect user input
input, label, select, textarea, button, fieldset
Is an HTML <input></input> element a block element or an inline element?
Give three examples of type attribute values for HTML <input></input> elements.
inline
type, name, value
What are the six primary HTML elements for creating tables?
tr, td, th, thead, tbody, table, tfoot
What purpose do the thead and tbody elements serve?
thead refers to the head of the table
tbody refers to the body of the table
Structural purpose
Give two examples of data that would lend itself well to being displayed in a table.
Financial reports, tv schedules, sports results
What are the names of the individual pieces of a CSS rule?
selector & declaration > declaration block > property & value
In CSS, how do you select elements by their class attribute?
. (dot)
In CSS, how do you select elements by their tag name?
element name
In CSS, how do you select an element by its id attribute?
(octothorpe) #
Name three different types of values you can use to specify colors in CSS.
color name, hex code, rgb value
What CSS properties make up the box model?
width, height, padding, border, margin
Which CSS property pushes boxes away from each other?
Which CSS property add space between a box’s content and its border?
margin
padding
What is a pseudo-class?
keyword added to a selector that specifies a special state of the selected element
selector that selects elements that are in a specific state,
What are CSS pseudo-classes useful for?
to Highlight User’s Position and specify a special state of the selected element(s)
Name two types of units that can be used to adjust font-size in CSS.
pixels, percentages, ems
What CSS property controls the font used for the text inside an element?
font- family
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
nowrap
Why do two div elements “vertically stack” on one another by default?
div is a block element
What is the default flex-direction of an element with display: flex?
row
What are the three primary components of a page layout? (Which helper classes do you need?)
container, row, column
What is the minimum number of columns that you should put in a row?
1
What is the purpose of a container?
to confine all the content within a boundary
What is the default value for the position property of HTML elements?
static
How does setting position: relative on an element affect document flow?
How does setting position: relative on an element affect where it appears on the page?
element positioned according to the normal flow
moves according to its original position as if it was static
How does setting position: absolute on an element affect document flow?
How does setting position: absolute on an element affect where it appears on the page?
element is removed from the normal flow
the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
How do you constrain an absolutely positioned element to a containing block?
the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
What are the four box offset properties?
top right bottom left