HTML Flashcards
Where do you put non-visible content about the HTML document?
In the ‘head’ element.
The head element is commonly used to articulate functionality or visual attributes of the document.
Where do you put visible content about the HTML document?
In the body.
Where do the & elements go in valid HTML documents?
They both go inside of the tag, and the tag is opened and closed before the body element begins.
Check this one
What is the purpose of an html document type declaration?
It allows the browser to know what type of document it is reading.
Give an example of Five HTML tags.
h2, img, b, i, u
What is the purpose of HTML attributes?
Attributes provide additional information about the contents of an element. They appear on the opening tag of the element. They have two parts, a name and a value.
https://trello.com/c/OnZ4vkfD/49-attributes
What is an HTML entity?
These are ‘reserved’ characters in HTML. They are a sequence of characters that are substituted with an actual character in their place.
How do block-level elements affect the document flow?
Some elements will always appear to start on a new line with the DOM renders. These are known as ‘block’ level elements.
The following are examples of ‘block-level’ elements.
h1,p,ul and li
So they affect the document flow by ‘breaking’ a line and starting a new one.
How do inline elements affect the document flow?
Some elements will be rendered on the same line that they are rendered on. Inline elements are an example of these.
<i> and <b> are an example of these. <del> also.</del></b></i>
i and b are examples of these. del, b are also examples.
What are the default width and height of a block-level element?
By default, a block-level element expands to a width of 100% of its parent container, whether it be the entire “body” element, a container element such as a div or something else.
What are the default width and height of an inline element?
They inherit from their parent the default width and height they are allowed to have (?)
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
What is the difference between an ordered list an an unordered list in HTML
The way they are articulated within the HTML itself. One of them is started as ul and the other is started as ul
Is an HTML list a block element or an inline element
An HTML list is a block element.
What HTML tag is used to link to another website?
the Anchor tag.
What is an absolute URL?
An absolute URL is a link to a ‘foreign’ address, or a different website.
If the URL route is routed to a similar address within the website, then it is a ‘relative’ reference, and the file route to that address is provided.
What is a relative URL?
A relative URL is a ‘local’ address, or the location of a file within the program.
The technical terminology for this would be, an address to a local ‘directory’ within the program.
If the URL is ‘Aboslute’, than it is a foreign address. That means it leads to a different set of files, or a directory that is not in the local repository.
Is the img element an inline element or a block level element?
The img tag is an inline element, that means it must be put within a parent block level element. Usually a div or a p.
How many types of relative links are there?
There are 5 types of relative links.
How do you link to a file that is in the same folder as the file you are currently working with?
you name the file. Without any sort of directory declaration.
How do you link to a file that is in a child folder?
for a child folder, use the name of the folder, followed by a forward slash with the name of the file.
How do you link to a grand child folder?
Use the name of the child folder, followed by a forward slash, and then use another forward slash with the name of the grand child folder.
How do you link to a file that is in a parent folder?
You link to a file that is in a parent folder by using a pair of dots “..” then follow those dots with a forward slash, plus the name of the file.
How do you link to a file that is in a grand parent folder?
You use a pair of dots followed by a forward slash, and then you use another pair of dots followed by a forward slash, and then you name the file in question that you wish to access.
What are the six primary HTML elements for creating tables?
(table creator). row creator. column creator (td stands for ‘table tada’, is used to represent the heading of either a column or a row, , tbody> and
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
pgs 126-132 and 135-136 Duckett
What is the purpose of an HTML form element?
It is meant to receive data from the user. It receives this data in different shapes.
Give five examples of form control elements.
Text input, Password Input, Text Area, Radio Buttons, Checkboxes, Dropdown Boxes.
144-164 in Duckett
Give three examples of ‘type’ attributes for input elements.
size, type and name.
an additional one is ‘max length”
Is an HTML input element a block element or an inline element?
It is a block element.
What purpose does thead serve?
thead sits inside of the table element. The purpose it serves is it serves as a parent element for the headings of the document.
What purpose does tbody serve?
The body of the table should sit inside of the tbody element.
What are two types of data that ideally suited for being displayed in a table?
Calls that have taken place over different types of hardware in a call center, Census data for the population of the United States throughout its’ history.
Name three different types of values you can use to specify colors in CSS
RGB Values, HEX Codes, and Color Names
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container
By default, they will all try to fit on a single line.
What is intended by this question I believe, is row.
Name at least two unites of type size in CSS
This is not for font alone, but a measurement of units generally and can include fonts. It is a general unit of measurement for computer screens.,
pixels, percentages and EMS
What CSS property controls the font used for the text inside of an element
font-family
What is a psuedo-class
A CSS pseudo class is a keyword added to a selector that specifies a special state of the selected elements.
For example, :hover can be used to change a button’s color when the user’s pointer overs over it.
https: //trello.com/c/c3IuWQG4/70-psuedoclasses
https: //developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
What are CSS pseudo-classes useful for?
Psuedoclasses let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited - for example) the status of its content (:checked) or the position of the mouse (like we used in the exercise (:hover)
What is the syntax of a psuedo class?
They are named after the element they are applied to with a colon.
What CSS properties make up the box model?
What we mean by this, is the spacial relationship between the box, and the contents within it and around it.
There are three main ones: Border, Margin and Padding.
Border is the visual aid that allows the user to see and comprehend the box.
Margin is the ‘white-space’ that the programmer can program the computer to respect, so that the box in question is respected in relation to other objects so that the website is visually appealing and clear
Padding is the relationship between the contents within the box and the border.
Which CSS property pushes boxes away from eachother?
The margin property causes boxes to ‘push away’ from eachother, or to respect each others space.
Which CSS property adds space between a box’s content and its’ border?
the padding
When would you use flex basis over width
My understanding is, you would use this when you need to dynamically control the width of each inline item within a row.
“flex-basis doesn’t always apply to width. When flex-direction is row, flex-basis controls width. But when flex-direction is column, flex-basis controls height.”
Key Differences
Here are some important differences between flex-basis and width/height
flex-basis applies only to flex-items - flex containers (that aren’t also flex itmes) will ignore flex-basis but can use width and height.
- flex-basis works only on the PRIMARY AXIS of the flex container. For example, if you8’re in flex-=direction: column, the width property would be needed for sizing flex-items horizontally.
flex-basis has no effect on absolutely-positioned items. Width/height properties would be necessary to arrange their respective width and height.
https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
What is the default position property of HTML elements
It is static (as opposed to relative)
How does setting the position: relative on an element affeect document flow?
It does not, since that is already the dfefault setting from a document flow;
How does setting position: relative on an element affect where it affects where it appears on the page
Relative positioning:
This moves an element from the position it would be in normal flow. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
“Relative positioning moves an element in relation to where it would have been in normal flow.” - that is to say, you are affecting its position in relation to its DEFAULT position. So if it is a paragraph element, and it is the second paragagrpah in a sequence of three paragraphs, you are moving the SECOND paragraph from it’s normal position within its’ block.
How does setting position: absolute on an element affect document flow?
The document acts like it does not exist, it no longer affects the position of other documnets.
How large is an element?
It is only as large as it’s content, unless you say otherwise.
What is the purpose of a variable?
Javascript variables are for container data values. It also allows us to have persistent variables throughout time.
How do you declare a variable in javascript
var, let, const then the name of the variable, followed by an equal sign than the value of the variable.
var is the one I should plan on using throughout the course.
How do you initialize a variable in Javascript
Var, let or const.
What characters are allowed in a variable name?
The first character can be a dollar sign or an underscore, and any valid letter of the alphabet or an numeric character.
They are not allowed to start with a number.
What does it mean to say that a variable name is case sensitive?
A variable that starts with a capital and a variable that starts with a lower case will be different variables, and will store different values.
What does the = operator mean in javascript?
It is the assignment operator.
How do you update the value of a variable?
You use the assignment operator, and assign it a different value.
The difference between null and undefined is
In computer science, null is intentional, it represents an non-existent object or address.
Wheras Undefined is the default value of all explicitly declared variables where there is no value assigned to them.
“This is to say, the intention behind it.”
What is a label?
a CONSOLE.LOG label is simply a short string that describes the variable or value that is being logged,.
Why are console.log labels helpful?
They help the developer understand what value is currently being printed.
Give five examples of JavaScript Primitives
Strings, Numbers, Null, Undefined, Booleans
What is the purpose of a string
To store and manipulate text.
What is the purpose of a number
To store a number, or a value that corresponds to what the number indicates.
What makes a simple data type a simple data type?
Something called ‘prototypal inheritance.’
We’ll return to this later.
When do you want to use undefined?
Never. You never want to use undefined. It is good when you encounter it becuase you know you haver a typo.
What is string concatentation?
Is the process of combining strings.
What purpose does the (+ plus) serve in JavaScript?
It allows us to add two numbers together, or combine two strings.
What data type is returned by comparing two values?
true or false.
a boolean.
What does the += value do?
It adds the variable to the original value.
(JavaScript) What is a statement?
It is a body of work that has an outcome. It can be multiple lines of code, or it can be a single line of code.
What are the two ways to get or update the value of a property?
That is to say, within an object.
There are two ways to do this, through either dot notation, or bracket notation.
how do you remove a property from an object?
The delete keyword.
What are arrays used for?
Storing data.
Describe array literal notations
Square brackets, the values separated by commas.
what is the length property of an arrray
It is the number of items in an array.
How do you calculate the last index of an array
array.length - 1
What is a function?
It is a repeatable block of code that is designed to perform a specific set of actions or tasks on data.
Describe the parts of a function call
function name, parenthesis, and then any arguments that the function calls for.
When comparing them side by side, what is the difference between the call and the definition?
Function call, you make use of the code. IN the definition, you are articulating how the function call should behave when it is called/
What is the difference between a parameter and an arguement?
A parameter is part of a function definition, and a argument is used in a function call.
Why are function parameters useful?
They allow us to transform data, and give the function information that we want it to recieve.
What two effects does a return statement have on the behavior of a function?
It causes the function to ‘return’ something to the section of code that it was called in, and it causes the function to stop running.
Why do we log things to the console?
So we can learn what is going on and make sure wha twe thihnk is going on is actually happening.
What is a method?
It is a function stored within an object.
How is a method different from a function?
A method is attached to an object, whereas a function is independent.
With a method you have to say where it is coming from.
Is the return value of a function or method useful in every sitatuion?
No.
How many array methods are there?
There are a lot. Over twenty that I saw.
What is the purpose of an if statement?
Making decisions and telling the code what to do for us.
Is else required in order to use an if statement.
No it is not required.
Describe the syntax of an if statement.
if declaration - declaration of condition.
Three logical operators
Logical and, logical or, and logical not.
How do you compare two different expressions in the same statement?
Use the logical operators.
What is the purpose of a loop?
A loop instructs the code to run a specific number of times.
What is the purpose of a condition in a loop?
The condition lets you know when it is time for the loop to stop running.
What does ‘iteration’ mean in the context of a loop?
It is a single rotation of the loop.
When does the condition expression of a while loop get evaluted?
It executes before it.
When does the final expression of a for loop get evaluated?
After each rotation of the loop. It thereafter happens first each time each time the loop evaluates.
Besides a return statement, which statement will cause a function to stop running?
break.
What does the increment operator do?
It increments a variable by 1.
How do you iterate through the keys of an object?
a for in loop.
What are the four components of cascade?
They are “last Rule”, “Specificity”, Important” and “inheritance”
What does the term “source order” mean with respect to CSS?
“the order that your CSS rules are written in your stylesheet”
How is it possible for the styles of an element to be applied to its children as well without an additional CSS rule?
This is done through inheritance. You can force a lot of properties to inherit values from their parent elements by using ‘inherit’ for values of the properties.
Why is using !important considered bad practice?
This is because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the important rule are applied to the same element, the declaration with a greater specificity will be applied.
When is inheritance generally used?
It is generally a text related phenomenon.
What is a ‘model’
A model is a saved representation of the DOM that is stored in the computers memory.
Which “document” is being referred to in the phrase document object model?
They are the individual elements, classes and id’s that makje up
What does object refer to?
It refers to the nodes in the dom tree.
It is a group of objects, methods and data. They are a datatype.
What is the DOM tree?
It is the entire tree, each node, and all of its attributes.
What is a dom tree?
The backbone of an HTML document is tags.
According to the Document Object Model, every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well.
All these objects are accessible using Javascript, and we can use them to modify the page.
For example, document.body is the object representing the tag.
Give two examples of document objects that select individual elements from the dom.
querySelector(), getElementsByID()
Give example of an exmaple
querySelectorAll(), GetElementsByClass()
What is a node list?
It is merely a list of nodes.
What is the purpose of events and event handling?
The purpose of an event is to say to the browser, ‘this just happened’. The script can then respond to these events.
-to make the website more dynamic and help users understand what is happening./
What do square brackets ( [] ) mean in function and method syntax documentation?
They allow us to understand the ordering of different arguments within the context of a particular method, and whether or not it is a sine qua non of the function, or whether it is an optional arguement.
What is a callback function?
A “Callback” function is any function that is called by another function which takes the first function as a parameter.
A lot of times, a ‘callback’ function is called when something happens.
they are functions being passed around as data.
https://stackoverflow.com/questions/9596276/how-to-explain-callbacks-in-plain-english-how-are-they-different-from-calling-o/9652434#9652434
What object is passed into an event listener callback when the event fires?
A callback function. This is what causes the ‘event’ or action to be performed as a consequences of the actual occurence of a behavior within the browser. It is the ‘second’ event domino in the chain, not the first.
What is the event.target?
The event.target is the html ‘element’ that is targeted in order to trigger the object that triggers the event.
What is the difference between these two snippets of code?
element. addEventListener(‘click’, handleClick)
element. addEventListener(‘click’, handleClick())
In one case the function is being invoked, in the second it is not.
Should anything you do as a developer be done on faith?
No
What method of element objects lets you set up a function to be called when a specific type of event occurs?
Add event listener.
Do you want to call the function in the case of callback functions with event handlers?
No leave it to the browser to do so.
How do you update the CSS class attribute of an element using JavaScript?
You use the ‘className’ function - usually on a variable.
What is the className property of element objects?
A string value.
Is the event parameter of an event handler always useful
No it is not useful,
Why is storing information about a program in variables better than only storing it in the DOM?
Because the code is clearer when it is stored within the javascript itself, rather than accessing it within the dom.
also it is more efficient.
What does the transform property do? (CSS)
It allows you to transform or translate an element. CSS elements are rendered on a cartesian plane. This allows us to affect how it is rendered within the context of that cartesian plane.
Can image elements have children?
No, they cannot.
the transition property is shorthand for which four CSS properties?
‘transition-property’, ‘transition-duration’, ‘transition-timing-function’ and ‘transition-delay’
What event is fired when a user places their cursor in a form control.
It is the ‘focus’ function.