Web Dev Applications C777
Studied by 0 people
Knowt Play
Learn
Practice Test
Spaced Repetition
Match
Flashcards1/331
There's no tags or description
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced |
|---|
No study sessions yet.
332 Terms
The Internet
a 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
Markup language that includes a series of tags (defined by W3C) in a file that are displayed as elements in a web browser.
HTML5
provided important upgrades; videos, audio, responsive elements, and dynamic graphs without flash or third-party tools, structure-based tags, SVG, accessibility features, scatterplot positioning of elements, offline access, drag-and-drop, geolocation, and more.
Universal markup language
consistent application of a single markup language and adherence to standards followed by most browsers.
What does Universal markup language ensure?
consistent user experience, better code, and cross browser and device compatibility and accessibility
API
set of definitions that facilitate building websites or applications by helping two programming components communicate.
Media API
provides the control of audio and video player in web pages
Workers API
provides the background execution of small programs on the end user's machine
Web Storage API
provides a locally stored database
SSE API
allows use of server side events
<track>
optional child element used to set subtitles
Captions
For auditorily impared
Subtitles
For different languages or to read
Structure-based tags
Semantic tags that specifically designate their purpose relative to other elements, introduced with HTML5.
<main>
Defines the main content of the document body
<header>
Defines the top of a web page or a section of content.
<section>
Defines portions or areas of a document as necessary. Can group other element types.
<article>
Defines site content accompanying the main content
<aside>
Defines content that is related to but aside from or additional to the main article content
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>
<footer>
Defines the bottom of a web page or a section of content.
How is h1 to h6 indicated
Largest to smallest
What to use for a numbered list?
<ol>
what to use for bullet points?
<ul>
What 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>
tag used to define html version and/or what flavor was used to design the page
HTML Flavors
ensure backward compatibility, tells browser how to render the page.
Strict Flavor
The standard. Doesn’t allow use of depreciated elements, presentational elements, or frames.
Traditional Flavor
Allows use of depreciated or presentational elements, but no frames
Frameset Flavor
Allows the use of frames and depreciated or presentational elements
What is code validated against?
Standard declared 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
Syntax Errors
Spelling errors in code that might cause issues. Often can be ignored or fixed by the browser
Logic Errors
Improperly written code. Logical errors are not detected by browser.
h1 { color:blue; font-size:12px; } 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; }
Use to call an HTML element by its ID
#
Use to call an HTML element by its class
.
applies to all HTML elements
*
applies same style to all element in the group
,
div p {color:yellow;} applies yellow color to:
all <p> elements placed anywhere 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 elements relative to its 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 elements relative to its parent and removes it from document flow meaning all other elements will ignore it. (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
What does {clear: left;} do?
used to clear a left float
z-index
controls how far back or how far forward an element should appear on the web page when elements overlap Doesn’t work with static elements
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
left and right margins when near each other are:
added together
top and bottom margins when near each other are collapsed (the larger one win)
To create a circle boarder
Set element to have same width and height. Set border-radius to 50%
{ background-size:cover; }
stretches or cuts background to cover entire container
{ background-size:contain; }
Resizes the images and maintains aspect ratio so image is fully visible. Will scale image to greatest height and width that fits within specified area.
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
Center a flex item:
set Justify-content and align-items to center
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
grid-column
shorthand for grid-column-start and grid-column-end
.item1 { grid-column 1 / 4; } Where does item1 start and end?
starts at column 1 and ends at 4
grid-row
.item1 { grid-row 1 / span 2; }
First grid item is placed at grid-row 1 and let it span 2 rows total
grid-area shorthand for:
row start, column start, row end, column end
grid-template-areas
Use grid-area to assign names to grid items. They can then be referred to by the grid-template-areas property.
grid-template-columns
defines number of columns in grid layout, and can define the width of each column.
grid-template-rows
defines height of each row in grid layout.
fr
stands for fraction
Note 
Flashcards (27)