HTML/CSS/JavaScript
Studied by 0 people
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/120
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
121 Terms
What is HTML?
The raw data that a webpage is built out of using elements which includes text, links, cards, lists, and buttons.
What is CSS?
Adds style to those plain elements and positions that information, gives it color, changes the font.
What are elements?
Pieces of content wrapped in opening and closing tags HTML tags. They are the building blocks that defines the structure of a webpage.
What must elements have?
An opening tag <> and closing tag </>
Describe each part of the following element:
<p> is the opening tag.
some text content represents content wrapped within the opening and closing tags.
</p> is the closing tag.
What is semantic HTML?
Using an element for its correct purpose.
What are void elements?
Elements that don't have a closing tag and are void of content like <img> and <br>.
What boilerplate?
Code with little to no alteration that is needed to run up a program.
What is the file called for a landing page for a website?
index.html
What does every HTML page start with?
A doctype declaration which tells the browser what version of HTML it should use to render the document.
<!DOCTYPE html>
What comes after the doctype element?
The root elements <html> and </html>
What attribute should you include with the <html> element?
The attribute lang=“en” which declares that the primary language of the content is English.
What comes after the <html> element and what is it used for?
The <head> element which is where meta-information about the webpage is placed, and things required for our webpages to render correctly.
What two elements should be included in the <head> </head> elements?
<meta charset="UTF-8"> to ensures the webpage displays special symbols and characters from different languages correctly.
<title>My First Webpage</title> the title element displays the name of the page in the browser tab. If not included, the title in the tab would be the name of the HTML file.
What comes after the <head> </head> elements?
The <body> </body> elements which contains the content displayed on the page.
What happens when you place text on a page using no elements?
The text will condense together.
What element is used to create paragraphs in HTML?
The <p> element. This will add a new line after each of our paragraphs.
How do you create headings in HTML?
Using the <h1> to <h6> elements. <h1> </h1> should be used for page headers while <h2> through <h6> should be used for section headers.
How do you bold text in HTML? Create an example of bold text in a paragraph.
Use the <strong> element.
How do you make text italic in HTML? Create an example using italic text in a paragraph.
Use the <em> element.
How do you make text smaller in HTML? Create an example in a paragraph.
Use the <small> element.
How do you highlight text in HTML? Create and example using the paragraph element.
Use the <mark> element.
What happens when you nest an element into another element?
You create a parent and child relationship between them. Elements within the same nested level are siblings.
Create an example of a parent element with two children that are siblings.
How do you create HTML elements? Create an example.
What is an unordered list and how do you create an unordered list? Create an example of an unordered list.
Unordered lists don’t have list items in any order. Unordered lists are created using the <ul> element, and each item within the list is created using the list item element <li>.
In an unordered list, how do you change the bullet for each list item?
Include the type attribute in the <ul> element and use the following:
circle
disc
square
What is an ordered list and how do you create an ordered list? Create an example of an ordered list.
Ordered lists have list items in a particular order. Ordered lists are created using the <ol> element. Each individual item in them is again created using the list item element <li>
In an ordered list, how do you change the number type for each list item?
Include the type attribute in the <ol> element and use the following:
a for lowercase letters
A for uppercase letters
i for lowercase Roman numerals
I for uppercase Roman numerals
Create an example of an ordered list with three list items that is nested into an unordered list with 3 items.
What are description lists? How do you create them? Create and show an example with three items.
Description lists are used to outline multiple terms and their descriptions, as in a glossary. We use the <dl> to create the list and use the description term element <dt> for the term and <dd> for the term.
How do you create a link to another website in HTML?
Use the <a> element. You must include the href attribute that contains the link.
Create an example of an <a> element that links to another website.
When linking to another page or website, how do link open a new tab instead of changing the existing tab?
Include the attribute target=”_blank” in the <a> element.
What does the attribute rel=”noopener” do in <a> element?
Ensures that a link opened in a new tab or window cannot interact with or access the original page for security purposes.
What is the rel attribute?
Describes the relation between the current page and linked page.
What are relative links?
Links to other pages within your website/program and include the file path to other pages relative to the page you are on.
Create an example of a relative link for accessing a page in the same directory of the HTML you are currently in.
Create an example of a relative link for accessing a page in a directory that is in the directory of the page you are currently on.
What does ./ mean in regards to relative links?
./ specifies to your code that it should start looking for the file/directory relative to the current directory.
How do you display images in HTML?
Using the <img> element with the src attribute that has the link to the image.
What attributes should be included with the <img> element?
The src attribute, the alt attribute for alternative text if the image fails to load, height and weight attributes to set the images proportions.
Create an example of an image element that shows an image from an external website with the alt text, and with a height and width of 300 pixels.
Create an example that displays an image from a directory that exists above from the directory you are currently in.
What is CSS made up of?
Rules with each rule being made up of a selector and list of declarations made up of property-value pairs.
What are selectors?
The HTML elements that CSS that rules are applied to.
What is the universal selector?
Selects every element in the entire document.
Show an example of the universal selector that applies the color purple.
What is the type selector?
Selects all elements of the given element type. The selector is just the element itself.
Show an example of a CSS rule being applied to all divs with the color white.
What is the class selector?
Select all elements with a given class. Uses a “.” at the beginning of the class.
What is a class?
An attribute of an HTML element that uses class=””
Create an example using the class selector that selects a div that contains some text. Turn the text red using a class selector.
How do you add multiple classes to a single class attribute? Create an example.
Use spaces in the class attribute.
<div> class="alert-text severe-alert" </div>
What is the ID selector?
Selects an element with an ID.
What is an ID?
An attribute that only applies to one element. When we use IDs we use # instead of a period.
Create an example of a id selector using a div with text. Apply the background red to the element.
Why should you try to avoid the ID attribute and relay on class attributes?
Using ID makes it more difficult to style elements in complex webpages that have lots of elements and classes.
What is the grouping selector?
Lets you group elements that share some of their property-key values. This is done using a comma separated list of elements in the selector.
Create a grouping selector for class read and unread. They should share the same color but each should have a different background color.
What are chaining selectors?
Lets you apply rules to elements that have multiple classes or that has a class and ID.
Create a chaining selector that has a container div with two children. One is a div and one is a <p>. The div child should have two classes as well as the <p> element. They should share one class and the second class be different. Create a rule that applies both shared classes the color red.
The rule to share color:
.subsection { border: 2px solid red; }
In the previous example, what are two ways you could apply a color to the div child? Create an example.
Create two rules that use the chaining selector. One for subsection header and subsection preview. Apply the color red for one and the color blue for the other.
Why cant you chain more than one type selector?
Because an element can’t be two different types at once. Chaining two type selectors like div and p would give us the selector divp, which wouldn’t work
What is the descendant combinator?
Lets you select an element in a selector based on if it has a certain ancestor element. Uses spaces. Something like “.ancestor .child” would select the child regardless of how deep the nesting is.
What would the following rule for the following HTML select?
Both the contents class in ancestor but not the content class that exists outside of ancestor.
What does the following rule do for the following HTML?
Applies the color blue to the child class even though class derp exists between class ancestor and class child.
Create an example of a rule that selects only direct children of an element that is nested only one level deep and applies the color blue.
Create a rule that sets the color and background color for a div.
What color formats can color properties accept?
Hexadecimal, RGB, and HSL?
How do you set the hexadecimal color value for a rule?
color: #1100ff
Sets the text color of the paragraph to a bright shade of blue using a hexadecimal color code (#1100ff). Format is # followed by six letter or number characters.
How do you set the rgb color value for a rule?
color: rgb(100, 0, 127);
Accepts integer or percentage values for red, green, and blue up to a 255 value.
How do you use the HSL color format for a rule?
color: hsl(15, 82%, 56%);
Hue (15) is the position on the color wheel (0–360).
Saturation (82%) is how intense or muted the color is (0% = grayscale, 100% = fully saturated).
Lightness (56%) is how light or dark the color is (0% = black, 100% = white).
How do you choose what font an element uses?
Using the font-family property. Can be a single value or a comma-separated list of values. If the font has spaces you must use quotes.
Provide an example of the font-family rule being applied to the body of an HTML element.
How do you change the font-size of an element?
Use the font-size property.
How do change the boldness of test in CSS?
Use the font-weight rule. The value can be the keyword bold or a number between 1 and 1000.
How do you align text in an element using CSS?
Use the text-align rule. Includes values left, center, and right.
Create an HTML file with a header saying “My First Example” and a text that says “This is a paragraph”. Have the entire background of the document be light blue, the header text white that is in the center of the document. The text be on the left side of the document in the font style of verdana with a size of 20 pixels. The back ground color of the text should be white.
Why should you always specify the actual height and width of an image using the HTML attributes with the CSS properties height and width being the desired size?
The browser uses the HTML height and width properties to reserve the space on the page before the actual image file loads and then uses the CSS properties to prevent the image from shifting the page.
How do you link a CSS file to an HTML document?
Use the link attribute in the <head> section.
What are relative and absolute units?
Absolute units are not relative to anything else and are generally to always be the same size. This includes px (pixels).
Relative length units are relative to something else. em, vh, vw, and rem relative units.
What is the default font-size for elements?
16px. The <body> element is 16px which all child elements inherit.
Is there a relationship between font size for a <p> element and its children?
The font size for a <p> element is inherited to all its children.
What is em?
A unit that's relative to the font size of the element (or its parent's font size for inherited properties).
1em = the current font size (16px=16px).
2em = twice the current font size (16px=32px).
0.5em = half the current font size(16px=8px).
What is vh and vw?
Units relative to the browsers viewport which is the portion of the page that is immediately visible to the user. Each integer in vh and vw correspond to one percentage point.
Viewport width is the width of the visible area of the browser window, measured in pixels.
25wh=25% of the Viewport Height
Viewport height is the height of the visible area of the browser window, measured in pixels.
15vh=15% of the Viewport Height
What is rem?
A relative unit that is relative to the font size of the root element <html> which is 16px. Use rem when you want consistent sizing across your page.
In the following image, what is the size in pixels for the fields in the .parent, .child, .grandchild class?
Create the HTML and CSS code for the following image. The first list uses a class that uses em relative unit for font-size while the second list uses rem for the font size.
Create this code using HTML and CSS.
All the boxes have a padding, border, and background color. The first box uses a width in pixels, the second box uses a width in vw, and the last box uses a width in em.
*width: 10em; in .em class is 160px since the font-size inherited from the parent .wrapper is 1em which is 16px (10*160=160).*
What are percentages in CSS used for?
They are units always relative to some other value. If you set an element's font-size as a percentage, it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.
Recreate the image. All the boxes have a color background, color border, padding, and margin. The first and third box have a width of 200 pixels. The 2 and 4 box have a width of 40%. The last two boxes have a purple border around them that’s 400 pixels in length.
The second pair of boxes are inside the wrapper. The box inside the wrapper that says “I am 40% wide” calculates its width from its parent <div> with the class called “wrapper” which is why it is smaller in terms of width to the other box.
What does “margin: 1em 0;” mean?
1em: applies to top and bottom margins.
0 applies to left and right margins.
Create the image. Hint: % is used for one of the elements in the code.
How do you set the opacity for an element?
Use the opacity property. Accepts a number between 0 (fully transparent) and 1 (fully opaque).
How do you set an image as the background of an HTML file?
Use the Background-image: url(“....”); property.
How do you control whether or not a background image in an HTML file repeats or not?
The background-repeat property controls if/how the background image repeats. Options include:
repeat: Tiles the image both horizontally and vertically (default)
no-repeat: Shows the image only once (as in your example)
repeat-x: Repeats only horizontally
repeat-y: Repeats only vertically
How do you control the position of a background image in an HTML document?
The background-position property specifies where the background image is positioned within the element. “bottom left” places the image at the bottom-left corner.
Keywords: top, bottom, left, right, center
Recreate the image in HTML and CSS. The background image should not repeat and should be positioned in the bottom left.
Note 
Flashcards (27)