LFZ Module 1 Flashcards
Where do you put non-visible content about the HTML document?
Inside the head tags. It is a container for metadata, which is data about the html document used by browsers, search engines, and other web services.
Where do you put visible content about the HTML document?
Inside the body tags.
Where do the head andbodytags go in a valid HTML document?
After the !DOCTYPE tag and inside the html tags. Head on top and then body.
What is the purpose of a!DOCTYPE declaration?
To tell a browser which version of HTML the page is using. It helps render a page correctly.
Give five examples of HTML element tags.
body, h1, head, ol, and p.
What is the purpose of HTML attributes?
Attributes provide additional information about the element’s content. Specified in the start tag. Comes in name and value pairs (name=”value”).
Example: href, src and style.
Give an example of an HTML entity (escape character).
Characters used in and reserved in HTML code.
Example: Ampersand (&)
How do block-level elements affect the document flow?
Always starts on a new line in the browser.
Example: h1, p, ul, li
How do inline elements affect the document flow?
Inline elements always continue on the same line as their neighboring elements.
Example: a, b, em, img
What are the default width and height of a block-level element?
Takes up the full width available of its parent element (container), and vertical space is the height of its contents.
What are the default width and height of an inline element?
Only takes up as much width as necessary bounded by the tags defining the element. Even if we set the width and height, it will only take up what is necessary for that content.
What is the difference between an ordered list and an unordered list in HTML?
Ordered Lists (ol) are lists that are numbered in order. Example: Steps for a recipe
Unordered Lists (ul) are lists that begin with a bullet point and not in a particular order. Example: Ingredients for a recipe
Is an HTML list a block element or an inline element?
Block Element, because each list item starts on a new line.
What HTML tag is used to link to another website?
The a (anchor) element.
What is an absolute URL (Uniform Resource Locator)?
It is the URL (web address) of the value for the href attribute when linking to other websites.
What is a relative URL (Uniform Resource Locator?
A shorthand to link to other pages on the same website. If all the pages are in the same folder, then the href value is the name of the file. No need to include domain name.
Example: href=”index.html”, href=”contact.html”
How do you indicate the relative link to a parent directory?
../
Example: ../index.html
How do you indicate the relative link to a child directory?
Name of child folder followed by a forward slash then the file name.
Example: music/listings.html
How do you indicate the relative link to a grand parent directory?
../ ../ to go up two folders followed by the file name.
Example: ../../index.html
How do you indicate the relative link to the same directory?
./
OR Just use the file name, nothing else.
Example: review.html
What is the purpose of an HTML form element?
To collect information/user data from visitors to the site. Also, for searching, registering, shopping online, signing up newsletters or mailing lists.
Give five examples of form control elements.
”, , , and “
Give three examples oftypeattributes for HTML”“elements.
type=text, type=password and type=email
Is an HTMLelement a block element or an inline element?
Inline element, because it continues on the same line.
What are the six primary HTML elements for creating tables?
table: used to create a table, tr (table row): indicates the start of each row, td (table data): table cell, th (table heading): use scope attribute row/col, thead and tbody.
What purpose do thetheadandtbodyelements serve
thead: Defines a set of rows defining the head of the columns of the table. The headings of the table go in here.
tbody: Groups a set of table rows inside the body of an html table.
Semantic meaning
Divide the page up
It also helps people who use screen readers and allows you to style these sections in a different manner than the rest of the table.
Give two examples of data that would lend itself well to being displayed in a table.
Inventory management and to keep track of home finances.
What are the names of the individual pieces of a CSS rule?
Selector: indicates which element the rule applies to
Declaration: indicates how the elements referred to in the selector should be styled. Inside the declaration is the Property and Value.
Example: P {Font-family: Arial;}
In CSS, how do you select elements by theirclassattribute?
Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol.
Example: .title { }
In CSS, how do you select elements by their type?
Matches element names.
Example: h2, h3, h3 { }
In CSS, how do you select an element by itsidattribute?
Matches an element whose id attribute has a value that matches the one specified after the hash symbol.
Example: #introduction { }
Name three different types of values you can use to specify colors in CSS.
color - foreground color (text)
background-color
opacity - can specify the opacity of an element and any of its child elements. (value between 0.0-1.0)
What CSS properties make up the box model?
margin, padding, border
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?
Allows us to change the appearance of elements when a user is interacting with them.
What are CSS pseudo-classes useful for?
:hover - When a user has a mouse over a button, you can use the hover pseudo-class to change the color of the button.
:active - Applied when an element is being activated by user. Example: when a link is being clicked, it will change color.
:focus - Applied when an element has focus. Example: when cursor is over a form input, it is ready to accept typing.
**order: :link, :visited, :hover, :focus, :active
Name at least two units of type size in CSS.
Pixels (px) , Percentage (%) and ems (em).
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?
No wrap. Items will all try to fit onto one line.
Why do two div elements “vertically stack” on one another by default?
Because it is the default behavior of html block elements.
What is the default flex-direction of an element with display: flex?
Row
What is thedefaultvalue for thepositionproperty of HTML elements?
Static - Appears on a new line one after the other, vertically down the page.
How does settingposition: relativeon an element affect document flow?
Moves element from normal flow position shifting it to the top right bottom or left
How does settingposition: relativeon an element affect where it appears on the page?
They stay in the in the position they would be in normal flow. Can modify its final position. Can make it over lap other elements. This does not effect the position of other elements.
How does settingposition: absoluteon an element affect document flow?
Positions the element in relation to tis containing element. Taken out of the normal flow.
How does settingposition: absoluteon an element affect where it appears on the page?
Does not affect the position of any surrounding elements. The other elements ignore the space it would have taken up.
An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else.
How do you constrain an absolutely positioned element to a containing block?
Define the position property of ancestor.
What are the four box offset properties?
Top, right, bottom, left
What is the purpose of variables?
Where a script temporarily stores information to do its job. Represent values in your scripts that are likely to change
How do youdeclarea variable?
Var - keyword used to create a variable in js.
How do you initialize (assign a value to) a variable?
Must give it a name. (Identifier) should describe the kind of data the variable holds.
What characters are allowed in variable names?
It can contain letters, numbers, dollar sign ($), or an underscore (_). Note that you must not use a dash(-) or a period (.) in a variable name. Must begin with a letter $ or underscore.
What does it mean to say that variable names are “case sensitive”?
Variable add and Add would be different variable names because the case is different.
What is the purpose of a string?
Consists of letters / characters. Strings can be used when working with any kind of text. They are frequently used to add new content into a page and they can contain HTML markup.
What is the purpose of a number?
The numeric data type handles numbers.
What is the purpose of a boolean?
Boolean data types can have one of two values: true or false.
What does the=operator mean in JavaScript?
Assigned to
How do you update the value of a variable?
Take the variable name and assign it to another value.
What is the difference betweennullandundefined?
Null was made to intentionally be empty like saving a parking spot that will be filled later. Undefined is when there is a variable assigned but no value.
Why is it a good habit to include “labels” when you log values to the browser console?
Helps when debugging so you know what data you are dealing with.
Give five examples of JavaScript primitives.
Number, string, boolean, null, and undefined.
What data type is returned by an arithmetic operation?
Numeric
What is string concatenation?
The process of joining together two or more strings to create one new string.
What purpose(s) does the+plus operator serve in JavaScript?
Used to join the strings on either side of it.
What data type is returned by comparing two values (,===, etc)?
Boolean
What does the+=”plus-equals” operator do?
Addition assignment adds the value of the right operand to a variable and assigns the result to the variable.
What are objects used for?
To group together a set of variables and functions to create a model of something from the real world.
What are object properties?
In an object variables become known as properties. Tells us about the object and attached to the object.
Describe object literal notation.
Object is the curly braces and their contents stored in a variable. Properties come in key value pairs. Method is a formula inside of that object. Separate each property and method with a comma except last one.
