D276 WEB DEVELOPMENT FOUNDATIONS
There are 5 pre-defined entity references in XML:
< < less than > > greater than & & ampersand ' ' apostrophe " " quotation mark
POST (HTTP Method for Method Attribute)
- Appends the form data inside the body of the HTTP request (the submitted form data is not shown in the URL) - POST has no size limitations, and can be used to send large amounts of data. - Form submissions with POST cannot be bookmarked
GET (HTTP Method for Method Attribute)
-Appends the form data to the URL, in name/value pairs -NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!) -The length of a URL is limited (2048 characters) -Useful for form submissions where a user wants to bookmark the result -GET is good for non-secure data, like query strings in Google
XML Prolog
<?xml version="1.0" encoding="UTF-8"?>
<audio> element
<audio> HTML5 element used to insert audio onto a webpage <source> Element used to specify a media resource controls Attribute that allows the user to play, pause, and adjust audio settings src Attribute used within the <source> tag to specify the media file type Attribute used within the <source> tag to specify the type of audio (mp3, wav, ogg)
<video> element
<video> HTML5 element used to insert video onto a webpage <source> Element used to specify a media resource controls Attribute that allows the user to play, pause, and adjust audio settings src Attribute used within the <source> tag to specify the media file type Attribute used within the <source> tag to specify the type of video (mp4, webm, ogg)
XML Naming Rules
Element names are case-sensitive Must start with a letter or underscore Cannot start with the letters xml can contain letters, digits, hyphens, underscores, and periods, cannot contain spaces
#id
Example: #firstname Example description: Selects the element with id= "first name"
*
Example: * Example: Selects all elements
.class
Example: .intro Example description: selects all elements with class="intro"
element, element
Example: div, p Example: Selects all <d> elements and all <p> elements
element
Example: p Example: Selects all <p> elements
element.class
Example: p.intro Example description: Selects only <p> elements with class="intro"
Vector
Graphics that use mathematical coordinates with lines, curves, and shapes to create images and specify colors
Bootstrap components
Icons and Typography
Entity Reference
If you place a character like "<". inside an element, it will generate an error because the parser interprets it as the start of a new element. to avoid this error, replace the "<" with an entity reference
XML Attribute Values must always be ____
Quoted
An XML Element can contain
Text Atributes Other Elements Or a mix of the above
Normal (animation-direction property)
The animation is played as normal (forwards). this is default
Alternate-reverse (animation-direction property)
The animation is played backwards first, then forwards
Alternate (animation-direction property)
The animation is played forwards first, then backwards
Reverse (animation-direction property)
The animation is played in reverse direction (backwards)
both (Animation-fill mode property)
The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions.
backwards (Animation-fill mode property)
The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
forwards (Animation-fill mode property)
The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
Contextual selectors are more specific than a single element selector
The embedded style sheet is closer to the element to be styled
_top (a Target Attribute value)
The response id displayed in the full body of the window
framename (a Target Attribute value)
The response is displayed in a named iframe
_blank (a Target Attribute value)
The response is displayed in a new window or tab
_self (a Target Attribute value)
The response is displayed in the current window
_parent (a Target Attribute value)
The response is displayed in the parent frame
White space is preserved in XML
XML does not truncate multiple white-spaces (HTML truncates multiple white-spaces to one single white-space)
XML Elements are Extensible
XML elements can be extended to carry more information
animation-duration property
defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur
Action Attribute (attribute of <form> element)
defines the action to be performed when the form is submitted
Security (part of Chrome Developer Tools)
gives you basic security information, letting you view a site's HTTPS certificate and TLS status
Bitmap
graphics that use small dots (usually thousands) to create images and specify colors
ID selector have ____ specificity than attribute selectors
higher
Scalable Vector Graphics (SVG)
is a W3C-recommended language developed by various vendors including Adobe, Microsoft and sun. SVG uses XML to describe graphics and graphical applications. SVG allows you to create cross-platform animated movies
Document Object Model (DOM)
is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated
Bootstrap
is one of the most popular free, open-source frameworks. It uses HTML, CSS and JavaScript to help a developer create responsive websites
Responsive design
is the main usage of Bootstrap. Using grids, columns, and containers helps the web developer create responsive pages
<iframe> element
is used to embed a document hosted on another domain, such as YouTube or Google Maps. An iframe displays a webpage within a webpage
Adjacent sibling selector (+)
is used to select an element that is directly after another specific element
If padding property has 1 value
it is assigned to all 4 sides
Descendant selector (space)
matches all elements that are descendants of a specified elements
<td>
opening and closing tags create a new table cell containing a table datum
Pseudo-elements selectors
select and style a part of an element
Pseudo-class Selectors
select elements based on a certain state
Combinator Selectors
select elements based on a specific relationship between them
Attribute Selectors
select elements based on an attribute or attribute value
Simple selectors
select elements based on name, id, class
General Sibling Selector (~)
selects all elements that are next siblings of a specified element
Child selector (>)
selects all elements that are the children of a specified element
Application (part of Chrome Developer Tools)
shows what's in your browser storage: in-browser databases like Web SQL, local storage, and more. It also gives you granular control over your cookies
Sources (part of Chrome Developer Tools)
shows where all the files that were used to make the website are stored and lets you inspect them
Network (part of Chrome Developer Tools)
shows you all the files that are loading in the URL you're looking at
Elements (part of Chrome Developer Tools)
shows you the HTML used to build the page you're looking at, together with any inline CSS
animation-delay property
specifies a delay for the start of an animation
Animation-fill mode property
specifies a style for the target element when the animation is not playing
Method Attribute (attribute of <form> element)
specifies the HTTP method to be used when submitting the form data
animation-iteration-count property
specifies the number of times an animation should run
Target Attribute (attribute of <form> element)
specifies where to display the response that is received after submitting the form
Autocomplete Attribute (attribute of <form> element)
specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that user has enter before
animation-direction property
specifies whether an animation should be played forwards, backwards or in alternate cycles
@keyframes rule
the animation will gradually change from the current style to the new style at certain times
Equal Specificity
the latest rule wins- If the same rule is written twice into the external style sheet, then the latest rule wins
If padding property has 2 values
they cover top and bottom, and left and right
If padding property has 3 values
they cover top, left and right, bottom
If the padding property has 4 values
they cover top, right, bottom, left
ordered list tag
type="1" Numbers (default) type="A" Uppercase letters type="a" Lowercase letters type="I" Uppercase Roman numerals type="i" Lowercase Roman numerals
Empty XML Elements
An element with no content is said to be empty. In XML, you can indicate an empty element like this: <element></element> You can also use a so called self closing tag: <element/>
none (Animation-fill mode property)
Default value. Animation will not apply any styles to the element before or after it is executing
____ Elements must be properly nested within each other
XML
____ tags are case sensitive
XML
The universal selector (*) and inherited values have a specificity of 0
The universal selector (*) and inherited values are ignored
Image Transparency
Web-ready image file formats that support transparency are GIF, PNG and SVG. JPEG, BMP and TIFF formats do not support transpaency on the Web
Novalidate Attribute (attribute of <form> element)
When present, it specifies that the form-data (input) should not be validated when submitted
A class selector beats any number of element selectors
a class selector such as .intro beats h1, p, div, etc
XML
a markup language that you can use to structure and format any kind of data that have multiple purposes such as the following: Data storage Data retrieval Data mining Data processing, which may include content that will display on a web page
Image Map (Hot Spot)
an image that includes hyperlinks within specific areas of the image. These linked areas or hotspots, are defined by a set of coordinates
W3C CSS Validation Service
can bused to check the correctness (validity) of CSS
All XML elements must have a ___ tag
closing
<th>
create a new table cell containing table header information about the data. Usually the browser displays table headers centered with a bold font
<tr>
create a table row, which contains all the row's cells
Console (part of Chrome Developer Tools)
deals with JavaScript. It gives you information about interactive elements on a page. In Console, you can write JavaScript to interact with the web page you're viewing, and it also lets you write messages to yourself in the JavaScript of websites you're building, which then show up in Console to show that the JS was executed
