Montgomery College-HTML 5
Common CSS pseudo-classes
-:link -:visited -:active -:hover -:focus
Audio codecs
-AAC -FLAC -MP3 -Vorbis -WMA
Video codecs
-H.264 -Theora -VP8
Other properties for styling fonts
-font-style -font-weight -font-variant -line-height
background
Background color, image, repeat, attachment, and position values
fantasy
Fonts with decorative styling
Data cells
Cells that contain the data of the table.
</h1>
Closing tag for level-1 heading.
clear
Determines whether an element is cleared from flowing into the space left by a floated element. Possible values are left, right, both, and none (the default).
H. 264
Developed by the MPEG group in 1993. The goal of the Movie Picture Experts Group (MPEG) was to provide a single "all inclusive" codec that would support low bandwidth, low-CPU devices (think mobile phones); and high bandwidth, high-CPU devices (think your computer); and everything in between.
The jQuery Mobile website
Features all of the documentation, sample code, and downloads that you need for beginning your work with mobile devices.
How to debug a web page
Find the causes of the errors in the HTML or CSS code, make the corrections, and test again.
Element Nodes
HTML elements are stored in.
Protocol
HTTP
<h1>
Opening tag for level-1 heading
Event handler
JavaScript code that handles an event. Can script the DOM or use any of the methods of the objects in the DOM.
MP3/MPEG
MPEG video file. MIME type=video/mpeg
2 most common scripting languages
Microsoft IIS(Internet information services) and Apache
none
No bullet
User style sheet
Provides default rule sets for web pages.
Aptana error marker
Red circle that contains a white x at the start of the line.
2n
Same as even.
disc
Solid circle
For a simple animation
The keyframes are set automatically, but you can define them yourself.
option (value)
The value of the selected option that will be sent to the server for processing.
One of the primary uses of the developer tools
To inspect the styles that have been applied to an element, including how the styles in one style sheet have overridden inherited styles or the styles in another style sheet.
URL
Uniform resource locator
Text Nodes
Where the text is stored in.
To set the height and width for a text area
You should use the CSS height and width properties.
Date (MM/DD/YYYY)
[01]?\d\/[0-3]\d\/\d{4}
URL for the Cycle 2 website
http://jquery.malsup.com/cycle2/
CSS3 list of 147 keywords for colors that are supported by modern browsers
http://www.w3.org/TR/SVG/types.html#ColorKeywords
A popular search engine for stock photos
www.everystockphoto.com
Statistics that prove the need for Responsive Web Design
-More people in the world own smartphones than toothbrushes. -80% of all consumers do some shopping on smartphones. -70% of all mobile searches lead to some type of action within an hour. -40% of users will choose a different search result if the first one isn't mobile friendly. -45% of mobile users ages 18-29 use their smartphones for searches every day. -By 2017, 87% of connected devices will be smartphones and tablets.
What the normalize.css style sheet does
-Normalize.css is a style sheet that makes minor adjustments to browser defaults so all browsers render HTML elements the same way. -The normalize.css sheet sets the margins for the body of the document to zero so there's no space between the body and the edge of the browser window. -The normalize.css sheet also sets the default font family for the document to sans-serif. -Because the normalize.css style sheet resolves minor browser variations.
How to download normalize.css and save it to your website
-Open a browser, browse to the URL shown above, and click the Download button. -If CSS files are associated with a program that's installed on your computer, the normalize.css file will be opened in that program. Then, you can use that program to save the file to your website. -If CSS files aren't associated with a program on your computer, the normalize.css file will be displayed on a page within the browser. Then, you can right-click the page, choose Save As, and use the dialog box that's displayed to save the normalize.css file to your website. -Once you save the normalize.css file to your website, you can code a link element for it in each page. This element must be coded before the link elements for other style sheets.
The benefits of using fluid layouts
-Page layouts are proportional to the size of the screen, so they will fill the screen equally at all sizes. -They are scalable, so when new screen sizes become available in the future, they will automatically adapt to those new sizes. -They can be used without media queries in some cases, although that's not common.
Patterns for common entries
-Password (6+ alphanumeric) -Zip code (99999 or 99999-9999) -Phone number (999-999-9999) -Date (MM/DD/YYYY) -URL (starting with http:// or https://) -Credit card (9999-9999-9999-9999)
How to test a web page
-Run the page in all of the browsers that are likely to access your site. -Check the contents and appearance of the page to make sure it's correct in all browsers. -Click on all of the links to make sure they work properly.
How to start a new HTML file from any template
-Select the File=>New=>File command. In the New File dialog box that's displayed, select the folder that the new file should be stored in and enter a filename for the new file including its .html extension. -Still in the New File dialog box, click the Advanced button, check the Link to File in the File System box, click the Browse button, and select the template that you want to start the new file from. Then, click the Finish button.
How to start a new CSS file for a project from any template
-Select the File=>New=>File command. In the New File dialog box that's displayed, select the folder that the new file should be stored in, and enter a filename for the new file, including its .css extension. -Still in the New File dialog box, click the Advanced button, check the Link to File in the File System box, click the Browse button, and select the template that you want to start the new file from. Then, click the Finish button.
Standard techniques for developing the media queries for a responsive design
-Start with the queries for larger devices and then work your way down to smaller devices. -Develop the design for the smallest mobile devices and then work your way up to larger devices.
3 ways to run a web page that's on an intranet or your own computer
-Start your browser, and use the File=>Open or Open File command to open the file. Or, type the complete path and filename into the address bar, and press Enter. -Use the file explorer on your system to find the HTML file, and double-click on it. -If you're using Aptana, select the HTML file in the App Explorer and click the Run button to open the file in the most recently used browser. If you're using another text editor or IDE, look for a similar button or command.
Guidelines for cross-browser compatibility
-Test your web pages on all of the major browsers, including older versions of Internet Explorer that are still in common use. -Use the HTML5 and CSS3 features that are supported by most modern browsers. But use the workarounds so those features will work in all browsers still in use.
How website users use a web page
-They scan the page to find what they're looking for or a link to what they're looking for, and they don't like to scroll. If they get frustrated, they leave. -They often click on links and buttons with the hope of finding what they're looking for, and they frequently click on the Back button when they don't find it.
Attributes of the input element for a file upload control
-accept -multiple
Properties for working with animations
-animation -animation-name -animation-duration -animation-delay -animation-iteration-count -animation-timing-function -animation-direction
The attributes of the time element
-datetime -pubdate
CSS properties for printing
-display -page-break-before -page-break-after -page-break-inside -orphans -widows
The properties for floating images
-float-A keyword that determines how an image is floated. Possible values are left, right, and none. None is the default. -clear-A keyword that determines if an element that follows a floated element flows into the space left by the floated element. Possible values are left, right, both, and none. None is the default.
An attribute for the output element
-for
Attribute for the label element
-for
2 Methods of the document object
-getElementById(id) -write(string)
CSS properties for sizing an image
-height -width
Attributes for the progress and meter elements
-high -low -min -max -optimum -value
The attributes of the area elements that create the image maps
-href -shape -coords -alt
The 3 files that you need to include for jQuery Mobile applications
-jQuery JavaScript file -jQuery Mobile JavaScript file -jQuery Mobile CSS style sheet
Attributes for the date and time controls
-max -min
Typical n values
-odd -even -n -2n -3n -2n+1 -3n+1
Attributes of the optgroup and option elements
-optgroup (label) -option (value) -option (selected)
Attributes for using regular expressions
-pattern -title
Block elements for special types of text
-pre -blockquote -address
Common attributes for the audio and video elements
-src -poster -preload -autoplay -loop -muted -controls -width -height
2 Attributes of the script element
-src -type
Attributes for the source element
-src -type
The elements for coding the header, body, and footer
-thead -tbody -tfoot
Properties for working with 2D transformations
-transform -transform-origin
Properties for working with transitions
-transition -transition-property -transition-duration -transition-timing-function -transition-delay
Attributes of the input element for radio buttons and check boxes
-type -value -checked
Attribute for the color control
-value
Content properties for viewport metadata
-width -height -initial-scale -minimum-scale -maximum-scale -user-scalable
Popular websites for icons
-www.glyphicons.com -www.flaticon.com -www.iconarchive.com
Popular websites for stock photos
-www.istockphoto.com -www.gettyimages.com
Popular websites for images
-www.sxc.hu -www.freefoto.com -www.openphoto.net -www.google.com/imghp
decimal-leading-zero
01,02,03,04,05...
decimal
1, 2, 3, 4, 5...
How to build a custom jQuery UI library and download its files
1. From the home page, click the Download link in the navigation bar or the Custom Download button. That will take you to the Download Builder page. 2. Select or deselect the interactions, widgets, and effects until the checked boxes identify the components that you want in your download. 3. If you want to select a theme for the download, use the drop-down list at the bottom of the page. Or, if you want to build a custom theme, click on the link above the list. 4. After you select a theme or design a custom theme, click the Download button to download a zipped folder that contains the jQuery UI files.
Codec
(Derived from COmpressor/DECompressor or COder/DECoder) Software component that is used to code and decode the algorithms that are used for a media type. Also compresses the code so it will load faster in a browser and decompresses the code before it is played.
Common CSS3 pseudo-elements
-: :first-letter -: :first-line
3 popular image editors
-Adobe Photoshop CC (the industry standard for graphic artists) -Adobe Photoshop Elements (an inexpensive editor) -GIMP (a free editor)
SEO guidelines for the title tag
-Always code a title tag in the head section -The title should accurately describe the page's content, and it should include the one or two keywords that you want the page ranked for. -The title should be interesting enough to entice the reader to click on it when it's shown in the search results for a search engine. -The title should be unique for each page in your website -Limit the length of your titles to around 65 characters because most search engines don't display more than that in their results.
Creative commons licenses
-Attribution -Attribution No Derivatives -Attribution Non-Commercial Share Alike -Attribution Share Alike -Attribution Non-Commercial -Attribution Non-Commercial No Derivatives
Creative commons license conditions for images and icons
-Attribution -Share Alike -Non-commercial -No derivative works
Popular programs and tools for creating favicons
-Axialis Icon Workshop -Photoshop plugin -IrfanView -FavIcon from Pics
16 descriptive color names
-Black -Red -Yellow -Silver -Lime -Olive -White -Green -Purple -Aqua -Maroon -Teal -Gray -Blue -Fuchsia -Navy
How to edit a CSS file-Common coding errors
-Braces that aren't paired correctly -Missing semicolons -Misspelled property names -Id or class names that don't match the names used in the HTML.
Typical editing operations
-Change the size, image type, or quality of an image. -Control the animation of an animated GIF file. -Save an image with transparency or a matte. -Get the coordinates for an image map.
3 attributes of the <meta> tag
-Charset -Name -Content
Naming recommendations for your own folders and files
-Create names for folders and files that consist of lowercase letters, numbers, underscores or hyphens, and the period. -Use filenames that clearly indicate what a page contains. This is good for search engine optimization.
2 parts of an HTML5 document
-DOCTYPE declaration -Document tree
3 common uses of Javascript
-Data validation -Image swaps and rollovers -Accordions
Zak's recommendations for JavaScript websites
-Dynamic Drive (http://www.dynamicdrive.com) -The JavaScript Source (http://javascript.internet.com)
The DOM nodes that you commonly use in DOM scripting
-Element -Attr -Text
2 ways to access a web page on the internet
-Enter the URL of a web page into the browser's address bar. -Click on a link in the current web page to load the next web page.
2 ways to include the jQuery files
-Include the files from a Content Delivery Network (CDN) like Microsoft or jQuery. -Download and deploy the files on your web server. Then, include them from the server.
Why is jQuery becoming so popular?
-It's free -It lets you get more done in less time -All of its functions are cross-browser compatible
Benefits of having a separate website for mobile devices
-It's usually easier and less expensive to develop a separate mobile website than it is to re-engineer an established website with Responsive Web Design. -The mobile website can be simplified in a way that is appropriate for mobile devices, with less content and fewer pages.
Common media types for audio
-MP3 -AAC -Ogg -WMA
:mailto
Color control-value
A 6-digit hexadecimal number that indicates the initial color for the control. Must be preceded by the pound sign (#).
checked
A Boolean attribute that causes the control to be checked when the page is loaded. If a reset button is clicked, the control reverts to the checked state.
border
A border width, border style, and border color. The values are applied to all sides of the border.
To play a media type
A browser requires a media player for that type.
article
A composition like an article in the paper
IrfanView
A free image converter that you can download from www.irfranview.com.
FavIcon from Pics
A free image converter that you can run online at: www.html-kit.com/favicon/.
:visited
A link that has been visited. By default, purple, underlined text.
:link
A link that hasn't been visited. By default, blue, underlined text.
In the HTML for the table of contents
A main element is used as the container for the table of contents.
margin-top
A relative or absolute value that defines the space between the top border of an element and the top of the containing block or the bottom of the element above it.
upper-alpha
A, B, C, D, E...
Normal text field
Accepts input data from the user. Then, when the form is submitted, the name and value attributes are passed to the server.
Password field
Accepts input data that is submitted to the server, but the entry is obscured by bullets or asterisks.
Web Browsers
Access the web pages through programs
Widgets
Accordions, tabs, date pickers, and more.
drop-shadow(values)
Adds a drop shadow just as the box-shadow property does.
brightness(value)
Adjusts the brightness, from 0% (black) to 100% (unchanged). Numbers higher than 100% result in a brighter image.
CSS 1.0
Adopted in December 1996
HTML 4.0
Adopted in December 1997. Formalized new features that were used by web browsers and deprecated older features.
CSS 2.0
Adopted in May 1998
For images with useful content
Always code an alt attribute that describes the image (content).
Accessibility guideline
Always code the lang attribute on the html element to identify the language for the page
HTML Element
Always contains one head element that provides information about the document and one body element that provides the structure and content of the document
figure
An illustration, diagram, photo, code listing or the like that is referred to from the main content of the document
Image rollover
An image that get changed when the mouse hovers over it.
Fetch
An inexpensive program for Macintosh
FTP Voyager
An inexpensive program for Windows
CuteFTP
An inexpensive program for Windows and Macintosh
ID and class names
Are case sensitive, should start with a letter, and can include letters, numbers, underscores, hyphens, colons, and periods
Websites that are developed using Responsive Web Design
Are designed to adapt gracefully to the size of the screen on which the site is being displayed.
Check boxes
Are unrelated, so more than one check box can be checked at the same time.
Cross-browser compatibility
As a web developer, you want your webpages to work on as many different web browsers as possible.
You code a selector for an element with an id attribute
By coding a pound sign (#)
You can nest one table within another table
By coding a table element within a td element.
You can remove the indentation from the descriptions in a description list
By setting the left margin of the descriptions to zero.
transition-property
CSS property or properties that the transition is for. Use commas to separate multiple CSS properties.
Media queries
CSS3 feature that allows you to write conditional expressions directly within your CSS code. These conditional expressions can be used to query various properties of a device. Defined by a CSS3 @media selector. Are supported by all the current versions of all the major desktop browsers. That makes media queries easy to test in those browsers. Are also supported by all the current versions of all mobile browsers.
The HTML for a Button widget
Can be an input element with any of these type attributes: button, submit, reset, radio, or checkbox. It can also be an <a> element. When activated, jQuery UI styles a Button widget so it looks like a button.
Figure element
Can be used as a container for anything that is used as a figure.
Output elements-for
Can be used to associate an output element with one or more form controls.
The start attribute
Can be used to continue the numbering from one list to another.
<a> element
Can be used to create a link that loads another web page. The content of an <a> element can be text, an image, or text and an image.
Character entities
Can be used to display special characters in an HTML document. Many of the web pages you develop will require special characters such as copyright symbol and opening and closing "curly" quotes.
textarea field (textarea)
Can be used to get multi-line text entries.
scaleX(value)
Changes the element's width by scaling horizontally.
Disadvantage of using fluid column sizes
Changing the size of the columns may affect the typography or the appearance of the page.
To test a responsive design-IE
Click the Emulation tab and then select from the options that are available.
How to rerun a web page from a browser after you change its source code
Click the Reload or Refresh button in the browser.
To test a responsive design-Firefox
Click the Responsive Design Mode icon near the right side of the developer tools toolbar. Then, select a device size from the drop-down list at the top of the page, or drag the edges of the screen to create a custom size.
To test a responsive design-Chrome or Opera
Click the Toggle Device Mode icon near the left side of the developer tools toolbar. Then, select the device you want to emulate from the drop-down list at the top of the page. You can also drag the edges of the screen to create a custom size.
To jump to a placeholder
Code a link with its href attribute set to the value of the id attribute, preceded by the pound sign.
To code a placeholder
Code an id attribute for an element you want to jump to.
To jump to another placeholder on another page
Code the URL for the page followed by the id for the placeholder.
To create a file upload control
Code the input element with "file" as the type attribute. This control lets your users select the files they want to upload to your web server.
If the text for the link has to be short
Code the title attribute to clarify where the link is going.
Effects
Color animation, class transition, and more.
PNG files
Combine aspects of JPEG and GIF files
MPEG-4
Commonly found with either an .mp4 or .m4v extension. The MPEG-4 media type is loosely based on Apple's QuickTime (.mov) media type. Although movie trailers on Apple's website are still delivered in the older QuickTime .mov media type, iTunes uses the newer MPEG-4 media type for delivering video.
Flash video
Commonly found with either the .flv or .f4v extension. Developed by Adobe, was the most common media type for delivering video on the web during the last decade.
WHATWG (Web Hypertext Application Technology Working Group)
Community of people interested in evolving HTML and related technologies. www.whatwg.org
Clients
Computers, tablets, and mobile devices that use web applications
The footer for a table
Consist of more than one row.
The header for a table
Consist of more than one row.
The HTML for a Dialog widget
Consists of a div element that contains the contents for the dialog box.
Animated image
Consists of a series of images called frames. When you display an animated image, each frame is displayed for a preset amount of time, usually fractions of a second. Because of that, the image appears to be moving.
An Accordion widget
Consists of a top-level div element that contains one h3 element and one div element for each item in the accordion.
Web Application
Consists of clients, a web server, and a network.
The HTML for a Lightbox
Consists of img elements within <a> elements.
Empty tag
Consists of just one tag.
Internet
Consists of many Lans that have been connected at Internet Exchange Points (IXP).
A table
Consists of rows and columns that intersect at cells.
Aptana project
Consists of the folders and files for a complete web application.
CSS selector
Consists of the identifiers that are coded at the beginning of the rule set.
WAN (Wide area network)
Consists of two or more LANs that are connected by routers. The routers route information from one network to another.
Media type
Container for several components, including an encoded video track, one or more encoded audio tracks, and metadata.
HTML document
Contains HTML elements that define the content and structure of a web page
Head section
Contains elements that provide information about the document
A form
Contains one or more controls like text boxes, radio buttons, lists, or check boxes that can receive data.
The body of a table
Contains the data, consists of two or more rows.
Body section
Contains the elements that will be displayed in the web browser.
CDN
Content Delivery Network. Web server that hosts open-source software, and the Google, Microsoft, and jQuery websites are CDNs for getting the jQuery libraries.
dd
Creates a description in a description text. dd elements can contain block elements such as headings and paragraphs. You can use one or more dd elements to describe a dt element.
dl
Creates a description list that contains pairs of dt and dd elements.
li
Creates a list item for the list. Typically contains text, but it can also contain other inline elements such as links, as well as block elements such as paragraphs and other lists.
p
Creates a paragraph of text at 100% of the base font size.
dt
Creates a term in a description list. The dt element that creates a term in a description list can only contain text. You can describe two or more dt elements with a single dd element.
<ol>
Creates an ordered list
ol
Creates an ordered list. You can include the start attribute to specify the starting value for the list. The value represents the position in the list. The default is 1.
<ul>
Creates an unordered list
Excellent resource on working with 3D transformations
David DeSandro's GitHub post: http://desandro.github.io
column-rule
Defines a border between columns
td
Defines a data cell within a row.
th
Defines a header cell within a row.
tr
Defines a row.
table
Defines a table. The other elements for the table are coded within this element.
Optimum attribute
Defines the point at which the progress or meter element's value is considered the optimum value.
HTML5 number and range controls
Designed for numeric entries.
list box
Differs from a drop-down list in that two or more of its options are always displayed. Displays the number of options you specify on the size attribute. If the list contains more options than can be displayed at once, a scroll bar is added to the list box.
DOM
Document Object Model. Internal representation of the HTML elements on a web page. Hierarchical collection of nodes in the web browser's memory that represents the current web page.
Basic formatting for a Tabs widget
Done by the CSS style sheet for jQuery UI.
Form validation
Done by using required attributes, regular expressions, and the email, date, and number controls.
even
Every even child or element.
monospace
Fonts that use the same width for each character
cursive
Fonts with connected, flowing letters that look like handwriting.
Adobe Edge Web Fonts
Free Adobe service that lets you use any of the fonts in their current collection of more than 500 fonts. It is powered by Adobe's commercial Typekit engine so the fonts are delivered to your web pages quickly and with minimal downtime.
Google Web Fonts
Free Google service that lets you select fonts from hundreds of different font families. More than 670 font families.
FLAC
Free Loose Audio Codec. Free, open-source codec that has seen its popularity increase over the years due in large part to its high compression ratio. Audio files that use FLAC can have their file sizes reduced by up to 60%.
Photoshop plugin
Free software that you can use with Photoshop. To download, go to www.telegraphics.com.au/sw/.
jQuery UI (User Interface)
Free, open-source, JavaScript library that extends the use of the jQuery library by providing higher-level features that you can use with a minimum of code. To provide those features, the jQuery UI library uses the jQuery library.
To detect mobile devices and redirect them to the mobile versions of the sites
Full versions of the sites use either client-side or server-side code.
Document object-getElementById(id) method
Get the HTML element that has the id that's passed to it and returns that element.
To download jQuery Mobile
Go to its website www.jquerymobile.com. However, you won't need to do that if you include it from a CDN.
How to use the W3C CSS Validation Service
Go to the URL that follows, identify the file to be validated, and click the Check button: http://jigsaw.w3.org/css-validator/
How to use the W3C Markup Validation Service
Go to the URL that follows, identify the file to be validated, and click the Check button: http://validator.w3.org/
IDE (Integrated Development Environment)
Goes beyond text editing to provide other features for the development of websites.
tfoot
Groups one or more rows into a table footer.
thead
Groups one or more rows into a table header.
tbody
Groups the rows between the header and footer into a table body.
Semantic elements
HTML5 provided that you should use to structure the contents of a web page. Referred to as HTML5 semantics.
Hidden field
Has name and value attributes that are sent to the server when the form is submitted, but the field isn't displayed in the browser. However, if you view the source code for the web page, you can see the data for the hidden field.
Most HTML elements
Have an opening tag, content, and a closing tag. Each tag is coded within a set of brackets (<>).
circle
Hollow circle
upper-roman
I, II, III, IV, V...
accesskey
Identifies a keyboard key that can be used in combination with other keys to activate the control. The key combination depends on the operating system and browser.
headers
Identifies one or more header cells that describe the content of the cell.
Selector
Identifies the HTML element
Attributes
Identifies the element and define the way content in the element is displayed. Coded within the opening tag or within an empty tag, and each attribute consists of an attribute name, an equals sign, and the attribute value.
Core HTML attributes-lang
Identifies the language that the content of the element is written in.
Placeholder
Identifies the location you want the link to jump to. Then, you code a link that points to that placeholder. Were called anchors in HTML4
colspan
Identifies the number of columns that a cell will span. The default is 1.
rowspan
Identifies the number of rows that a cell will span. The default is 1.
The src attributes of the image elements
Identify the thumbnail images, and the href attributes of the <a> elements identify the larger images.
Containing block
If you specify a percent for the width property, the width of the content area for the block element is based on the width of the block that contains it.
radio button
In a group can be selected at one time. In a group must have the same name attribute but different values.
Content
Includes everything that appears between the opening and closing tags.
The auto keyword for the page-break properties
Indicates that a break may occur, but it doesn't have to occur, like it does when you use the always keyword.
animation-iteration-count
Infinite or the number of times the animation should repeat.
The default media type for a link element
Is "screen", so you don't have to specify that for a web page that's going to be displayed by a browser.
<a>
Is an inline element that creates a link that loads another web page.
If a script element is coded in the body of a document
It is replaced by the output of the JavaScript code.
If the clear property for the footer isn't set
Its content will flow into the space beside the floated elements.
Orientation
Landscape or portrait.
Pseudo-elements
Let you select a portion of text
MP3
MPEG audio file. MIME type=audio/mpeg or audio/x-mpeg MPEG-1 Audio Layer 3, which is commonly known as MP3, is one of the most widely-used media types for audio.
Special media players
May be required to play a media file in a browser. Often, media players require browser plugins for playing specific types of files.
The coordinates for an area are relative to the upper left corner of the image
Measured in pixels.
em (unit of measurement)
Name=ems Type=relative One em is equal to the font size for the current font.
%
Name=percent Type=relative A percent specifies a value relative to the current value.
autofocus
New to HTML5, a Boolean attribute that tells the browser to set the focus on the field when the page is loaded.
placeholder
New to HTML5, this attribute puts a default value or hint in the field. Unlike the value attribute, though, this value is removed when the user's cursor enters the control.
Node
Nodes in the DOM have a hierarchical structure based on how the HTML elements are nested inside each other.
audio and video elements-preload
One of the three possible values that tell the browser whether to preload any data: none (the default), metadata (only preload metadata like dimensions and track list) or auto (preload the entire media file).
background-position
One or two relative or absolute values or keywords that specify the initial horizontal and vertical positions of an image. Keywords are left, center, and right; top, center, and bottom. If a vertical position isnt specified, center is the default. If no position is specified, the default is to place the image at the top-left corner of the element.
border-style
One to four keywords that specify the styles for each side of a border. Possible values are dotted, dashed, solid, double, groove, ridge, inset, outset, and none. The default is none.
border-color
One to four values or keywords that specify the color for each side of a border. The default is the color of the element.
How to validate a CSS file from Aptana
Open the file. Then, issue the Command=>CSS=>Validate Selected CSS (W3C) command
ISP(Internet service provider)
Owns a WAN and leases access to its network. It connects its WAN to the rest of the Internet at one or more IXPs.
Document-relative path
Path is relative to the current document. Then, to go down one subfolder, you code the subfolder name followed by a slash. To go down two subfolders, you code a second subfolder name followed by another slash.
Page break
Point at which the printing skips from the bottom of one page to the top of the next page.
Portable Document Format File. MIME type=application/pdf
Pseudo-classes
Predefined classes that apply to specific conditions
name
Provides a name for the map. A name that can be referred to by client-side or server-side code.
Safari
Published by Apple and available on Macintosh and Windows.
Chrome
Published by Google and available on all major operating systems.
Firefox
Published by Mozilla Corporation and available on all major operating systems
Opera
Published by Opera software and available on all major operating systems.
Charset metadata
Required for HTML5 validation.
Web Servers
Returns the pages that are requested to the browser.
2n+1
Same as odd.
Tabs widget
Same general function as an Accordion widget, but it displays the contents of a panel when the related tab is clicked.
saturate(value)
Saturates the image. 0% results in an image that is completely saturated while 100% leaves the image unchanged.
JavaScript
Scripting language that is run by the JavaScript engine of a browser. As a result, the work is done on the client, not the server. Can modify the contents of a web page when the page is loaded or in response to a user action.
Attribute selector
Selects elements based on an attribute or attribute value. You code an element selector followed by the name of the attribute in brackets []. Consists of the universal selector followed by the attribute name in brackets.
To prevent the Dialog widget from appearing when the page loads
Set its display property to "none".
Thumbnail
Small version of an image that can be used to make downloading the image faster and to save space on a web page that contains multiple images.
square
Solid square
Padding
Space between the content area and a border
audio and video elements-autoplay
Starts playing the media as soon as the web page is loaded in the browser.
Document Tree
Starts with HTML element, which marks the beginning and end of the HTML code. Referred to as the root element of the document
audio and video elements-muted
Supported only by the video element, this attribute causes the video to begin playing (if autoplay is also coded) with the volume muted.
audio and video elements-poster
Supported only by the video element, this attribute provides the path to a static image to be displayed in place of the video file before it is played.
The avoid keyword for the page-break properties
Tells the browser to avoid a page break if it can.
regular expressions (title)
Text that is displayed in the tooltip when the mouse hovers over a field. This text is also displayed after the browser's error message.
If a script element in the head section includes an external JavaScript file
The JavaScript in the file runs as if it were coded in the script element.
:active
The active link (mouse button down but not released). By default, red, underlined text.
If you specify an absolute or relative size for the line-height property
The actual line height is inherited by child elements
When you float an image to the left
The block elements that follow it fill the space to the right of it.
If the required attribute is coded for a field
The browser checks to see whether the field is empty when the form is submitted. If it is, the browser displays its default error message for the field. But what this message says and how it's displayed are browser-dependent.
figcaption
The caption that identifies a figure
When a form is submitted to the server for processing
The data in the control is sent along with the HTTP request.
When you use the <a> element to display a media file
The file is displayed in its own web page and opened in the default player associated with the file type.
When you open an HtML file
The file is opened in a new tab and its outline is displayed in the Outline window.
If you don't specify the MIME type for a file
The file will be opened in the browser's default media player for the media type.
When you use the image rollover method
The first background image is applied to a block element like a <p> element. Then, the second background image is displayed when the mouse hovers over it.
:first-child
The first child of an element
: :first-letter
The first letter of an element.
: :first-line
The first line of an element.
If you use pixels
The font size will vary based on the screen resolution.
footer
The footer for a page
header
The header for a page
:last-child
The last child of an element
progress and meter elements-min
The lower limit of an element. Typically, this will be 0 to represent 0%.
main
The main content for a page
n
The nth child or element.
:only-child
The only child of an element
When a page break occurs within an element
The orphans and widows properties specify the minimum number of lines that can be printed at the bottom of the current page and the top of the next page.
progress and meter elements-high
The point at which the element's value is considered a high point.
Syntax
The rules when you code an HTML document and its elements.
Breakpoint
The screen size at which a media query is used to change the appearance of a page.
optgroup (label)
The text that's used to identify a group of options.
Embed element-width
The width of the file or the media player that's used.
Object element-width
The width of the file or the media player that's used.
When the elements that follow get past the height of the image and its top and bottom margins
They flow into the space below the element
required
This Boolean attribute indicates that a value is required for a field. In the form is submitted and the field is empty, the browser displays its default error message.
3-tier navigation menu
Tier 1 is the navigation bar. Tier 2 is the menus that drop down when the user hovers over an item in the navigation bar. And tier 3 is the submenus that are displayed to the left or right of a drop-down menu when the user hover the mouse over an item in the menu.
Type selector
To code a selector for an HTML element, you simply name the element.
You can use a meta element
To control the viewport settings for a device. You add this element within the head element of a page.
You can use the optgroup element
To define option groups, just as you can with drop-down lists.
You can use the option element
To define the options in a list box.
Comments
To describe or explain portions of code. Appears between the <!-- and --> characters. Can be coded in a single line or it can span two or more lines.
Server-Side Scripting Language
To develop dynamic web pages. ASP.NET, JSP or PHP.
You can use the target attribute of the <a> tag
To specify where the document referred to in a link should be loaded.
Cycle 2 plugin
Treats the children of a div element as the slides. Those children are usually img elements, but they can be div elements that contain both text and images.
GIF (Graphic Interchange Format)
Typically used for logos, small illustrations such as clip art, and animated images. Can represent up to 256 colors, doesn't lose information when compressed, and supports transparency on a single color. They can also be used for animated images that contain frames.
min-width, max-width, min-height, and max-height properties
Typically used to accommodate a change in font size.
To create an ico file
Use an icon editor, a program that converts an image to an ico file, or a web-based converter. You may also be able to find an icon on the Internet by searching for "web icons."
var
Used for computer variables, which are displayed in a monospaced font
Block elements for special types of text-address
Used for contact information for the developer or owner of a website.
kbd
Used for keyboard entries, which is displayed in a monospaced font
Block elements for special types of text-pre
Used for portion of code that are formatted with line breaks and spaces. Creates a block of preformatted text that preserves whitespace and its displayed in a monospaced font.
dfn
Used for special terms that can be defined elsewhere (definitions)
Autofocus attribute
Used for the first control in the form so the tab order doesn't need to be changed. Otherwise, the navigation links and sidebar links would come before the form controls in the tab order.
JPEG files
Used the JPG extension and are typically used for photographs and scans.
Relative URL
Used to refer to a file in another website. In coding, you base it on the current folder, which is the folder that contains the current page.
vertical-align property
Used with tables
text-indent and text-align properties
Used with text
A matte
Useful when a GIF or PNG image with a transparent color is displayed against a colored background.
Comment out
Useful when you're testing a web page and you want to temporarily disable a portion of a code that you're having trouble with.
You can change the numbering system that's used for an ordered list
Using the list-style-type property. The default is decimal.
Ogg
Usually found with the .ogg extension. Open-source, open-standard media type currently supported natively by Firefox, Chrome, and Opera. The video stream of an ogg media type is technically referred to as Theora. The audio stream of an ogg media type is referred to as Vorbis.
Navigation menu
Vertical list of links
To validate the CSS for a page
W3C CSS Validation Service. Works the same as W3C Markup Validation Service.
WAV
Waveform Audio File. MIME type=audio/x-wave
Context
Width of its containing element in pixels.
Target
Width of the element in pixels that you want to convert.
Document object-write(string) method
Writes the string.
Skype
skype:
Formula for converting pixels to percents
target/context * 100 =result
Phone
tel:
The attribute of the img element that identifies the related map element
usemap
Rate your browser you're using
www.html5test.com
If you want the heading of an article to span the columns
you can code the HTML for the heading before the article. Then, you don't have to use the column-span property.
Common CSS3 pseudo-classes
-:first-child -:last-child -:only-child
The syntax for the CSS3 structural pseudo-class selectors
-:nth-child(n) -:nth-last-child(n) -:nth-of-type(n) -:nth-last-of-type(n)
Elements that create ordered and unordered lists
-<ul> -<ol> -<li>
What the shiv does
-A Javascript shiv (or shim) forces older browsers, like Internet Explorer 7 and 8, to recognize the HTML5 semantic elements and let you apply CSS to these elements. -The effect of the shiv is to add the HTML5 semantic elements to the DOM in the browser and also to add a CSS rule set that tells the browser to treat the HTML5 elements instead of inline elements. -Because the use of the older IE browsers accounts for a small percentage of browser usage.
How to determine the specificity of a selector
-An id is the most specific -A class, attribute selector, or pseudo-class selector is less specific -An element or pseudo-element selector is least specific
Common coding errors
-An opening tag without a closing tag -Misspelled tag or attribute names -Quotation marks that aren't paired -Incorrect file references in link, img, or <a> elements
Recommendations for formatting printed pages
-Change the text color to black and the background color to white -Change text other than headings to a serif font to make the text easier to read when printed -Use a base font size that's easy to read when printed -Keep the line length of the text to 65 characters or fewer -Remove site navigations since it can't be used from a printed page -Remove as many images as possible, particularly Flash and animated images
Video support in current browsers
-Chrome Ogg Theora=Yes MP3=Yes WebM=Yes -IE Ogg Theora=No MP3=9.0+ WebM=No -Firefox Ogg Theora=Yes MP3=Yes WebM=Yes -Safari Ogg Theora=No MP3=Yes WebM=No -Opera Ogg Theora=Yes MP3=Yes WebM=Yes
Audio support in current browsers
-Chrome Ogg Vorbis=Yes MP3=Yes AAC=Yes WebM=Yes -IE Ogg Vorbis=No MP3=9.0+ AAC=No WebM=No -Firefox Ogg Vorbis=Yes MP3=Yes AAC=Yes WebM=Yes -Safari Ogg Vorbis=No MP3=Yes AAC=Yes WebM=No -Opera Ogg Vorbis=Yes MP3=Yes AAC=Yes WebM=Yes
How to import a font
-Copy the file for the font family into a folder for your website -In the CSS for the page, code a rule set for the @font-face selector. Use the font-family property to provide a name for the imported font family, and use the src property to locate the font file.
3 ways to test a responsive design
-Deploy your website to a server and then test it on each device or use a web-based tool like ProtoFluid to test it. -Use device emulators and browser simulators for the various devices and browsers you want to test. -Use the developer tools provided by most modern browsers.
What a media player does when it plays a video
-Determines the media type that the user is attempting to play -Determines whether it has the capability of decoding its video and audio streams -Decodes the video and displays it on the screen -Decodes the audio and sends it to the speakers -Interprets any metadata and makes it available
What jQuery offers
-Dozens of methods that make it easier to add JavaScript features to your web pages. -Methods that are testing for cross-browser compatibility.
How to select and use Adobe Edge Web Fonts
-Go to the Adobe Edge Web Fonts web page, and click "Get started". -Browse through the fonts until you find one that you like. Then, hover over it and choose the "Select this font" link. That displays a three-step procedure for using the font. -The first step is to visually verify that you've selected the right font. -The second step is to copy the script element that's provided so you can paste it into any web page that will use the font. This script element delivers a JavaScript file for the font. -The third step is to copy the font-family property that's provided so you can use it to apply the font to HTML elements.
How to select and use Google Web Fonts
-Go to the Google Web Fonts page and browse through the fonts until you find one that you like. You can also filter the fonts that are displayed by using the controls at the left side of the page. -To select a single font, click the Quick-use button. To select multiple fonts, click the Add to Collection button for each font and then click the Use button in the lower-right corner of the page. -Complete the four-step procedure for using the fonts, including selecting the styles and character sets you want to use, adding the link element that imports the font to the head section of each web page that will use the font, and using the Google Web Font name at the value for the font-family property of any elements you want to use that font.
Most popular search engines
-Google -Yahoo -Bing
Issues with JavaScript and jQuery codes
-Hard to figure out how to use it. -These sites often provide code that you embed in your HTM, but you can make your code more difficult to create and maintain.
Desktop browsers that support media queries
-IE 9 and later -Firefox 3.6 and later -Safari 4 and later -Opera 10 and later - Chrome 5 and later
What happens if you omit parts of a URL
-If you omit the protocol, the default of http:// will be used. -If you omit the filename, the default document name for the web server will be used. This is typically index.html, default.htm, or some variation.
How to use the jQuery UI documentation
-In the left sidebar, click on a widget name to display its documentation. -In the right sidebar, click on an example name to see a working example, then click on the View Source link to see the code for the example. -Click the API Documentation link to display information about the widget's options, methods, and events.
The image formats that are supported by most browsers
-JPEG (Joint Photographic Group) -GIF (Graphic Interchange Format) -PNG (Portable Network Graphics)
Guidelines for designing mobile web pages
-Keep your layout simple so the focus is on the content. One-column layouts typically work best. -Include only essential content. -Keep images small and to it minimum. -Avoid using Flash. Most mobile devices, including the iPhone, don't support it. -Include only the essential navigation in the header of the page. The other navigation should be part of the content for the page. -Make links and other elements large enough that the user can easily manipulate them. -Use relative measurements so the page looks good regardless of the scale.
Popular plugins for displaying images
-Lightbox= http://lokeshdhakar.com/projects/lightbox2/ -Fancybox=http://fancybox.net -Thickbox=http://jquery.com/demo/thickbox -Shadowbox.js=http://www.shadowbox-js.com
MIME types for identifying audio and video clips
-MP3 MIME type=audio/mp3 -Ogg Vorbis MIME type=audio/ogg -WebM MIME type=video/webm Codec=theora, vorbis -Ogg Theora MIME type=video/ogg Codec=theora, vorbis -Flash MIME type=application/x-shockwave-flash
Common media types for video
-MPEG-4 -Flash video -Ogg -WebM -ASF -AVI
2 cautions with jQuery plugins
-Make sure that you include a script element for jQuery and make sure that the script element for the plugin comes after it. Not doing one or the other is a common error. -Some plugins won't work with the latest version of jQuery. So if you have any problems with a plugin, check its documentation to see which version of jQuery it requires.
How to test your web pages in older versions of Internet Explorer
-One of the problems in testing different versions of Internet Explorer is that you can't install more than one version on a system at the same time. -The solution is to use the emulation tools that became available with Internet Explorer 9. These tools let you emulate several older versions of Internet Explorer.
How to validate an HTML file from Aptana
-Open the file and choose Commands=>HTML=>Validate Syntax(W3C) -At this writing, this command causes an error to occur due to a known bug. This should be corrected in the near future.
Guidelines for testing mobile web pages
-Test all pages on as many different mobile devices and in as many different mobile browsers as possible. -The best way to test mobile web pages is to deploy them to your web server and test them on the devices themselves. -When you can't test your pages on the devices themselves, you can use device emulators and browser simulators, web-based tools such as ProtoFluid, or the developer tools that come with most modern browsers.
Accessibility laws that you should be aware of
-The Americans with Disabilities Act(ADA) -Sections 504 and 508 of the federal Rehabilitation Act. -Section 255 of the Telecommunications Act of 1996.
How to use Chrome's developer tools
-To display the panel for the tools, press the F12 key. -To inspect the styles that have been applied to an element, click on the element in the Elements pane at the left side of the developer tools panel. Or, click on the inspect icon at the left of the toolbar for this panel, and then click on an element in the web page. -The styles that have been applied to the selected element are displayed in the Styles pane at the right side of the developer tools panel.
2 ways to open an HTML file that isn't in a project
-Use Aptana's Project Explorer to locate the file. Then, double-click on it. -Use the File=>Open File command
2 ways to redirect a user to the mobile version of the site
-Use JavaScript or jQuery to detect mobile devices and redirect them to the mobile version of the site. -Use a server-side scripting language such as PHP to detect mobile devices and redirect them to the mobile version of the site.
2 ways to provide web pages for a mobile device
-Use Responsive Web Design so the pages of a website will work on devices of all sizes, including mobile devices. -Develop a separate mobile version of the website that the use is redirected to when the browser for a mobile device tries to open the web page for the main site.
How to create a project for an existing website
-Use the File=>Import command or click the Import Project button in the App Explorer window to display the Import dialog box that's shown above. Then, expand the General category. selecting Existing Folder as New Project, and click the Next button to display the Promote to Project dialog box. -Browse to the folder for the project, enter a project name, and click on the Finish button.
How to create a project for a new website
-Use the File=>New=>Web Project command to display the New Web Project dialog box. Or, in the App Explorer window, click the Create Project button, select Web Project in the dialog box that's displayed, and click the Next button to display the New Web Project dialog box. -In the New Web Project dialog box, choose a template, click the Next button, enter a project name, and click the Finish button.
2 ways to access a web page on your own server or computer
-Use the File=>Open command with Internet Explorer or the File=>Open File command with Firefox. With Chrome, use your file explorer to locate the file and then drag it into the browser window -Use the features of your text editor or IDE.
If more than one rule set at a cascade level it applied to an element...
-Use the rule set with the highest specificity. -If the specificity is the same for two or more rule sets in a group, use the rule set that's specified last.
Types of disabilities
-Visual -Hearing -Motor -Cognitive
4 types of features provided by jQuery UI
-Widgets -Themes -Interactions -Effects
The 3 components of Responsive Web Design (RWD)
-You use a fluid layout to adjust the width of a web page and its structural elements to the size of the screen. -You use media queries to adjust the appearance of a web page to different device sizes. -You use scalable images so the size of an image is scaled to the size of the element that contains it.
The HTML5 attributes for data validation
-autocomplete -required -novalidate
The filter methods
-blur(value) -brightness(value) -contrast(value) -drop-shadow(values) -grayscale(value) -hue-rotate(angle) -invert(value) -opacity(value) -saturate(value) -sepia(value)
Common properties for formatting table, tr, th, and td elements
-border-collapse -border-spacing -padding -text-align -vertical-align
Popular plugins for slide shows, carousels, and galleries
-bxSlider=http://bxslider.com -Malsup jQuery Cycle 2=http://jquery.malsup.com/cycle2 -jCarousel=http://sorgalla.com/jcarousel -Nivo Slider=http://nivo.dev7studios.com -Galleria=http://galleria.io
Attributes that can be for accessibility
-caption -headers -scope
Attributes of the <th> and <td> tags for merging cells
-colspan -rowspan
The main structural elements in sequence
-header -nav -aside -article -footer
Core HTML attributes
-id -class -title -lang
2 jQuery libraries that you need
-jQuery -jQuery Mobile
Websites for finding jQuery plugins
-jQuery Plugin Repository=http://plugins.jquery.com -jQuery Plugins=http://www.jqueryplugins.com -Google Code=http://code.google.com -GitHub=http://github.com -Sourceforge=http://sourceforge.net
Attributes for the number and range controls
-min -max -step
Attributes of the form element
-name -action -method -target
Attributes of the param element
-name -value
The object and param elements
-object -param
Methods for 2D transforms
-rotate(angle) -rotateX(angle) -rotateY(angle) -scaleX(value) -scaleY(value) -scale(x-value, y-value) -skewX(angle) -skewY(angle) -skew(x-angle, y-angle) -translateX(value) -translateY(value) -translate(x-value, y-value) -matrix(a,b,c,d,e,f)
Attributes of the textarea element
-rows -cols -wrap
Attributes of the select element for list boxes
-size -multiple
Attributes of the <img> element
-src -alt -height -width
Attributes of the <img> file
-src -alt -height -width
The attributes for setting the tab order and access keys
-tabindex -accesskey
Common elements or coding tables
-table -tr -th -td
3 most common text fields
-text -password -hidden
Properties for indenting, aligning, and decorating text
-text-indent -text-align -vertical align -text-decoration
Other HTML5 semantic elements
-time -figure -figcaption
Attributes of the object element
-type -data -width -height
Attributes common to most input elements
-type -name -disabled -readonly
Attributes of the embed element
-type -src -width -height
Attributes of the input element for text fields
-type -value -maxlength -size -autofocus -placeholder
Attributes of the input element for buttons and for the button element
-type -value -src -alt -height -width
3 properties that can be used for scripting the DOM
-value -firstChild -nodeValue
Attributes for the option elements within a datalist element
-value -label
If you specify just a number for the line-height property
The font size is multiplied by that value to determine the line height, and the multiplier is inherited by child elements.
If you specify a percent for the height property
The height of the content area for the block element is based on the height of the containign block. The height of the containing block must be specified explicitly. Otherwise, "auto" is substituted for the percent.
Device-height
The height of the display area of the device.
Embed element-height
The height of the file or the media player that's used.
Object element-height
The height of the file or the media player that's used.
Viewport metadata-height
The height of the viewport specified in pixels. You can also use the device-height keyword to indicate that the viewport should be as tall as the screen.
If you use pixels, points, or ems to specify the value for the vertical-align property
The image is raised if the value is positive and lowered if it's negative.
If you specify a percent
The image is raised or lowered based on the percentage of the line height.
Cascade order
The important rules in a user style sheet override the important rules in a web page, but the normal rules in a web page override the normal rules in a web page.
If you specify a bottom margin or one element and a top margin for the element that follows in the HTML
The margins are collapsed, which means that only the larger margin is applied
maxlength
The maximum number of characters that the user can enter in the field.
Date and time controls-max
The maximum value that may be entered within a date or time field.
Number and range controls-max
The maximum value that may be entered.
In the form element that contains the file upload control
The method attribute must be "post", and you must code the enctype attribute.
Date and time controls-min
The minimum value that may be entered within a date or time field.
Number and range controls-min
The minimum value that may be entered.
animation-name
The name of the @keyframes rule for the keyframe sequence.
Param element-name
The name of the parameter. Each media player has its own parameters.
column-count
The number of columns that the text should be divided into.
list boxes (size)
The number of items to display in the control. If the value is 1, the control will be a drop-down list. The default value is 1.
When the page is loaded
The onload event handler for the onload sets the onclick event of the button with "printButton" as its id so the PrintPage function will be called when the button is clicked.
Source element-type
The optional MIME type of the file to be played, including the codec for video files.
progress and meter elements-low
The point at which the element's value is considered a low point.
progress and meter elements-optimum
The point at which the element's value is considered optimum.
When you use fixed positioning
The positioning applies to the browser window and the element doesn't move even when you scroll.
When the user clicks on the heading
The related panel gradually opens and any other open panel gradually closes.
When you use absolute positioning
The remaining elements on the page are positioned as if the element weren't there. As a result, you may need to make room for the positioned element by setting the margins or padding for other elements.
When the user clicks on the thumbnail image within a set of images
The rest of the page is darkened and a larger version of the image is displayed with a counter and a caption. Then, if the mouse pointer move over the larger image, next or previous icons appear.
animation-delay
The seconds or milliseconds before the animation starts.
transition-delay
The seconds or milliseconds before the transition starts.
animation-duration
The seconds or milliseconds that the animation will take.
transition-duration
The seconds or milliseconds that the transition will take.
Within the ready function
The selector selects the ul element that contains the slides and executes the bxSlider method.
animation
The shorthand property for setting the properties that follow.
Benefit of using fluid column sizes
The size of the page is adjusted to the resolution of the browser.
Fixed layout
The size of the page won't change if the user changes the size. You can use either absolute or relative units of measure for margins and padding. Uses absolute measurements to specify the widths of a page and its main structural elements.
When you use ems or percents
The size you specify is relative to the size of the parent element. That makes it easy for you to change the size of an element and all of its children at the same time. This is particularly useful for changing all the font sizes by changing the base font size.
If you code a value attribute for a range control
The slider will be set to that value.
Margins are collapsed
The smaller margin is ignored, and only the larger margin is applied.
animation-timing-function
The speed curve of the animation.
transition-timing-function
The speed curve of the transition. Values include: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier.
Nested
The tags for one element shouldnt overlap with the tags for another element. You must close an inner set of tags before closing the outer set of tags.
If you ems to specify the height
The text area will hold approximately as many lines as ems.
type
The type of control like "button", "text", or "checkbox".
file upload control (accept)
The types of files that are accepted for upload. When the operating system's open dialog box opens, only files of those types will be shown.
progress and meter elements-max
The upper limit of the element.
To select an option
The user can click on it with the mouse or use the Up- and Down-arrow keys to select an option and then press the Enter key.
drop-down list
The user can select one option from a list of options. You code a select element that contains option elements.
To display the list of options
The user must click the arrow at the right side of the control.
If you use relative font sizes
The users will be able to vary the sizes by using their browsers.
If the HTML document is valid
The validator will indicate that the document passed the validation. However, one or more warnings may still be displayed.
If the HTML document is invalid
The validator will indicate the number of errors that were detected. Then, you can scroll down to a description of the errors.
Option elements within a datalist element (value)
The value of an option in the datalist. It is left-aligned.
Param element-value
The value of the parameter.
Number and range controls-step
The value that the entry is increased or decreased by when the user clicks on the top or down arrow for a number field or moves the slider for a range field.
column-gap
The width between the columns. Otherwise, this is set by default.
Device-width
The width of the display area of the device. This is the same as width if the viewport is set.
size
The width of the field in characters based on the average character width of the font. However, it's better to use CSS to set the size of a field.
Fluid layout
The width of the page changes as the user changes the width of the browser window. Also, the width of one or more columns within the page changes. Uses percentages to specify the widths of a page and its main structural element. This meets the challenge of a web page adapting gracefully to all screen sizes, since the layouts are proportional rather than fixed.
HTML5 features for data validation
These features let you validate some of the data that the user enters into a form without using client-side or server-side scripting languages.
novalidate
This Boolean attribute tells the browser that it shouldn't validate the form or control that it is coded for.
IXPs(Internet exchange points)
This allows anyone connected to the Internet to exchange information with anyone else.
Universal selector (*)
This sets the top and bottom margins for all elements.
You can use the margins and padding
To control the indentation for the items in an ordered or unordered list, and to control the space between the bullets or numbers and the text that follows. Also, you can remove the indentation from the items in a list. However, this doesn't work as well with ordered lists because the numbers or letters are aligned at the right.
Sibling selector
To select any elements that are siblings to another element, that consists of the first element, a tilde(~), and the sibling element, but this can only be used by browsers that support CSS3. Selects an sibling element whether or not the elements are adjacent.
Child selector
To select elements only when they are child elements of the parent element, that consists of the parent element, the greater than sign (>), and the child element.
Descendant selector
To select elements only when they are descendants of a higher-level element that consists of the higher element, a plus sign (+), and the sibling element.
Setting tab order and access keys (tabindex)
To set the tab order for a control, use a value of 0 or more. To take a control out of the tab order, use a negative value like -1.
Vorbis
Typically packaged within the .ogg extension and commonly referred to as Ogg Vorbis. Free, open-source format that is supported natively by some of the most popular Linux installations as well as Chrome, Firefox, and Opera browsers.
PNG (Portable Network Graphics)
Typically used as a replacement for still GIF images. Compressed PNG files are typically smaller than GIF compressed files, although no information is lost. This format can represent millions of colors and supports transparency on multiple colors. These files are supported by all modern browsers, as well as mobile devices. Developed specifically for the web as a replacement for GIF files.
JPEG (Joint Photographic Experts Group)
Typically used for photographs and scanned images because it uses a type of compression that can display complex images with a small file size. Can represent millions of colors, loses information when compressed, and doesn't support transparency.
How to use the JavaScript plugin for mobile browser detection
1. Go to the URL. Then, click on the JavaScript button under the Download Scripts heading to download a file named detectmobilebrowser.js.txt 2. Open the file in your text editor, and move the cursor to the end of the JavaScript code, which will include a URL. Then, change this URL to the path of the mobile site that you want the user redirected to. 3. Save your work, close the file, and rename the file so the .txt extension is removed. Then, deploy the file to your web server. 4. In any web page that you want to redirect to the mobile website, code a script element that refers to the file that you've just deployed.
background-color
A color value or keyword that specifies the color of an element's background. You can also specify the transparent keyword if you want elements behind the element to be visible. This is the default.
border-side-color
A color value or keyword that specifies the color of the indicated side.
ColdFusion
A commercial scripting language from Adobe that integrates well with Adobe Flash and Flex. Its pages have the .cfml file extension.
url
A control for receiving a URL. This implies that the entry will be validated by the browser when the form is submitted.
tel
A control for receiving a telephone number, but currently this doesn't imply validation because the formats vary from one country to another.
A control for receiving an email address. This implies that the entry will be validated by the browser when the form is submitted.
datetime
A date and time in a standard format that can be parsed by a browser
time
A date or date an time that can be parsed by a browser
title
A description that is displayed as a tooltip. This can clarify where the link is going.
FreeZilla
A free program for Windows, Macintosh, and Linux
PHP
A free, open-source language that is typically used with an Apache web server. It's pages have the .php extension
section
A generic section of a document that doesn't indicate the type of content
Setting tab order and access keys (accesskey)
A keyboard key that can be pressed in combination with a control key to move the focus to the control.
font-weight
A keyword or number that determines the boldness of the font: normal, bold , bolder, lighter, or multiples of 100 from 100 through 900, with 400 equivalent to normal. Bolder and lighter are relative to the parent element.
display
A keyword that determines how an element is displayed. Common keywords are block, inline, and none.
float
A keyword that determines how an element is floated. Possible values are left, right, and none. None is the default.
position
A keyword that determines how an element is positioned.
font-style
A keyword that determines how the font is slanted: normal, italic, and oblique.
text-decoration
A keyword that determines special decorations that are applied to text. Possible values are underline, overline, line-through, and none. To remove the underlining from a link, set this to none.
text-align
A keyword that determines the horizontal alignment of text. Possible values are left, center, right, and justify. This property is inherited.
page-break-after
A keyword that determines when a page break is allowed after an element's box. Common keywords are always, auto, and avoid.
page-break-before
A keyword that determines when a page break is allowed before an element's box. Common keywords are always, auto, and avoid.
page-break-inside
A keyword that determines when a page break is allowed within an element's box. Possible keywords are auto and avoid.
border-collapse
A keyword that determines whether space exists between the borders of adjacent cells or the borders are collapsed to a single border between cells. Possible values are collapse and separate. The default is separate.
shape
A keyword that indicates the type of shape the area represents. Possible keywords are rect, circle, poly, and default, which is the same as rect.
background-repeat
A keyword that specifies if and how an image is repeated. Possible values are repeat, repeat-x, repeat-y, and no-repeat. The default is repeat, which causes the image to be repeated both horizontally and vertically to fill the background.
border-side-style
A keyword that specifies the style for the indicated side of a border.
background-attachment
A keyword that specifies whether an image scrolls with the document or remains in a fixed position. Possible values are scroll and fixed. The default is scroll.
font-variant
A keyword that specifies whether small caps will be used: normal and small-caps.
scope
A keyword that tells if a cell is associated with a column or row. Common keywords are col and row. You can also use the keyword rowgroup to refer to merged cells.
If an image with a transparent color is displayed over a colored background
A matte of the same color will help the image blend into the background.
CSS 3.0
A modularized version of CSS with the earliest drafts in June 1999.
capacity-value
A number from 0 to 1 with 0 being fully transparent and 1 being fully opaque.
hue-degrees
A number of degrees ranging from 0 to 359 that represents the color.
Viewport metadata-initial-scale
A number that indicates the initial zoom factor that's used to display a page.
initial-scale
A number that indicates the initial zoom factor that's used to display the page.
maximum-scale
A number that indicates the maximum zoom factor for that page.
Viewport metadata-maximum-scale
A number that indicates the maximum zoom factor for the page.
Viewport metadata-minimum-scale
A number that indicates the minimum zoom factor for the page.
minumum-scale
A number that indicates the minimum zoom factor for the page.
Dynamic web page
A page that's created by a program or script on the web server each time it is requested.
saturation%
A percentage from 0 to 100 with 0 causing the hue to be ignored and 100 being the full time.
lightness%
A percentage from 0 to 100 with 50 being normal lightness, 0 being black, and 100 being white.
background-image
A relative or absolute URL that points to the image. You can also specify the keyword none if you don't want to display an image. This is the default.
border-side-width
A relative or absolute value (excluding a percent) or a keyword that specifies the width of the indicated side of a border.
vertical-align
A relative or absolute value or a keyword that determines the vertical alignment of text. Possible keywords are baseline, bottom, middle, top, text-bottom, text-top, sub, and super.
line-height
A relative or absolute value or a number that specifies the amount of vertical space for each line. The excess space is divided equally above and below the font
margin-bottom
A relative or absolute value that defines the space between the bottom border of an element and the bottom of the containing block or the top of the element below it.
padding-bottom
A relative or absolute value that defines the space between the bottom of an element and its bottom border.
margin-left
A relative or absolute value that defines the space between the left border of an element and the left side of the containing block or the right side of the element to its left.
padding-left
A relative or absolute value that defines the space between the left side of an element and its left border.
margin-right
A relative or absolute value that defines the space between the right border of an element and the right side of the containing block or the left side of the element to its right.
padding-right
A relative or absolute value that defines the space between the right side of an element and its right border.
padding-top
A relative or absolute value that describes the space between the top of an element and its top border.
text-indent
A relative or absolute value that determines the indentation for the first line of text. This property is inherited.
max-height
A relative or absolute value that specifies that specifies the maximum height of the content area for a block element. You can also specify none to indicate that there is no maximum height.
max-width
A relative or absolute value that specifies that specifies the maximum width of the content area for a block element. You can also specify none to indicate that there is no maximum width.
min-height
A relative or absolute value that specifies that specifies the minimum height of the content area for a block element. The area will always be at least this tall regardless of its content.
min-width
A relative or absolute value that specifies that specifies the minimum width of the content area for a block element. The area will always be at least this wide regardless of its content.
border-spacing
A relative or absolute value that specifies the space between cells when the borders aren't collapsed.
width
A relative or absolute value that specifies the width of the content area for a block element. You can also specify auto if you want the width of the box calculated for you based on the width of its containing block. This is the default. Specifies the width of the image in pixels. The logical width of the viewport specified in pixels. You can also use the device-width keyboard to indicate that the viewport should be the width of the screen in CSS pixels at a scale of 100%.
Charset attribute of <meta> tag
A required tag in HTML5 that specifies the type of character encoding to be used for the page.
aside
A section of a page like a sidebar that is related to the content that's near it
nav
A section of a page that contains links to other pages or placeholders
Axialis Icon Workshop
A software product that lets you create, edit, and convert icons. For more information, go to www.axialis.com/iconworkshop/.
A jQuery download consists of
A zip file that contains the CSS files, the images for the theme that has been selected, the jQuery UI files, and an HTML document that demonstrates the components in the download.
The data-lightbox attributes of the <a> elements
Activate Lightbox. Their values should be unique for independent images but the same for a group of images.
contrast(value)
Adjusts the contrast, from 0% (black) to 100% (unchanged).
hue-rotate(angle)
Adjusts the hue rotation of the image. The angle value is the number of degrees around the color circle that the image will be adjusted.
HTML 4.01
Adopted in December 1999 and updated through May 2001.
XHTML 1.0
Adopted in January 2000 and revised in August 2002. Reformulates HTML 4 using the syntax of XML, which makes it easier to parse the web page. Allows automated tools to find errors in a web page.
XHTML 1.1
Adopted in May 2001. Control of the presentation of content is now done through CSS
HTML 2.0
Adopted in November 1995
AAC
Advanced Audio Coding or AAC is the format that Apple uses to deliver audio for its iTunes store. AAC was originally designed to deliver better quality audio than MP3. One of the most common media types and is also the encoding standard for the media type. Currently used on all Apple products, as well as Youtube, Nintendo's DSi, Wii and 3DS, Sony's Playstation 3 and Portable, as well as several mobile devices including phones powered by Sony Ericsson, Nokia, Android, and WebOS.
To play a video on any modern browser
All that's needed is a src attribute that refers to an MP4 file. To play audio, all that's needed is a src attribute that refers to an MP3 file.
Linear gradients
Allows you to provide interesting backgrounds without using images.
jQuery and jQuery Mobile filenames
Always include the version number. The latest stable version of jQuery Mobile is 1.4.5.
If the columns are too narrow
An article becomes harder to read
DOM scripting-Attr
An attribute of an element. Although it is attached to an Element node, it isn't considered a child node. It can have a Text node as a child node.
DOM scripting-Element
An element in the web page. It can have Element, Text, and Comment nodes as child nodes.
:focus
An element like a link or form control that has the focus.
:hover
An element with the mouse hovering over it. Code this after :link and :visited. Hover has no default color.
br
An empty element that starts a new line of text
img element
An inline element that is used to display an image that identified by the src attribute.
z-index
An integer that determines the stack level of an element whose position property is set to absolute, relative, or fixed. An element with a higher z-index value is displayed on top of an element with a lower z-index value.
blur(value)
Applies a Gaussian blur. The value is in pixels.
jQuery selector-type
Applies to all h2 elements.
jQuery selector-id
Applies to the HTML element with "email_address" as its id.
opacity(value)
Applies transparency to the image. 0 results in an image that is completely transparent while 1 leavers the image unchanged.
Base font size and the spacing above and below headings and paragraphs
Are determined by the browser, but you can change these values by using CSS.
Color and font properties of a parent element
Are inherited by the child elements. But those properties can be overridden by the rule sets for the children.
animation-direction
Use normal, reverse, or alternate to set the direction of the animation.
The h2 and h3 elements
Use relative positioning, but no positions are specified. That way, .title and .number elements that they contain can be positioned relative to the headings.
How to set the colors that are used to highlight the syntax
Use the Window=>Preferences command to open the Preferences dialog box. Then, click on Aptana Studio, click on Themes, and choose a theme from the drop-down list.
To stop the floating before an element
Use the clear property.
AVI
Audio Video Interleave is commonly found with the .avi extension and is another Microsoft proprietary media type. It is one of the oldest media types and was introduced in 1992 when computer-based video was largely a hope for the future.
Control toolbar
Automatically appears when the page loads while the video is playing and your cursor is over the video. As you move your cursor off the video, the control toolbar automatically drops off and becomes hidden. Moving your cursor back onto the video causes the control toolbar to reappear.
How to open an HTML file with a project
Use the drop-down list in Aptana's App Exchange to select the project. Then, locate the file and double-click on it.
To display an image for the bullet
Use the list-style-image property.
To preview a web page
Use your browser's Print or Print Preview command.
The title
Used as the name of a favorite or bookmark for the page
abbr
Used for abbreviations
code
Used for computer code, which is displayed in a monospaced font
q
Used for quotations, which are displayed within quotation marks
Block elements for special types of text-blockquote
Used for quotations. Can be used with the cite and <q> elements.
GIF files
Used for small illustrations and logos
lang attribute
Used to assist screen readers to read content correctly and to provide for searches that are restricted by language.
Audio codec
Used to decode the audio portion of an audio or video file, convert it to audible waveforms, and send it to the speakers of a system, which convert those waveforms into sound.
Min and max attributes
Used to define the lower and upper limits of the progress or meter elements.
High and low attributes
Used to define the points at which the progress or meter element's value is considered a high or low point.
Adobe Flash Player
Used to display Flash animation and videos (SWF)
Adobe Reader
Used to display PDF files
Poster attribute of the video element
Used to display a static image in place of the media type when the page is displayed. The poster file will be replaced with the actual video when the user clicks on the play button.
fieldset element
Used to group controls.
A label
Used to identify a related field. However, labels should also be used to improve the accessibility of radio buttons and check boxes. Labels also make it easier to align the controls on a web page.
cite
Used to indicate a bibliographic citation like a book title
Height and weight attributes
Used to indicate the size of an image so the browser can allocate the correct amount of space on the page. These attributes can also be used to size an image, but it's usually better to use an image editor to do that.
Description lists
Used to list terms an their descriptions. Consists of terms and descriptions for those terms. In HTML4, this type of list was called a definition list.
samp
Used to mark a sequence of characters (sample) that has no other meaning
The title attribute
Used to provide the heading for the dialog box.
Most graphic designers use hexadecimal, or hex, values to specify an RGB value
Because that lets them choose from over 16 million colors. You can find a list of color names and their corresponding hex values at http://www.w3.org/TR/css3-color
CSS Comments
Begin with the characters /* and end with the characters */. Can be coded on a single line, or it can span multiple lines.
border-side
Border width, style, and color values for the specified side of a border.
For specific media players
Browser often require special plugins. These plugins are released by the player manufacturers, and include QuickTime, Windows Media Player, and Adobe Flash Player.
You code a selector for an element with a class attribute
By coding a period.
You can create an ico file
By using an icon editor, A program that converts an image to an ico file, or a web-based converter.
You can change the bullet that's displayed for an unordered list
By using the list-style-type property.
legend element
Can be coded within a fieldset element. It is used to label the group of controls.
Text properties
Can be used to indent, align, and decorate the text in a block element like a heading or paragragh
The data-title attributes of the <a> elements
Can be used to provide captions.
Boolean Attribute
Can have just two values, which represent either on or off. Represents either an on or off value.
coords
Values that indicate the shape and location of the area. Two sets of x, y coordinates are required for a rectangle to identify the upper left and lower right corners. Three values are required for a circle to identify the x, y coordinates.
To validate the HTML for a page
W3C Markup Validation Service
Static web page
Web page that only changes when the web developer changes it. Sent directly from the web server to the web browser when the browser requests it. An HTML document that's stored on the web server and doesnt change. Filenames have .htm or .html extensions.
Detect Mobile Browsers site
Website that provides scripts for detecting browsers. It provides scripts for clients and servers that detect mobile browsers and redirect them to the mobile versions of the sites.
URL for jQuery UI
http://jqueryui.com/
Flash attributes website
http://kb2.adobe.com/cps/127/tn_12701.html
URL for the Lightbox website
http://lokeshdhakar.com/projects/lightbox2/
URL for downloading the normalize.css style sheet
http://necolas.github.io/normalize.css/
QuickTime attributes website
http://support.apple.com/kb/ta26485
URL for Detect Mobile Browsers
http://www.detectmobilebrowser.com
HTML complete list of character entities
http://www.w3.org/TR/html5/syntax.html#named-character-references
Windows Media Player attributes website
https://msdn.microsoft.com/en-us/library/windows/desktop/dd564581(v=vs.85).aspx
URL (starting with http:// or https://)
https?://.+
lower-roman
i, ii, iii, iv, v...
For a widget that requires images
jQuery UI expects the CSS file and the images folder to be at the same level.
jQuery plugin
jQuery application that does one web task or a set of related web tasks.
The attribute of the map element that gives it a name
name
Favicon
Causes the icon to be displayed to the left of the title in the tab for the page. Typically name this icon favicon.ico.
audio and video elements-loop
Causes the media to repeat playing when it reaches the end.
Header cells
Cells that identify the data in a column or row.
transform-origin
Changes the default origin point. The parameters can be percents or keywords like left, center, right, and top, center, bottom.
scaleY(value)
Changes the element's height by scaling vertically.
scale(x-value, y-value)
Changes the element's width and height by scaling.
For images that are used for decoration
Code the alt attribute with no value (""). Code the alt attribute an an empty string.
Inline element
Coded within a block element and doesn't begin on a new line.
The bxSlider download
Consists of a JavaScript file, a CSS file, and an images folder that contains the images that are used by the plugin.
Closing tag
Consists of a left angle bracket, a forward slash, the element name, and the right angle bracket, as in <html>. Includes the tag name preceded by a slash.
CSS declaration(or rule)
Consists of a property, a colon, a value, and a semicolon.
CSS Rule set
Consists of a selector and a declaration block.
The HTML for a Tabs widget
Consists of a top-level div element that represents the widget. Then, this element contains an unordered list that contains the headings for the tabs, followed by one div element for each tab that contains the content of the tab.
CSS declaration block
Consists of an opening brace, zero, or more declarations, and a closing brace.
Whitespace
Consists of characters like tab characters, and extra spaces.
grayscale(value)
Converts the image to grayscale. 100% is completely grayscale, while 0% leaves the image unchanged.
sepia(value)
Converts the image to sepia. 100% is completely sepia, while 0% leaves the image unchanged.
h1
Creates a level-1 heading with content in bold at 200% of the base font size.
h2
Creates a level-2 heading with content in bold at 150% of the base font size.
h3
Creates a level-3 heading with content in bold at 117% of the base font size.
h4
Creates a level-4 heading with content in bold at 100% of the base font size.
h5
Creates a level-5 heading with content in bold at 83% of the base font size.
h6
Creates a level-6 heading with content in bold at 67% of the base font size.
<li>
Creates a list item for an unordered or ordered list
ul
Creates an unordered list.
caption
Describes the content of the table. The other alternative is to treat the table as a figure and use the figcaption element to describe the table.
MIME type
Describes the contents of a file and can assist browsers in determining what player to use to open the file. The table above summarizes the MIME types and the codecs that are associated with them.
HTML5 date, datetime, datetime-local, month, week, and time controls
Designed for date and time entries. It's good to use these controls for semantic reasons.
HTML5, url, and tel controls
Designed for email address, URL, and telephone number entries. The first two imply that validation will be done by the browser when the form is submitted, but phone numbers aren't validated.
Output control
Designed to display data that is calculated by a client-side or server-side scripting language.
Blue radius
Determines how much the shadow is blurred
The third value in the box-shadow property
Determines how much the shadow is blurred, and the fourth value determines how far the blur is spread.
The viewport on a mobile device
Determines the content that's displayed on the page. It can be larger or smaller than the visable area of the screen.
Viewport
Determines the content that's displayed on the screen. It can be larger or smaller than the actual visible area of the screen.
list-style-type
Determines the type of bullet that's used for the items in the list. The default is disc.
LAN (Local area network)
Directly connects computers that are near each other. Intranet
Lightbox plugin
Displays a larger version of a thumbnail image when the user clicks the thumbnail image. This image is displayed in a modal dialog box, which means that it must be closed before the user can continue. The image in this box has a thick white border, and it may have a caption below it.
Auto-completion feature
Displays a list of elements that start with what you've typed. to insert one of those terms, double-click on it or use the arrow keys to highlight it and press the Tab key.
sub
Displays the content as a subscript
sup
Displays the content as a superscript
b
Displays the content in bold
i
Displays the content in italics
audio and video elements-controls
Displays the default control toolbar underneath the audio or video being played.
Aptana
Displays the different parts of a file in different colors so they're easy to recognize. Helps you spot common errors.
object
Embeds a media file into a web page
<img>
Empty tag that identifies an image that should be displayed
UTF-8
Encoding that's commonly used for the WWW.
Usability
How easy it is to use a website, and usability is a critical requirement for an effective website
usemap
Identifies the related map element. The value of this attribute is the value of the name attribute of the map element, preceded by a pound sign (#).
How to apply an imported font to an HTML element
In the rule set for the HTML element, use the name that you gave the font as the value for the font-family property. Then, list one or more other font families in case the browser doesn't support the CSS3 @font-face selector.
The external folder in the download
Includes the jQuery library file. Also includes full and compressed versions of structure and theme CSS files, but you don't need them because the jquery-ui.css and jquery-ui.min.css files include the rule sets in both the structure and theme files.
The first parameter of a linear gradient
Indicated the direction the gradient will go: "to right" for left to right, "to bottom" for bottom to top, "to left" for right to left, "to top" for bottom to top, and a number of degrees if the gradient should be on an angle.
em
Indicates that the content should be emphasized, which is displayed in italics
strong
Indicates that the content should be strongly emphasized, which is displayed in bold
Viewport metadata-user-scalable
Indicates whether the user can zoom in and out of the viewport. Possible values are yes and no.
user-scalable
Indicates whether the user can zoom in and out of the viewport. Possible values are yes and no.
Figcaption element
Inline element, not a block element. Provides a caption that describes the figure, but it's optional. When coded, it can be anywhere within the figure.
invert(value)
Inverts the colors of the image. 100% is completely inverted, while 0% leaves the image unchanged.
The content of a th element
Is boldfaced and centered, and the content of a td element is left-aligned.
The width of each column in a table
Is determined automatically based on its content.
The basic formatting of the accordion
Is done by the CSS file for jQuery UI, but you can use your style sheet to format the contents within the panels, and you can modify the jQuery UI style sheet to change the appearance of the accordion.
Any whitespace in the HTML for the content of the text area
Is shown in the value that's displayed in the browser.
One way to do image rollovers
Is to use background images and the :hover pseudo-class selector.
Placeholder attribute
Is used in some fields to indicate how the user should enter the data. When the focus moves to the field, the placeholder text is removed.
As the width of the page is reduced
It becomes more difficult to use. To fix this, you can use CSS3 media queries.
If you code a value attribute for a number control
It will appear in the text box as the starting value.
If you specify a generic font last and the web browser can't find any of the other fonts in the list
It will use its default font for the generic font that you specified.
If you use Aptana to run a page that uses an object element within a video element
It won't work correctly. Instead, you'll need to access the page directly from the browser.
To show the users what page they're on
It's a good practice to highlight the current link. One way to do that is to apply a different background to it.
When you float an element
It's taken out of the flow of the document. Any elements that follow the floated element flow into the space that's left by the floated element. When you float an element to the right or left, the content that follows flows around it.
If the browser doesn't have a Print Preview command
Its Print command will display the page in preview mode. Then, you can decide whether you want to print it.
widows
Last line of a paragraph by itself at the top of a page. An integer that determines the minimum number of lines within an element that can be printed on the next page when a page break occurs within the element.
Filters
Let you change the appearance of images after they have been loaded into the browser without changing the image files.
CSS3 structural pseudo-classes
Let you format a table without using classes or ids. Lets you select elements by their structural location. By using these pseudo-classes in your selectors, you can avoid the use of id and class selectors, which simplifies your HTML.
Transitions
Let you gradually change one or more of the CSS properties for an element over a specified period of time. Shorthand property for setting the properties that follow.
Transforms
Let you rotate, scale, skew, and position HTML elements using CSS code alone. Applies one or more transform methods to the element.
Page-break-before and page-break-after properties
Let you specify whether a break always occur before or after an element, may occur before or after an element, or shouldn't occur before or after an element.
HTTP Request
Lets the web server know which file is being requested. Includes the name of the file that's being requested.
file upload control
Lets users upload one or more files to your web server.
div
Lets you divide a page into divisions that can be formatted and positioned with CSS
span
Lets you identify text that can be formatted with CSS
CSS Box Model
Lets you work with the boxes that a browser places around each block element as well as some inline elements. This lets you add formatting such as margins, padding, and borders.
HSLA values
Like HSL values but with a fourth parameter that provides an opacity value between 0 and 1.
The bxSlider plugin
Maes it easy to develop a carousel. The HTML is an unordered list with one list item for each slide that contains images or other HTML.
Block elements
Main building blocks of a website and can contain other elements. Each block element begins on a new line.
Creative Commons License
Many of the images and icons that are available from the Web are licensed. The license can restrict the use of an image to one or more of the conditions. The most common condition is attribution.
www.mirovideoconverter.com
Miro Video Converter. Free and commercial. Lets you convert a file from just about any media type into the types needed for web applications.
Root-relative path
Path is relative to the root folder of the website. It always starts with a slash. Then, to go down one subfolder, you code the subfolder name and a slash. To go down two subfolders, you code a second subfolder name and another slash.
When you code the box-shadow property
Positive values offset the shadow to the right or down, and negative values offset the shadow to the left or up.
DOM Scripting
Powerful capability because when the DOM is changed, the web browser changes the web page to reflect the changes to the DOM.
Regular expression
Provides a way to match a user entry against a pattern of characters. Can be used for validating user entries that have a standard pattern, such as credit card numbers, zip codes, dates, phone numbers. Are supported by many programming languages including JavaScript and PHP, and supported by HTML5.
CSS3
Provides an @font-face selector that can be used to import a font family.
Cycle 2 website
Provides excellent demos and summaries that let you enhance a slide show in many ways.
Metadata
Provides information about the content of the document.
param
Provides parameters to the media player that's listed used to open a file.
Internet Explorer
Published by and available on Microsoft and available on windows
Cascading style sheets
Refers to the fact that more than one style sheet can be applied to a single web page. Then, if two or more rules for the same property are applied to the same element, the cascade order and other rules determine which rule takes precedence.
SEO(Search engine optimization)
Refers to the goal of optimizing your website so your pages rank higher in search engines like Google, Bing, and Yahoo.
User accessibility or accessibility
Refers to the qualities that make a website accessible to as many users as possible, especially disabled users.
Reset selector
Refers to the use of a universal selector that sets the margins and padding for all of the elements to zero. After you code the reset selector, you can get the spacing that you want by applying margins and padding to specific elements, which overrides the settings of the reset selector.
skew(x-angle, y-angle)
Skews an element along the x and y axis.
skewX(angle)
Skews an element along the x-axis.
skewY(angle)
Skews an element along the y-axis.
favicon
Small image that appears to the left of the title in the browser's tab for the page. It may also appear to the left of the URL in the browser's address bar, and it may be used in a favorite or bookmark. Typically 16 pixels wide an tall and has the extension ico since that's the only extension currently supported by IE for icons.
Margin
Space between the border and the outside of the box
To implement absolute positioning
Span elements with class names are used to identify the text to be positioned at the left and the page numbers to be positioned at the right.
href
Specifies a relative or absolute URL for a link. Identifies the page to be loaded. A relative or absolute URL that identifies the document a link will display.
The media type for a link element
Specifies a style sheet for printing a web page is "print"
Core HTML attributes-id
Specifies a unique identifier for an element that can be referred to by CSS
Core HTML attributes-title
Specifies additional information about an element. For some elements, the title appears in a tooltip when the user hovers the mouse over the element.
alt
Specifies alternate test to display in place of the image. This text is read aloud by screen readers for users with disabilities. It is required.
wrap
Specifies how the text should wrap. Possible values include soft and hard, and soft is the default.
Core HTML attributes-class
Specifies one or more class names that can be referred to by CSS, and the same name can be used for more than one element. To code more than one class name, separate the class names with spaces
The fifth value in the box-shadow property
Specifies the color of the shadow. If it is omitted, it is the same color as the border.
Declaration block
Specifies the formatting for the element.
Declarations(or rules)
Specifies the formatting for the element.
height
Specifies the height of the image in pixels. A relative or absolute value that specifies the height of the content area for a block element. You can also specify auto if you want the height of the area calculated for you based on its content. This is the default. The logical height of the viewport specified in pixels. You can also use the device-height keyword to indicate that the viewport should be the height of the screen in CSS pixels at a scale of 100%.
audio and video elements-height
Specifies the height of the media file to be played within the browser.
Script element-src
Specifies the location and name of an external JavaScript file.
@media selector
Specifies the media type for the query and, for the screen media type, one or more conditional expressions. If all of the conditions are true, the styles within the media query are applied to the page.
regular expressions (pattern)
Specifies the regular expression that is used to validate the entry.
src
Specifies the relative or absolute URL of the image to display. It is a required attribute.
The title element
Specifies the text that's displayed in the browser's tab for the web page
Name attribute of <meta> tag
Specifies the type of metadata being added to the document. The values "description" and "keywords" can be used to specify content that's used by some search engines.
Content attribute of <meta> tag
Specifies the value to be used for the item specified by the name attribute.
audio and video elements-width
Specifies the width of the media file to be played within the browser.
Page-break-inside property
Specifies whether a page break can occur within an element.
To load the document in a new browser window or tab
Specify "_blank" for this attribute.
text-shadow property
Supported by all modern browsers
Network
System that allows clients and servers to communicate.
When scripting the DOM
The $ sign is commonly used for a function that uses the getElementById method of the document object to get the element that has the id that's coded in the parentheses
matrix(a,b,c,d,e,f)
The 6 parameters are values in a matrix that let you rotate, scale, translate, and skew elements with a single method.
ASF
The Advanced Systems Format is commonly found with the .asf extension. Microsoft proprietary media type and is specifically meant or streaming media. The video stream of an ASF media type is typically Windows Media Video (WMV)
If the CSS for a page is valid
The CSS Validation Service displays a message that indicates that no errors were found.
Embedded style sheet
The CSS rule sets are coded in a style element in the head section of the HTML. You have to copy the styles to other documents before you can use them a second time.
To change the height property for the div element
The CSS uses the target pseudo-class. This pseudo-class selects the div element that is the target of the <a> element that has been clicked.
method
The HTTP method for submitting the form data. It can be set to either "get" or "post". The default value is "get".
Embed element-type
The MIME type of the file to be played.
Object element-type
The MIME type of the file.
DOM scripting-Text
The Text for an element or attribute. It can't have a child node.
list-style-image
The URL for an image that's used as the bullet.
For the get method
The URL is followed by a question mark and name/value pairs that are separated by ampersands.
When you specify a relative URL for an external CSS file
The URL is relative to the current file.
action
The URL of the file that will process the data in the form.
Embed element-src
The URL of the file to be played.
Source element-src
The URL of the file to be played.
audio and video elements-src
The URL of the file to be played.
Object element-data
The URL of the file.
cols
The approximate number of columns in the text area. Not required in HTML5.
rows
The approximate number of rows in the text area. Not required in HTML5.
If an image with transparency is displayed over a colored background
The background color will show through the transparent portion of the image.
If a table doesn't fit in the browser window
The browser will wrap the data so it does fit. If you don't want that, you can use CSS to turn the wrapping off.
If the slide images contain title attributes
The captions option will make them captions.
progress and meter elements-value
The current value of the element.
For the post method
The data is hidden
When you nest an unordered list within another list
The default bullet is a circle.
value
The default value for the field, but the user can change this value. If a reset button is clicked, the field will revert to this value.
Option elements within a datalist element (label)
The description of the item in the datalist. It is right-aligned.
When you use jQuery
The dollar sign ($) is used to refer to the jQuery library. Then, you can code jQuery selectors by using the CSS syntax with quotation marks within parentheses.
When you use absolute, relative, or fixed positioning for an element
The element can overlap other elements. Then you can use the z-index property to specify a value that determines the level at which the element is displayed.
static
The element is placed in the normal flow. This is the default.
fixed
The element is positioned absolutely relative to the browser window. The position is determined by the top, bottom, left, and right properties.
relative
The element is positioned relative to its position in the normal flow. The position is determined by the top, bottom, left, and right properties.
absolute
The element is removed from the flow and is positioned relative to the closest containing block that is also positioned. The position is determined by the top, bottom, left, and right properties.
How to view the CSS code in an external CSS file
-In Chrome or Firefox, click on the link element that refers to it. -In Internet Explorer, enter the URL for the CSS file in the address bar of your web browser.
How to view the HTML source code for a web page
-In Chrome, click on Menu icon to the right of the address bar and select the More Tools=>View Source command -In Firefox, choose Tools=>Web Developer=>Page Source or click the Menu icon to the right of the address bar, click the Developer icon, and select the Page Source command. -In Internet Explorer, choose the View=>Source command -You can also display the source code by right-clicking on the page and selecting the View Source or View Page Source command
4 guidelines for improving usability
-Present as much critical information as possible "above the fold" so the user has to scroll less. -Group related items and limit the number of groups on each page. -Include a header that identifies the site and provides a navigation bar and links to utilities. -Use current navigation conventions, like including a logo that goes to your home page when clicked and a cart icon that goes to your shopping cart when clicked.
Information sources
-The WebAIM website provides a good starting point for learning about accessibility at http://www.webaim.org. -The World Wide Web Consortium (W3C) provides a full set of accessibility guidelines at http://www.w3.org/TR/WCAG. -W3C also provides a specification called WAI-ARIA (Web Accessibility Initiative-Accessible Rich Internet Applications) that shows how to make rich internet applications more accessible to the disabled at http://www.w3.org/TR/wai-aria.
What website users want
-To find what they're looking for as quickly and easily as possible. -To get information or do a task as quickly and easily as possible.
5 critical web development issues
-Users and usability -Cross-browser compatibility -User accessibility -Search engine optimization -Responsive web design
HTML5 Rating Perfect Score
555
Python
A free, open-source language that be used to develop many types of applications besides web applications. Its pages have the .py extension.
JSP
A free, open-source language that is commonly used with Java servlets. It runs on an Apache web server, and its pages have the .jsp extension.
Ruby
A free, open-source language that is typically combined with the Rails framework to simplify development. Its pages have the .rb extension.
Perl
A free, open-source language that was originally designed for use at the UNIX command line to manipulate text. Its pages have the .pl extension.
Dreamweaver
Allows you to edit HTML and CSS code in one panel of its window while it shows you how the web page will look in another panel.
HTML 5
An HTML specification that replaces both HTML 4 and XHTML 1. Released as a working draft in January 2008. Originally, it defined an HTML version called HTML 5 and an XHTML version called
W3C (World Wide Web Consortium)
An international community in which member organizations, a full-time staff, and the public work together to develop Web standards. www.w3.org
RWD (Responsive Web Design)
First coined by Ethan Marcotte. Refers tot eh theory and practice of creating websites that adapt gracefully to all viewing mediums, from desktop computers to mobile phones. The idea is to provide a website that is easy to read and navigate and that requires a minimum amount of resizing and scrolling.
CSS 2.1
First released as a candidate standard in February 2004, it returned to working draft status in June 2005. It became a candidate standard again in July 2007.
Opening tag
For each element consists of the element name surrounded by angle brackets, as in <html>. Includes the tag name.
Domain name
Identifies the web server that the HTTP request will be sent to
Javascript
Scripting language that provides for client-side processing. Client-side scripting language that is run by the Javascript engine of a web browser.
HTML Document
Starts with a DOCTYPE declaration that is followed by tags that identify the HTML elements within the document.
CSS (Cascading style sheets)
Used to control how web pages are displayed by specifying the fonts, colors, borders, spacing, and layout of the pages.
HTML(Hypertext markup language)
Used to mark up web pages and defines the content and structure of a web page.
option (selected)
A Boolean attribute that causes the option to be selected when the page is loaded.
list boxes (multiple)
A Boolean attribute that determines whether multiple items can be selected. It is only valid if size is greater than 1.
disabled
A Boolean attribute that disables and grays out the control. Then, the control can't receive the focus, the user can't tab to it, and the value isn't submitted with the form.
pubdate
A Boolean attribute that indicates that the date is the publication date for the article that contains the time element
file upload control (multiple)
A Boolean attribute that lets the user upload more than one file.
readonly
A Boolean attribute that means a user can't change the control's value. But the control can receive the focus, the user can tab to it, and the value is submitted with the form.
The Lightbox download includes
A CSS file, a plugin file, and an img folder that contains an image for loading and images for the close, next, and previous icons.
orphans
First line of a paragraph by itself at the bottom of a page. An integer that determines the minimum number of lines within an element that can be printed at the bottom of a page when a page break occurs within the element.
sans-serif
Fonts with plain stroke ends. Has been applied to all of the text in this document because that's the most readable type of font for web pages.
serif
Fonts with tapered, flared, or slab stroke ends
Scripting the DOM-nodeValue
For a Text, Comment, or Attribute node, get or sets the text that's stored in the node.
tab order
For a form is the sequence in which the controls receive the focus when the Tab key is pressed. By default, the tab order is the order of the controls in the HTML, not including labels, and most browsers include links in the default tab.
top, bottom, left, right
For absolute for fixed positioning, a relative or absolute value that specifies that top, bottom, left, or right position of an element's box. For relative positioning, the top, bottom, left, or right offset of an element's box.
Scripting the DOM-value
For an input element like a text box, get or sets the value in the element.
<br>
Forces a line break, consists of just one tag.
jQuery Mobile
Free, open-source, cross-platform, JavaScript library that you can use for developing mobile websites. This library lets you create pages that look and feel like the pages of a native mobile application. Lets you store multiple pages in a single HTML file, create dialogs, buttons, and navigation bar; format your pages without coding your own CSS; lay out pages with two columns, collapsible content blocks, and accordions; and much more.
FTP Program
Not only allows you to transfer files from client to a web server but also from a web server to a client.
Document object
Object that lets you work with the Document Object Model (DOM) that represents all of the HTML elements on a page.
Event
Occurs when an action like loading a web page or clicking on a button occurs.
Negative values
Offset the shadow to the left or up
Positive values
Offset the shadow to the right or down
Horizontal navigation menu
Often provides the primary navigation of a site.
Most common video types
Ogg Theora, MP4, and WebM.
Most common audio types
Ogg Vorbis, MP3, and AAC.
If you include the only keyword
Older browsers that don't support media queries will check the media type but not the conditional expressions.
border-width
One to four relative or absolute values (excluding a percent) or keywords that specify the widths for each side of a border. Possible keywords are thin, medium, and thick. To remove the border from an image link, set this to none. You can also set the border-width property to 0.
padding
One to four relative or absolute values that specify the padding on multiple sides of an element. One value is applied to all four sides. Two values are applied to the top and bottom and right and left. Three values are applied to the top, right and left, and bottom. And four values are applied to the top, right, bottom, and left (think trouble).
margin
One to four relative or absolute values that specify the size of the margins for a box. One value is applied to all four margins. Two values are applied to the top and bottom and right and left margins. Three values are applied to the top, right and left, and bottom margins. And four values are applied to the top, right bottom, and left margins(think trouble)
How to start a new CSS file from another CSS file
Open the file that you want to base the new file on. Then, use the File=>Save As command to save the file with a new name.
How to start a new HTML file from another HTML file
Open the file that you want to base the new file on. Then, use the File=>Save As command to save the file with a new name.
WWW(World wide web)
Or web, consists of many components that work together to bring a web page to your desktop over the Internet.
VP8
Originally developed by On2 Technologies (later acquired by Google), VP8 is an open-source, royalty-free encoder.
The cascade order for applying CSS rule sets
Search for the rule sets that apply to an element in the sequence that follows and apply the rule set from the first group in which it's found: -!important rules in a user style sheet -!important rules in a web page -Normal rules in a web page -Normal rules in a user style sheet -Default rules in the web browser
External style sheet
Separate file that contains the CSS for the page. You separate content (HTML) from formatting (CSS). That makes it easy to use the same styles for two or more documents.
autocomplete
Set the attribute to off to tell the browser to disable auto-completion. This can be coded for a form or a control.
The width of the body and article
Set to auto so they will be as wide as the printed page permits.
tabindex
Sets the tab order for the links starting with 0. To take a link out of the tab order, code a negative value.
SWF
ShockWave Flash file. MIME type=application/x-shockwave-flash
Access keys
Shortcut keys that the user can press to move the focus to specific controls on a form. If you assign an access key to a label, the focus is moved to the control that's associated with the label since labels can't receive the focus.
The heading for each tab
Should be in an <a> element within an li element of the list.
for
Should be set to the id of the related control. Although the id attribute is optional in forms that don't rely on client-side scripting, it is required when using labels and the for attribute.
The href attribute for each tab
Should point to the id of the div element that contains the contents for the tab.
Nested lists
When you code a list within another list. Coding one list as an item for another list.
Path
Where the file resides on the server. Lists the folders that contain the file.
target
Where to open the page that's specified in the action attribute. If you specify, _blank, the page is opened in a new window or tab.
Absolute URL
Which includes the domain name of the website. In coding, you code the complete URL including the domain name for the site. Lets you display pages at other websites.
Most audio files contain two channels
Which represent the left and right speakers, but it's common for video media types to have several channels of audio that represent left, right, and center speakers plus speakers in the rear. Commonly referred to as "surround sound".
Viewport metadata-width
Width of the viewport in pixels. You can also use the device-width keyword to indicate that the viewport should be as wide as the screen.
The event handler for the ready event method
Will run any methods that it contains as soon as the DOM is ready, even if the browser is loading images and other content for the page.
The CSS for the operation of this 3-tier menu
Will work for any 3-tier menu like this one. It will also work for a 2-tier menu.
WMA
Windows Media Audio or WMA are usually found with the .wma extension. The audio stream of an ASF media type is typically Windows Media Audio.
Script element-type
With HTML5, this attribute can be omitted. If you code it, use "text/javascript" for JavaScript code.
column-span
With the value "all", this property can be used to have an element that's a child of an element that's formatted with columns span all of the columns. Not currently supported by Firefox.
RGBA values
Works like RGB values, but with a fourth parameter that provides an opacity value. Enhances the RGB specification by providing a fourth value for opacity.
image button
Works like a submit button. Displays an image rather than text.
Aptana warning marker
Yellow triangle that contains an exclamation point
To associate a datalist with a text field
You add a list attribute to the field that specifies the id of the datalist element.
To play a video from Aptana
You also need to include the type attribute.
When you use the float property for an element
You also need to set its width.
When you use JavaScript to modify the DOM
You are DOM scripting or scripting the DOM.
If a form includes a series of controls and labels that identify them
You can align the labels by floating them to the left of the controls and settings a width that provides enough space for all the labels. Then, you can set a left margin for the controls to add space between the labels and the controls.
To select all the input elements with the required attribute
You can also use the attribute selector.
When you code the border-radius property
You can assign one rounding radius to all four corners or a different radius to each corner.
If you download and deploy the jQuery files to your system
You can change
If you download the jQuery file to your system
You can change the filename so it's simpler, but then you may lose track of what version you're using.
If an element is coded with a class attribute
You can code a selector for that class by coding a period followed by the class name, as in .base_color.
If an element is coded with an id attribute
You can code a selector for that id by coding a pound sign (#) followed by the id value, as in #copyright
To set options for a slide show
You can code data-cycle attributes for the div element.
To provide captions below the slides
You can code data-cycle-title attributes for the img elements, data-cycle caption attributes for the div element, and an empty div element for the captions below the slides.
If you want to disable all of the controls within a fieldset element
You can code the disabled attribute for the fieldset element.
To show which fields the output element is associated with
You can code the for attribute.
To group the options in a list
You can code the options within an optgroup element. However, that isn't required.
To change the positioning of an element
You can code the position property. In most cases, you can also code one or more of the top, bottom, left, and right properties.
When you use the object element
You can control the appearance and operation of the media player by coding parameter elements. These elements are standard HTML.
Share Alike
You can distribute the image based on the license that governs the original work.
Coding a horizontal navigation menu using an unordered list
You can do that by displaying the li elements inline or by floating the li elements.
To include jQuery Mobile in your pages
You can download the required JavaScript and CSS libraries from the jQuery Mobile website, deploy them to your web server, and then include them in your mobile web pages.
To help the browser determine which player to use
You can include a type attribute on the <a> element to specify a MIME that identifies the type of content.
When you're building a download for a web page
You can keep the file sizes smaller by selecting just the widgets, interactions, and effects that the web page needs.
For pages that are likely to be printed
You can make it easier for the user by adding a Print button or link that uses JavaScript to call the browser's print command.
For browsers that don't support the video and audio elements
You can nest an object element within the video or audio element to play a Flash file.
Relational selectors
You can often avoid the need for id or class attributes
If you don't want to display the interface for a media player
You can omit the width and height attributes or set them to 0.
To find sites that provide JavaScript code
You can search for terms like "free javascript code" or "jquery code examples".
If you want to create or remove a user style sheet for a browser
You can search the Internet for the procedures that your browser requires.
In the CSS for the table of contents
You can see that the h2 and h3 elements are given relative positioning.
If you don't want an element to be included when a page is printed
You can set its display property to none. Then, no space is allocated for the element's box.
To make the entire box for a link clickable
You can set the display property for the <a> elements to block and use padding to provide the space around the links.
If you want to limit the size of an image to its native width
You can set the width property to a percent and then set the max-width property to the native width in pixels. That way, the quality of the image will be maintained.
To avoid orphans and widows
You can set these properties to 2 or more.
Within a screen style sheet
You can specify rule sets for the printed page by coding @media="print" followed by the rule sets for the printed page. This media query is nornally coded after the rule sets for the screen so the print rule sets just need to override the screen rule sets.
When you develop a website for mobile devices
You can use a special meta element that lets you configure a device's viewport.
To select elements with a specific attribute
You can use an attribute selector that consists of the element followed by the attribute name within brackets.
To select an element with a specific attribute value
You can use an attribute selector that consists of the element followed by the attribute name, an equal sign, and a value within quotation marks.
To create a thumbnail
You can use an image editor for sizing an image.
Within the form for the search function
You can use an input element of the "search" type for the text that's entered. This is good for semantic reasons.
To specify a relative measurement
You can use ems or percents. This type of measurement is relative to the size of another element.
To set margins and padding
You can use in (inches) as the unit of measure, which makes sense when you're printing on pages that are 8 1/2 by 11 inches.
To encode audio and video files in the formats that you need
You can use one of the many encoders that are currently available, including Miro Video Converter, iTunes, QuickTime, Windows Media Encoder, Adobe Media Encoder, Firefogg, FFmpeg, and Handbrake.
No Derivative Works
You can use only the original image and not images derived from it.
If you set the top and bottom margins for elements to zero
You can use padding to set the spacing between the elements.
To specify an absolute measurement
You can use pixels or points
To display an image at a size other than its full size
You can use the CSS height and width properties. Better, use an image editor to correctly size the image.
If you want the transforms applied when the mouse hovers over an image
You can use the hover pseudo-class with or without transition.
Attribution
You can use the image and images derived from it as long as you give credit as requested by the author or website providing the image.
Non-Commercial
You can use the image and images derived from it for non-commercial purposes only.
Hotspots
You can use the map and area elements to define an image map that provides clickable areas for the image.
To limit the width of an element
You can use the max-width property. This property is typically used to limit the width of an entire page.
To edit a CSS file
You can use the same techniques you use to edit an HTML file. The color coding and the error markers will help you spot syntax errors. The file must have the css extension.
To provide a datalist
You code a datalist element that contains the option elements that define the options in the datalist.
Type selectors
You code a selector for all elements of a specific type by naming the element.
To call a jQuery method
You code a selector, the dot operator, the method name, and any parameters within parentheses. Then, that method is applied to the element or elements that are selected by the selector.
To code a jQuery event handler
You code a selector, the dot operator, the name of the jQuery event method, and a function that handles the event within parentheses.
Inline styles
You code a style attribute for the HTML element with a value that contains all the CSS rules that apply to the element. The formatting is likely to get out of control.
When you use the embed element
You code all parameters as attributes, not as param elements.
To turn a Boolean attribute on
You code just the name of the attribute.
Within each media query
You code the CSS that adjusts the appearance of the web page so it's appropriate for the screen size that's specified by the query.
To use a jQuery UI widget
You code the HTML and jQuery for the widget. In the jQuery, you code a selector, the method to be used, and the options.
To start an email address
You code the email address following the mailto: prefix. You can also populate the subject, cc, bcc, or body fields in the email by coding a question mark after the address followed by one or more name/value pairs separated by ampersands.
Shorthand property
You code the font properties separated by spaces without coding the property names.
To start a Skype session
You code the name of the user you want to contact following the skype: prefix.
To call a phone number
You code the number following the tel: prefix. This is most useful for mobile devices that provide call functionality.
To add more tiers to a menu system
You continue the logic of the 3-tier menu.
@keyframes selector rule
You define the keyframes for the animation sequence. When those keyframes are played, they give the impression of motion.
To convert the width of an element from pixels to a percent
You divide the width of that element (the target) by the width of its parent element (the context) and then multiply that value by 100.
Benefit to using a CDN
You don't have to download the jQuery file.
The benefit to using a CDN
You don't have to manage the jQuery and jQuery Mobile versions on your server as new ones become available.
To turn a Boolean attribute off
You dont code the attribute.
Debugging a web page
You find the causes of the problems, fix them, and test again.
If you use a search engine like Google
You have no control over the search results. If you want to customize the results, you can use a search engine like Google Site Search
Disadvantage to using a CDN
You have to be connected to the Internet to use a CDN.
If you want the heading in the article to span the columns
You have to code the heading before the article in the HTML. In the future, this should work using the CSS3 column-span property.
Before you can use the SlickNav on a web page
You must include a link element for the slicknav.css file and a script element for the jquery.slicknav.min.js file. You must also include a script element for the jQuery core library, and this element must be coded before the script element for the jquery.slicknav.min.js file.
After you modify the URL in the JavaScript plugin so it points to the correct mobile page
You need to provide a script element for it on every page that you want redirected.
Deploying a website on the internet
You need to transfer the folders and files for that website from your computer or network to a web server on the Internet. Use an FTP program that uses File Transfer Protocol
To use an access key
You press a control key plus the access key. On a Windows system, use the Alt key for IE, Chrome, Safari, and Opera, and use Alt+Shift for Firefox. On a Mac, use Ctrl-Option for all browsers except IE, which can't be installed on a Mac.
HSL values
You provide a number from 1 through 359 that represents the hue that you want.
To create a scalable image
You remove any height and width attributes from the HTML for the image. In addition, you set the max-width property of the image to a percent of its containing block.
To activate a Tabs widget with jQuery
You select the top-level div element and call the tabs method.
In the jQuery for an accordion
You select the top-level div element of the accordion and call the accordion method with or without options.
To associate a control with a datalist
You set the list attribute of the control to the id of the datalist element.
To open a new browser window or tab
You set the target attribute of the <a> element to "_blank".
When you use Google Web Fonts
You should list one or more other font families in case the browser doesn't support the Google font reference.
If you do include a source element for a video media type other than MP4
You should realize that you don't typically have to include the type attribute.
When you specify the size of a font for a fluid layout
You should use ems or percents.
Testing a web page
You try to find all of the errors
Because different players accept different parameters
You typically specify the parameters for all the players you want to provide for. Then, if a player doesn't support a parameter, it will ignore it.
To specify a favicon for a page
You use a link tag exactly like the one shown above.
To configure the viewport
You use a meta element with the name attribute set to "viewport".
To implement a search function
You use an HTML form to submit the search text and other required data to the search engine.
To define the items in the datalist
You use option elements.
Unordered list
You use th ul element. Then, within this element, you code one li(list item) element for each item in the list
To code a link
You use the <a> element
To specify text if the image can't be displayed
You use the alt attribute.
To merge cells so a cell in a row spans two or more columns
You use the colspan attribute.
To float an image
You use the float property, and to set the margins around it, you use the margin property.
Tweening
You use the from group to set the properties for the first frame and the to group to set the properties for the last frame. Then, the browser recognizes that it needs to fill the "in-between" frames for you.
To run the bxSlider plugin
You use the jQuery code.
To include the jQuery UI CSS and JavaScript files in a web page
You use the link and script elements.
Ordered list
You use the ol element, along with one li element for each item in the list.
To merge cells so a cell in a column spans two or more rows
You use the rowspan attribute.
To specify the URL for the image
You use the src attribute.
When you provide separate style sheets for screen and print
You usually code the link element for the print style sheet last. That way, the print style sheet just needs to override the screen rules that need to be changed.
When you're coding the CSS for an HTML page
You usually don't need attribute selectors
When you use media queries
You want to be sure that the web page isn't reduced, since the media queries will adjust the appearance of the page based on the screen size. You should set the width property of the content attribute to "device-width", and you should set the initial-scale property to 1. You can also prevent or limit scaling with the user-scalable, minimum-scale, and maximum-scale properties.
When you use scalable images
You won't want to display an image larger than its native size.
When you code an embed element for a YouTube video
You'll need to know what URL to code for the src attribute.
As the width of an element in a fluid design changes
You'll want the width of any images within that element to change as well.
When you develop a website that uses RWD to provide for various screen sizes
You'll want to be sure it configures the viewport appropriately for mobile devices.
When you watch a video or listen to audio in your browser
Your media player is responsible for interpreting the media type. Also responsible for decoding the audio so it can direct the sound to the speakers on your device.
Password (6+ alphanumeric)
[a-zA-z0-9] {6, }
Phone number (999-999-9999)
\d{3} [\-]\d{3}[\-]\d{4}
Zip code (99999 or 99999-9999)
\d{5} ([\-]\d{4})?
Credit card (9999-9999-9999-9999)
^\d{4}-\d{4}-\d{4}-\d{4}$
lower-alpha
a, b, c, d, e ...
General steps for using a plugin within your web pages
1. Study the documentation for the plugin so you know what HTML and CSS it requires as well as what methods and options it provides. 2. If the plugin file or files are available via a Content Delivery Network (CDN) and you want to access them that way, get the URLs for them. Otherwise, download the file or files for the plugin, and save them in one of the folders of your website. 3. In the head element of the HTML for a page that will use the plugin, code the link element for any CSS files that are required. Also, code the script element for the jQuery library because all j Query plugins use that library. 4. If the download for a plugin includes an images folder, make sure the folder has the right structural relationship with both the CSS and JavaScript files for the plugin. 5.Code the HTML and CSS for the page so it's appropriate for the plugin. 6. If necessary, write the jQuery code that uses methods and options of the plugin.
Default font size for most browsers
16 pixels. Because of that, you can calculate the font size you want to use in ems by dividing the font size in pixels by 16. To calculate the font size as a percent, multiply the result by 100.
Themes
24 predefined themes as well as a ThemeRoller application that lets you create a custom theme. A theme is implemented by a CSS style sheet.
To use the SlickNav plugin
Download the Zip file from http://slicknav.com. Then, unzip this file and add the slicknav.css and jquery.slicknav.min.js files to your website. Add a script element with the jQuery code shown above that refers to the element that contains the unordered list for the menu and the element for the mobile menu. Then, use the CSS display property to hide and display the mobile menu depending on the size of the screen.
HTML 1.0
Draft specification released in January 1993 that was never adopted as a standard
Interactions
Draggable, droppable, resizable, and more.
2-tier navigation menu(multi-tier navigation menu)
Each item in the navigation bar can contain a submenu with additional items. You coded unordered lists within the li elements of another unordered list. You create a nested list.
If you use ems to specify the width
Each line in the text area will provide for more characters than ems except for a mono-spaced font. That's because an ems is approximately the width of a capital M and most characters are narrower than that.
odd
Every odd child or element.
3n
Every third child or element (3, 6, 9,...).
3n+1
Every third child or element starting with 1 (1, 4, 7,...)
A series of labels
More readable if the labels are aligned at the right.
translate(x-value, y-value)
Moves an element right or left and up or down.
translateX(value)
Moves an element to the right or left.
translateY(value)
Moves an element up or down.
px
Name=pixels Type=absolute A pixel represents single dot on a monitor. The number of dots per inch depends on the resolution of the monitor.
pt
Name=points Type=absolute A point is 1/72 of an inch.
WebM
Relatively new file format that is usually found with the .webm extension. Currently supported natively by Chrome, Firefox, and Opera, and Adobe has recently announced that future releases of Flash will also support WebM video.
Internet Explorer release and html5 rating
Release=11 HTML5 Test Rating=336
Opera release and html5 rating
Release=26 HTML5 Test Rating=497
Mozilla Firefox release and html5 rating
Release=35 HTML5 Test Rating=449
Google Chrome release and html5 rating
Release=39 HTML5 Test Rating=501
Apple Safari release and html5 rating
Release=8 HTML5 Test Rating=396
HTML 5.1
Released as the first minor revision of HTML 5 in April of 2013. Added the main element and removed the hgroup element.
Scripting the DOM-firstChild
Returns the Node object for the first child node of an element.
rotate(angle)
Rotates an element by a specified angle.
rotateX(angle)
Rotates an element horizontally.
rotateY(angle)
Rotates an element vertically.
Theora
Royalty free codec which can produce video stream that can be embedded in virtually any format. Typically mentioned in the same breath as Ogg.
ASP.NET
Runs on a Microsoft IIS web server. Its pages have the .aspx extension.
Database server
When an application server receives a request, it runs the specified script. This script uses the data from the web browser to get the appropriate data from here.
submit button
When it is clicked, and form and its data is submitted to the server for processing. Sends the data to the server automatically without using client-side code.
reset button
When it is clicked, the values in all of the controls on the form are reset to their default values.
Nested tables were used frequently
When tables were used for page layout. Now that tables should only be used for tabular data, you should rarely need testing.
Use div tags only
When the HTML5 semantic elements don't apply
Use span tags only
When the tags for identifying content don't apply
Image swap
When the user clicks on one of the thumbnail images at the top of the browser window, the caption and image below the thumbnails are changed.