Web Dev Applications C777
Studied by 0 people
Call Kai
Learn
Practice Test
Spaced Repetition
Match
Flashcards
Knowt Play1/392
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
393 Terms
The Internet
physical collection of computer networks and the cables that link them
World Wide Web
software connection between all the webpages connected through hyperlinks and URLs
HTML is a
Markup Languge
What does it mean to use a universal markup language?
consistent application of a single markup language and adherence to standards followed by most browsers.
What benefits does Universal markup language have?
consistent user experience and cross-browser/device compatibility and accessibility
What is an API?
set of definitions that facilitate building websites or applications by helping two programming components communicate.
Media API purpose?
provides the control of audio and video player in web pages
Workers API purpose?
provides the background execution of small programs on the end user's machine
Web Storage API purpose?
provides a locally stored database
SSE API purpose?
allows use of server side events
<track> purpose?
optional child element used to set subtitles
Captions purpose?
For auditorily impared
Subtitles purpose?
For different languages or to read
Structure-based tags purpose?
Semantic tags that specifically designate their purpose relative to other elements, introduced with HTML5.
Defines the main content of the document body “<…>”
main
<section> purpose?
Defines portions or areas of a document as necessary. Can group other element types.
HTML tag for content that is related to or additional to the main article content
aside
What structural tag contains forum posts, company services, news articles, blogs, images, videos, social media posts.
article
What structural tag contains news feeds, ads, highlighted resource links, sidebars
aside
How is h1 to h6 indicated
largest to smallest
What tag to use for a numbered list?
<ol>
what tag to use for bullet points?
<ul>
What tags to use for a descriptive list?
<dl>, <dt>, and <dd>
What form tag creates a dropdown list?
select
What input attribute creates a box that only one can be clicked at a time?
type=”radio”
What input attribute creates boxes used alone or within a group of checkbox inputs. Any number of checkboxes can be selected at a time.
type=”checkbox”
<!Doctype> purpose?
tag used to define html version and/or what flavor was used to design the page
HTML Flavors purpose?
ensure backward compatibility, tells browser how to render the page.
Strict Flavor purpose?
The standard. Doesn’t allow use of depreciated elements, presentational elements, or frames.
Traditional Flavor purpose?
Allows use of depreciated or presentational elements, but no frames
Frameset Flavor purpose?
Allows the use of frames and depreciated or presentational elements
What is code validated against?
Standard in <!doctype> tag
A file starting with “<!DOCTYPE html>“ indicates what version of HTML?
HTML5
A file starting with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> indicates what version of HTML?
HTML4 with a transitional flavor
What are Syntax Errors
Spelling errors in code that might cause issues.
What are Logic Errors
Improperly written code
h1 { color:blue; } What is the selector?
h1
h1 { color:blue; } What is the property?
color
h1 { color:blue; } What is the value?
blue
h1 { color:blue; } What is the declaration?
{ color:blue; }
h1 { color:blue; font-size:12px; } What is the declaration block?
{ color:blue; font-size:12px; }
h1 { color:blue; font-size:12px; } What is the rule?
h1 { color:blue; font-size:12px; }
“#” purpose in HTML
Use to call an HTML element by its ID
“.” purpose in HTML
Use to call an HTML element by its class
“*” purpose in HTML
applies to all HTML elements
div p {color:yellow;} applies yellow color to
all p elements inside a div element
Normal Flow
HTML document with no CSS applied
Block elements
stacks vertically, cannot be next to other elements, fill entire page width by default, can have their width and height set
Inline elements
Stack horizontally, only take as much space as their content requires, can be next to other elements, cannot have height and width be set
What must you do first to position an element?
Set position to anything other than static
{ position: static; }
Element positioned according to document flow, not affected by top, bottom, left, right
{ position: relative; }
Positions element based on default static position. Elements are not removed from document flow and leave a “hole” where they used to be
{ position: fixed; }
keeps elements in place in the viewport, regardless of scrolling and document flow
{ position: absolute; }
Positions element based on parent. Removed from document flow, leaving NO hole. (parent must not be set as static)
{ position: sticky; }
switches elements positions to either fixed for relative depending on how far as user has scrolled.
display: inline-block;
creates an inline element that can be height and width adjusted
{ display: flex }
creates a flex container
{ display: hidden }
removes an element from document flow
What must be specified to use float to position element
width
clear property purpose
return elements to stacking behavior after using float
z-index purpose?
controls how far back or how far forward an element should appear on the web page when elements overlap
What order does padding and margin short hand go in?
clockwise from the top
What margin value will center an object top and bottom, and auto center left and right margin
margin: 0 auto;
What must be set in order to center an element
width
How do left and right margins behave when near each other?
they add together
How do top and bottom margins behave when near each other?
they collapse (the largest wins)
How create a circle border?
Set element to have same width and height. Set border-radius to 50%
{ background-size: cover; }
stretches or cuts background over entire container
{ background-size: contain; }
Resizes the images so image is fully visible
The background-origin property has a value named padding-box.
Which corner of the padding edge does the padding-box value set the background relative to?
upper left
{ visibility; hidden }
browser only hides content, meaning an empty space will be left
What is wrong with User Agent Stylesheets?
They often have default styling that differs between browsers.
CSS to reset Default User Agent Stylesheets
* { margin: 0; padding: 0; }
Flexbox
layout method for a one-dimensional layout, with rows OR columns.
Flexbox always contains:
Flex container including flex items, and the CSS display:flex
flex-direction
specifies the display direction of flex items in the flex container
flex-wrap
specified whether flex items should wrap or not
flex-flow
shorthand property for setting flex-direction and flex-wrap
justify-content
used to justify items when they don’t use all available space on the main horizontal axis
align-items
used to align flex items when they don’t use all space on cross axis (vertically)
align-content
used to align flex lines
Two properties set to center a flex item:
Justify-content and align-items
Grid Layout
layout system for a two-dimensional layout, with rows AND columns.
Grid Layout must contain:
Grid container and items, and the CSS display:grid
grid-column-start
specifies where to start a grid item
grid-column-end
specifies where to end a grid item
What is grid-column shorthand for?
grid-column-start and grid-column-end
grid-area shorthand for:
row start, column start, row end, column end
grid-template-areas
layout and size grid areas by name
fr
stands for fraction
{ font: … }
shorthand property for font properties
font-style
used to specify italic text
font-family
used to specify the font of a text
font-weight
specify the boldness of a font
font-variant
specifies small caps, etc.
Web Safe Font
fonts that are universally installed across all browsers and devices and should work fine.
How to add google font:
add a style sheet link in the <head> and then refer to the font in the CSS.
@font-face
used to access fonts from a remote server that have been manually stored
color
used to set the color of text
text-decoration-line
used to add overline, line-through, and underline