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?
Inside the html element.
What is the purpose of a !DOCTYPE declaration?
It tells the web browser what version of HTML the page is written in. Also helps the browser to render the page correctly
Give five examples of HTML element types.
head, body, p, h1, h2, title
What is the purpose of HTML attributes?
To provide additional information about HTML elements.
Give an example of an HTML entity (escape character).
© = &-copy or &-#174
How do block-level elements affect the document flow?
Its creates a block of text with a newline before and after the element.
How do inline elements affect the document flow?
They occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
What are the default width and height of a block-level element?
It occupies the entire horizontal space of its parent element, and vertical space equal to the height of its contents.
What are the default width and height of an inline element?
The content would define the width and the height of the element.
What is the difference between an ordered list and an unordered list in HTML?
Ordered list is a numbered list, Unordered list is a list that uses bullet points.
Is an HTML list a block element or an inline element?
A block element.
How do you indicate the relative link to a parent directory?
Use ../ to indicate the folder above the current one and then the file name.
How do you indicate the relative link to a child directory?
For a child folder, use the name of the child folder,
followed by a forward slash, then the file name.
How do you indicate the relative link to a grand parent directory?
Repeat the ../ to indicate that you want to go up
two folders (rather than one), then follow it with the
file name
How do you indicate the relative link to the same directory?
To link to a file in the same folder, just use the file
name.
What is the purpose of an HTML form element?
The form element inserts a component designed to contain controls that users can interact with to send information back to the server. Allows the user to do things as well
Give three examples of type attribute values for HTML input elements.
Text, Checkbox, Radio, Number
Give five examples of form control elements.
form, input, label, select, textarea, button, datalist
Is an HTML input element a block element or an inline element?
Inline-block: allows you to set up height and width.
What are the six primary HTML elements for creating tables?
Table, tr, td, th, thead, tbody, tfoot
What purpose do the thead and tbody elements serve?
They help to organize a long table.
Give two examples of data that would lend itself well to being displayed in a table.
Sports results, stock reports, travel timetables
What are the names of the individual pieces of a CSS rule?
Selector and Declaration? And then Property and the value? Internal CSS and External CSS?
In CSS, how do you select elements by their class attribute?
selector.class{}
In CSS, how do you select elements by their type?
Match the element names? Ex h1,h2,h3{}
In CSS, how do you select an element by its id attribute?
specific-id {} ex. #html {}
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, HSL, RGBA, HSLA
Name three different types of values you can use to specify colors in CSS.
RGB values, Hex codes, HSL, RGBA, HSLA
What CSS properties make up the box model?
Margin, Border, Padding, content
Which CSS property pushes boxes away from each other?
Margin
Which CSS property add space between a box’s content and its border?
Padding
What is a pseudo-class?
A selector that selects elements that are in a specific state
What are CSS pseudo-classes useful for?
They’re useful for changing styling of element based on state.
Name two types of units that can be used to adjust font-size in CSS.
Pixels, Percentages, REMS, 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 (left to right)
What is the default flex-wrap of a flex container?
no wrap
Why do two div elements “vertically stack” on one another by default?
They are block elements.
What is the default flex-direction of an element with display: flex?
Row
What is the className property of element objects?
It gets and sets the class attribute of the specified element.
How do you update the CSS class attribute of an element using JavaScript?
element.className = ‘new class name’
What is the textContent property of element objects?
It sets or returns the text content of the specified node, and all of its descendants.
How do you update the text within an element using JavaScript?
element.textContent = ‘new text’
Is the event parameter of an event listener callback always useful?
No
Would this assignment be simpler or more complicated if we didn’t use a variable to keep track of the number of clicks?
More difficult, incrementing the click counter lets us easily switch the elements classes.
Why is storing information about a program in variables better than only storing it in the DOM?
Its quicker and more efficient to pull information from variables.
What does the transform property do?
lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
Give four examples of CSS transform functions.
translate, scale, rotate, matrix
What is a breakpoint in responsive Web design?
The “point” at which a website’s content and design will adapt in a certain way in order to provide the best possible user experience. We can achieve this by using media queries.
What is the advantage of using a percentage (e.g. 50%) width instead of a fixed (e.g. px) width for a “column” class in a responsive layout?
Allows the content to adjust more efficiently by using the set percentage instead of px in responsive layout.
If you introduce CSS rules for a smaller min-width after the styles for a larger min-width in your style sheet, the CSS rules for the smaller min-width will “win”. Why is that?
Give two examples of media features that you can query in an @media rule.
width and height of the viewport.
width and height of the device.
orientation (is the tablet/phone in landscape or portrait mode?)
Which HTML meta tag is used in mobile-responsive web pages?
HTML Viewport Meta Tag
What is the default value for the position property of HTML elements?
Position: static? Normal flow
How does setting position: relative on an element affect document flow?
It doesn’t affect the position of surrounding elements. Relative positioning moves an element in relation to where it would have been in normal flow.
How does setting position: relative on an element affect where it appears on the page?
This moves an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed.
How does setting position: absolute on an element affect document flow?
It is taken out of normal flow, meaning that it does not affect the position of any surrounding elements (as they simply ignore the space it would have taken up).
How does setting position: absolute on an element affect where it appears on the page?
Absolutely positioned elements move as users scroll up and down the page
How do you constrain an absolutely positioned element to a containing block?
Set it inside of the element.
What are the four box offset properties?
top, right, bottom, left
