HTML Flashcards
Where do you put non-visible content about the HTML document?
HTML Skeleton
Within the head tag/element.
Where do you put visible content about the HTML document?
HTML Skeleton
Within the body tag/element.
Where do the <head> and <body> tags go in a valid HTML document?
HTMLSkeleton
Within the html element, the head tag and then body tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>
What is the purpose of a <!DOCTYPE> declaration?
HTML Skeleton
It tells which version of the HTML document it will be in.
Give five examples of HTML element types.
HTML Syntax
HTML
Title
Body
Paragraph
Image
Heading
div
Give an example of an HTML entity (escape character).
HTML Syntax
& = &
“ = "
copy right symbol = ©
registered trademark symbol ®
TM = ™
duckett pg 194
What is the purpose of HTML attributes?
HTML Syntax
HTML attributes to provide additional information about the content of the element
How do block-level elements affect the document flow?
HTML Block and Inline
It will appear to start on a new line in the browser window
It takes up all horizontal space
How do inline elements affect the document flow?
HTML Block and Inline
Elements will always appear to continue on the same line as their neighboring elements
What are the default width and height of a block-level element?
HTML Block and Inline
Width: 100% of the contained parent space
Height: however much the content is available
What are the default width and height of an inline elements
HTML Block and Inline
Width and height of the content
What is the difference between an ordered list and an unordered list in HTML?
HTML List
Ordered list is created with the element <ol> specifying a type of numbering
An unordered list is created with <ul> specify the type of bullet points
Is an HTML list a block element or an inline element?
HTML List
block
What HTML tag is used to link to another website?
HTML Links
Links are created using the <a> element. Or anchor tag. You can specify the link suin the href attribute</a>
What is an absolute URL?
HTML Links
Link to other pages within the same websites.
What is a relative URL?
HTML Links
Browser address that leads to another computer system
How do you indicate the relative link to a parent directory?
HTML Relative Links
Use ../ to indicate the dolder above the current one, then follow it with the same file name.
How do you indicate the relative link to a grand parent directory?
HTML Relative Links
Use ../../ to indicate that you want to
How do you indicate the relative link to a child directory?
HTML Relative Links
Name of the directory
How do you indicate the relative link to the same directory?
HTML Relative Links
Exact name of the directory
What is the purpose of an HTML form element?
HTML Forms
Get information from user. It’s sent to a server. It’s a way of collecting info from user
Give five examples of form control elements.
HTML Forms
Input
Select
Label
Form
Option
Text area
Give three examples of type attribute values for HTML <input></input> elements.
HTML Forms
Radio
Submit
Time
Calendar
Date
Is an HTML <input></input> element a block element or an inline element?
HTML Forms
Inline element. That’s why we have to use <div>
What are the six primary HTML elements for creating tables?
HTML Tables
Table
Table Row
Table Data
Table Head
Table Body
Table Foot
What purpose do the thead and tbody elements serve?
HTML Tables
Help people who uses screen reader and allow for styling
Semantic elements
Give two examples of data that would lend itself well to being displayed in a table.
HTML Tables
Anything that goes into a spreadsheet
Sport stats, grading, stocks
What are the names of the individual pieces of a CSS rule?
CSS Syntax
Selector, declaration, and key value pairs
Name three different types of values you can use to specify colors in CSS.
CSS colors
Hexcode
RGB
HSL
What CSS properties make up the box model?
CSS Box Model
Padding
Margin
border
Which CSS property pushes boxes away from each other?
CSS Box Model
margin
Which CSS property add space between a box’s content and its border?
CSS Box Model
padding
What is a pseudo-class?
CSS-Pseudo-Classes
Allows some added functionality to the selector to the state or the position
What are CSS pseudo-classes useful for?
CSS-Pseudo-Classes
Improving for allowing us to the user access without using JS
Name two types of units that can be used to adjust font-size in CSS.
CSS-fonts
Pixels and rem, em vh, vw, ch
What CSS property controls the font used for the text inside an element?
CSS-fonts
Font family properties
What is the default flex-direction of a flex container?
CSS-flexbox
The default flex-direction of a flex container is row, so the pokemon cards should appear in a horizontal row automatically.
What is the default flex-wrap of a flex container?
CSS-flexbox
By default, flex items will all try to fit onto one line. Item will not wrap.
Why do two div elements “vertically stack” on one another by default?
CSS-layout-classes
Because they’re block level elements
What are the three primary components of a page layout? (Which helper classes do you need?)
CSS-layout-classes
Container
Row
column
What is the minimum number of columns that you should put in a row?
CSS-layout-classes
one
What is the purpose of a container?
CSS-layout-classes
It contains everything on the webpage.
What is the default value for the position property of HTML elements?
CSS-positioning
static
How does setting position: relative on an element affect document flow?
CSS-positioning
It doesn’t affect document flow,
How does setting position: relative on an element affect where it appears on the page?
CSS-positioning
There’s not change, we can change it with offset properties
How does setting position: absolute on an element affect document flow?
CSS-positioning
Remove from the normal document flow
How does setting position: absolute on an element affect where it appears on the page?
CSS-positioning
It won’t affect where it appear, but it can affect depending on where it has to position itself against
How do you constrain an absolutely positioned element to a containing block?
CSS-positioning
Set the contain clock to position relative or non-static position
CSS-positioning
