HTML Flashcards
Where do you put non-visible content about the HTML document?
Inside the head tag holds all of the meta data that is describing the html document.
Where do you put visible content about the HTML document?
Inside the body tags
Also the tag inside the tags shows up in the browser tab.
Where do the head and body tags go in a valid HTML document?
Between the html tags.
What is the purpose of a declaration?
Communicates to the browser about what document type to expect.
Give five examples of HTML element tags.
”< p >< /p >
< h1 >< /h1 > through < h6 > h6 >< em >< / em>< img >”
What is the purpose of HTML attributes?
Attributes provide additional information about an element, and attach further information on the contents of an element.
Ex.
<p>Text Content</p>
“There is an opening tag for the p element with an attribute ‘class’ and its value ‘second paragraph.’
Give an example of an HTML entity (escape character).
HTML entities are to create special characters within html. Ex. & reg; ® ® "There is an html entity reg"
How do block-level elements affect the document flow?
Block-level elements take up the full width and height of a line. They do not allow any other element to share a space with them. 100% theirs. The flow is one element per line.
How do inline elements affect the document flow?
Inline elements can share a space with other elements. Therefore, they have more flow and only take up as much space on the line as needed.
What are the default width and height of a block-level element?
The full width and height of a line.
Ex.
“<div>Hi, I am in-block and I take up the whole ass line. I’m a bully because I do not share.
</div>”
What are the default width and height of an inline element?
Just the needed width of that element.
Ex.
“<p>I am a <span> element</span> and only take up the width of the word ‘element’ in this paragraph,</p>”
What is the difference between an ordered list and an unordered list in HTML?
"Ordered list is numbered. <ol></ol>
<h2>Ordered List Example</h2>
<ol>
<li>Learn to code.</li>
<li>Build projects.</li>
<li>Get a job.</li>
</ol>
Unordered List <ul></ul>
<h2>Unordered List Example</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>SQL</li>
<li>PHP</li>
</ul>"
Is an HTML list a block element or an inline element?
Block. They be taking up the whole line.
What HTML tag is used to link to another website?
Anchor tag
< a href=””>< /a>href=”https://disneyland.disney.go.com/”>Disneyland
What is an absolute URL?
An absolute URL links to another website from your document. The href attribute is set to the domain address.
<a>Google</a>
What is a relative URL?
Relative URL link to other pages within the same site, therefore does not need to have the domain name.
“<a> About </a>”
How do you indicate the relative link to a parent directory?
../ signifies going “up a level” into the parent directory
<a></a>
There is a relative URL pointing to the index.html within the parent directory</a>
How do you indicate the relative link to a child directory?
Stating the name of the .html
<a>
There is a relative URL pointing to the index.html
</a>
How do you indicate the relative link to a grand parent directory?
../../index.html
Going up two levels.
<a></a>
There is a relative URL pointing to the index.html within the parent directory within that parent directory
</a>
How do you indicate the relative link to the same directory?
Stating the name of the file name, uncommon syntax would have a “./index.html”
What is the purpose of an HTML form element?
Enables users to search forma and other functions online, interactive control and user entering data.
Give five examples of form control elements.
option. select. password, textarea, input, button,
Give three examples of type attributes for HTML elements
text="" password="" textarea="" a href ="" class="" id=""
Is an HTML element a block element or an inline element?
inline, they can be on the same line
What are the six primary HTML elements for creating tables?
table - assigns a table
thead- defines the titles for the table columns
tr- defines table row
th - table head defines content defined in thead container
tbody - defines body of the table
td -defines table data for row
ORDER AND STRUCTURE
What purpose do the thead and tbody elements serve?
thead defines the set of rows defining the head of the columns of the table
tbody encapsulates a set of table rows that comprise of the table body
Give two examples of data that would lend itself well to being displayed in a table.
Student grades, plane schedules
What are the names of the individual pieces of a CSS rule?
CSS Selector and decloration
In CSS, how do you select elements by their class attribute?
“.h2 {
}”
In CSS, how do you select elements by their type?
Simply state the element
head {
}
In CSS, how do you select an element by its id attribute
#body {
}Name three different types of values you can use to specify colors in CSS.
Hex codes #ee3e80
Color names color: DarkCyan
rgb(123, 432, 432)
What CSS properties make up the box model?
padding
margin
border
Which CSS property pushes boxes away from each other?
margin is outside of the border, therefore creates space between each element’s box
Which CSS property add space between a box’s content and its border?
padding is inside of the border
What is a pseudo-class?
allows user to change the appearance of the elements when a user is interacting with. A special state of the selected elements
What are CSS pseudo-classes useful for?
User interaction, makes the internet feel more real, helps focus in on where the user is on the page and their current activity
What CSS property controls the font used for the text inside an element?
FONT-FAMILY
The value of this property is the
name of the typeface you want
to use.
body {
font-family: Georgia, Times, serif;}
Name at least two units of type size in CSS.
Pixel, percentages and ems…use pixels
What is the default flex-direction of a flex container?
row
What is the default flex-wrap of a flex container?
no wrap
Why do two div elements “vertically stack” on one another by default?
divs are block elements and take up a full row, therefore with 2 blocks they will share no space and stack on top of each other
What is the default flex-direction of an element with display: flex?
row
What is the default value for the position property of HTML elements?
relative positioning - the elements affect the surrounding elements around them
How does setting position: relative on an element affect document flow?
it is in the flow, it affects the elements around them
How does setting position: relative on an element affect where it appears on the page?
it will be inserted where it is placed
How does setting position: absolute on an element affect document flow?
it does not affect the flow of a document
How does setting position: absolute on an element affect where it appears on the page?
it does not affect flow of a document and can be placed anywhere using offset properties
How do you constrain an absolutely positioned element to a containing block?
you place position: relative within its parent container to fix absolute into place
What are the four box offset properties?
top left right bottom
