D276 WEB DEVELOPMENT FOUNDATIONS

Action Attribute (attribute of

element)

defines the action to be performed when the form is submitted

Target Attribute (attribute of

element)

specifies where to display the response that is received after submitting the form

_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

_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

Method Attribute (attribute of

element)

specifies the HTTP method to be used when submitting the form data

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

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

Autocomplete Attribute (attribute of

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

Novalidate Attribute (attribute of

element)

When present, it specifies that the form-data (input) should not be validated when submitted

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

Elements (part of Chrome Developer Tools)

shows you the HTML used to build the page you're looking at, together with any inline CSS

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

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

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

Security (part of Chrome Developer Tools)

gives you basic security information, letting you view a site's HTTPS certificate and TLS status

Bootstrap

is one of the most popular free, open-source frameworks. It uses HTML, CSS and JavaScript to help a developer create responsive websites

Bootstrap components

Icons and Typography

Responsive design

is the main usage of Bootstrap. Using grids, columns, and containers helps the web developer create responsive pages

HTML5 element used to insert video onto a webpage

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 tag to specify the media file

type

Attribute used within the tag to specify the type of video (mp4, webm, ogg)

HTML5 element used to insert audio onto a webpage

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 tag to specify the media file

type

Attribute used within the tag to specify the type of audio (mp3, wav, ogg)

is used to embed a document hosted on another domain, such as YouTube or Google Maps. An iframe displays a webpage within a webpage

Vector

Graphics that use mathematical coordinates with lines, curves, and shapes to create images and specify colors

Bitmap

graphics that use small dots (usually thousands) to create images and specify colors

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

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

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

Simple selectors

select elements based on name, id, class

Combinator Selectors

select elements based on a specific relationship between them

Pseudo-class Selectors

select elements based on a certain state

Pseudo-elements selectors

select and style a part of an element

Attribute Selectors

select elements based on an attribute or attribute value

#id

Example: #firstname

Example description: Selects the element with id= "first name"

.class

Example: .intro

Example description: selects all elements with class="intro"

element.class

Example: p.intro

Example description: Selects only

elements with class="intro"

*

Example: *

Example: Selects all elements

element

Example: p

Example: Selects all

elements

element, element

Example: div, p

Example: Selects all elements and all

elements

Descendant selector (space)

matches all elements that are descendants of a specified elements

Child selector (>)

selects all elements that are the children of a specified element

Adjacent sibling selector (+)

is used to select an element that is directly after another specific element

General Sibling Selector (~)

selects all elements that are next siblings of a specified element

Equal Specificity

the latest rule wins- If the same rule is written twice into the external style sheet, then the latest rule wins

ID selector have ____ specificity than attribute selectors

higher

Contextual selectors are more specific than a single element selector

The embedded style sheet is closer to the element to be styled

A class selector beats any number of element selectors

a class selector such as .intro beats h1, p, div, etc

The universal selector (*) and inherited values have a specificity of 0

The universal selector (*) and inherited values are ignored

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

create a table row, which contains all the row's cells

create a new table cell containing table header information about the data. Usually the browser displays table headers centered with a bold font

opening and closing tags create a new table cell containing a table datum

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

XML Prolog

All XML elements must have a ___ tag

closing

____ tags are case sensitive

XML

____ Elements must be properly nested within each other

XML

XML Attribute Values must always be ____

Quoted

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

There are 5 pre-defined entity references in XML:

< < less than

> > greater than

& & ampersand

' ' apostrophe

" " quotation mark

White space is preserved in XML

XML does not truncate multiple white-spaces (HTML truncates multiple white-spaces to one single white-space)

An XML Element can contain

Text

Atributes

Other Elements

Or a mix of the above

Empty XML Elements

An element with no content is said to be empty. In XML, you can indicate an empty element like this: You can also use a so called self closing tag:

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

XML Elements are Extensible

XML elements can be extended to carry more information

If the padding property has 4 values

they cover top, right, bottom, left

If padding property has 3 values

they cover top, left and right, bottom

If padding property has 2 values

they cover top and bottom, and left and right

If padding property has 1 value

it is assigned to all 4 sides

@keyframes rule

the animation will gradually change from the current style to the new style at certain times

animation-duration property

defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur

animation-delay property

specifies a delay for the start of an animation

animation-iteration-count property

specifies the number of times an animation should run

animation-direction property

specifies whether an animation should be played forwards, backwards or in alternate cycles

Normal (animation-direction property)

The animation is played as normal (forwards). this is default

Reverse (animation-direction property)

The animation is played in reverse direction (backwards)

Alternate (animation-direction property)

The animation is played forwards first, then backwards

Alternate-reverse (animation-direction property)

The animation is played backwards first, then forwards

Animation-fill mode property

specifies a style for the target element when the animation is not playing

none (Animation-fill mode property)

Default value. Animation will not apply any styles to the element before or after it is executing

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)

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

both (Animation-fill mode property)

The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions.

W3C CSS Validation Service

can bused to check the correctness (validity) of CSS