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 opening and closing HTML elements
What is the purpose of DOCTYPE declaration
It lets the browser know what version of HTML it is using.
Give five examples of HTML element tags
Head, body, title, meta, p
What is the purpose of HTML attributes?
the attribute name indicates what kind of extra information you are supplying about the elements content.
Give an example of an HTML entity(escape character)
copyright ©
How do block-level elements affect the document flow?
The take up all horizontal space in a line
How do inline elements affect the document flow?
They take up the same line as their neighboring elements
What are the default width and height of a block-level element?
Width is 100% and height is auto.
What are the default width and height of an inline element?
Width is auto and height is auto.
What is the difference between an ordered list and an unordered list in HTML?
An ordered list uses numbers and an unordered list uses bullet points.
Is an HTML list a block element or an inline element?
Its a block element.
What HTML tag is used to link to another website?
the anchor tag aka the a tag.
What is an absolute URL?
An absolute URL links a url that is on a different website. and is the full web address starting with the http
What is a relative URL?
a relative URL links a webpage on the same website and doesn’t need the full web address.
How do you indicate the relative link to a parent directory?
../index.html
How do you indicate the relative link to a child directory?
the name of the directory/file
How do you indicate the relative link to a grand parent directory?
../../index.html
How do you indicate the relative link to the same directory?
index.html/
What is the purpose of an HTML form element?
Forms allow you to collect information from different visitors to your site.
Give five examples of form control elements.
radio, submit, text, button, checkbox
Give three examples of type attributes for HTML <a></a> elements.
checkbox email textbox
Is an HTML input element a block or inline element?
inline element
What are the six primary HTML elements for creating tables?
table, tr, th, thead, tbody, td
What purpose do the thead and tbody elements serve?
Body and head are additional elements that help screen reader seo and indexing
Give two examples of data that would lend itself well to being displayed in a table.
grades, sports statistics and basically anything that can go into an excel document.
What are the names of the individual pieces of a CSS rule?
rule set, selectors, declaration block, properties and values
In CSS, how do you select elements by their class attribute?
using the . before the attribute
In CSS, how do you select elements by their type?
you put them as a selector in the css ruleset
In CSS, how do you select an element by its id attribute?
using the # before the attribute
Name three different types of values you can use to specify colors in CSS.
hexadecimal notation, rgb function, color names and hsl
What css properties make up the box model?
border margin and padding
Which CSS property pushes boxes away from each other?
The margin
Which CSS property adds space between a box’s content and its border?
The padding
What is a pseudo-class?
Its a keyword added to a selector that specifies a special state of the selected element
What are CSS pseudo-classes useful for?
They can change the appearance of elements when a user interacts with them.
Name at least two units of type size in CSS.
Pixels percentages, and 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?
they’re block elements
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML element?
static
how does setting position: relative on an element affect the document flow?
It flows like a normal page would
How does setting position: absolute on an element affect the document flow?
It is taken out of normal flow and the other elements act like its not there
How does setting position: absolute on an element affect where it appears on the page?
it is taken out of normal flow and the other elements act like its not there
How do you constrain an absolutely positioned element to a containing block?
When the ancestor/parent elements have a position property explicitly defined if none are defined its attached to the viewport.
put a position thats not static on it.
What are the four box offset properties?
top bottom left right
Give two examples of media features that you can query in a @media rule.
min width and max width
Which HTML meta tag is used in mobile-responsive web pages?
viewport meta tag
What is abreakpointin responsive Web design?
Its the points at which a media query is introduced where if it wasn’t introduce the viewport would break.
What is the advantage of using a percentage (e.g.50%)widthinstead of a fixed (e.g.px)widthfor a “column” class in a responsive layout?
with percentages the layout adapts to the exact dimensions of the viewport’s width.
If you introduce CSS rules for a smallermin-widthafterthe styles for a largermin-widthin your style sheet, the CSS rules for thesmallermin-widthwill “win”. Why is that?
Because its already at its minimum width and source order says the latest property is stronger.
