CPT Final Exam Notes

Chapter 5:

Table headings, the cells that identify the contents of a row or

column, are marked using a th element

Data cells are marked with the td element and are used for any
content that is not considered a heading

To add a border to a Web table using HTML, use the border attribute
<table border="value"> ... </table>
where value is the size of the border in pixels

A spanning cell is a single cell that occupies more than one row or
one column in the table

To create a table cell that spans several columns, add the attribute
colspan=columns"
to the cell, where columns is the number of columns covered by the

cell

To create a table cell that spans several rows, add the attribute
rowspan=rows"
to the cell, where rows is the number of rows covered by the cell

To create a table caption, add the caption element directly below the
opening <table> tag with the syntax
<caption>content</caption>
where content is the content of the table caption

The summary attribute allows you to include a more detailed

description about the table
<table summary="description"> ... </table>

The amount of space between table cells is known as the cell spacing

The cell padding is the space between the cell contents and the cell
border

To define the space between table cells, add the cellspacing attribute

<table cellspacing=value> ... </table>

to the table element, where value is the space between table cells in
pixels

To define the padding within table cells, add the cellpadding attribute

<table cellpadding=value> ... </table>

to the table element, where value is the size of the padding space in pixels

To set the width of the table to a specific value, add the width attribute
<table width="value"> ... </table>

Many browsers also support the height attribute

<table height="value"> ... </table>

You can use HTML to set the row heights by applying the height
attribute
<tr height="value"> ... </tr>

A table frame specifies which sides of the table (or which sides of the
table cells) will have borders
<table border="value" frame="type"> ... </table>

A table rule specifies how the internal gridlines are drawn within the
table
<table border="value" rules="type"> ... </table>

TABLE CSS

To define the border model used by the table, apply the table style
border-collapse: type

where type is separate (the default) to keep all borders around cells
and the table itself apart, or collapse to merge all adjacent borders

To set the space between separated borders, apply the table style
border-spacing: value

where value is the space between the borders in any of the CSS units
of measure

To position a table caption, apply the style

caption-side: position
where position is top or bottom

To specify the number of columns in the layout, use

column-count: number;

where number is the number of columns in the layout.

To specify the width of the columns, use

column-width: width;

where width is the width of the columns expressed in one of the CSS units of
measure or as a percentage of the width of the element

To set the size of the gap between columns, use

column-gap: width;

where width is the width of the gap.

To add a border between the columns, use

column-rule: border;

where border is the format of the border.

To specify the width and number of columns in a single style property,

use
columns: width count;

where width is the width of each column and count

of columns in the layout.

is the total number

For specific browsers, add the -moz- vendor prefix for Firefox and the
webkit prefix for Safari and Chrome to these style properties.

CHAPTER 6

Forms are created using the form element, structured as follows:

<form attributes>
content
</form>

Where attributes are the attributes that control how the form is
processed and content is the content of the form.

Form attributes tell the browser the location of the server-based

program to be applied to the forms data.

Always specify an id or name for the form.

Two attributes are available to identify the form: id and name.

The syntax of the id and name attributes are as follows:

<form id=id name=name> </form>

Where id is the id of the form and name is the name of the form.

HTML and XHTML allow you to organize a form into a group of fields
called field sets.
<fieldset id=id>
controls
</fieldset>

where id identifies the field set and controls are the control elements
associated with fields within the field set

To add a legend to a field set, add the following tag after the opening
<fieldset> tag:

<legend>text</legend>
Where text is the text of the field set caption.

The general syntax of input elements is as follows:

<input type=type name=name id=id />

Where type specifies the type of input control, and the name and id
attributes provide the controls name and id.

You can also expressly link text with a control element.

The syntax for creating a form label is as follows:

<label for=id>label text</label>

Where id is the value of the id attribute for a fields control element,
and label text is the text of the label.

To define the default value of a field, add the attribute

value=value

to the control element, where value is the default value assumed by a

browser unless a user enters a different value

Starting with HTML5, you can also populate your input boxes with
placeholders. A placeholder is a text string that appears within the
control element and provides users with information about the kind of
information accepted by the field

A selection list is a list box from which a user selects a particular field
value or set of field values.
Selection lists are useful when there are a fixed set of possible
responses from the user.

You can create a selection list using the <select> element.

You can specify each individual selection item using the <option> element.

You can change the number of options displayed in the selection list by
modifying the size attribute. The syntax is as follows:

<select size= value> </select>

Where value is the number of items that the selection list displays in
the form.

Option buttons, or radio buttons allow users to make selections.

Unlike selection lists, option buttons only allow the user to select
one option at a time.

To create a text area box, use the textarea element:

<textarea rows="value" cols="value"> ... </textarea>

Where the rows and cols attributes define the dimensions of the input
box and the rows attribute indicates the number of lines in the input box.

To create a check box, use:

<input type=checkbox name=name value=value />

Where the name attribute identifies the check box controls and the
value attribute specifies the value sent to the server if the check box is
selected.

To specify that a check box be selected by default, use the checked

attribute as follows:
<input type=checkbox checked=checked />

To create a spinner control for numeric data, enter the input element

<input name=name type=number value=value step=value

min=value max=value />
where the value attribute provides the default field value, the step attribute
indicates the amount by which the field value changes when a user clicks the
spin arrow, the min attribute defines the minimum possible value, and the
max attribute defines the maximum possible value of the field

To create a range slider control for numeric data, use the following
input element:

<input name=name type=range value=value step=value

min=value max=value />

Command buttons are created using the <input> tag:

<input type=button value=text />

Submit buttons submit forms to the server for processing when clicked.
Syntax is as follows:
<input type=submit value=text />

Reset buttons reset forms to their original (default) values. Syntax is as

follows:
<input type=reset value=text />

Use the button element for greater artistic control over the appearance
of a button.

<button name=name type=text>

content
</button>
where the type attribute specifies the button type (submit, reset, or button
for creating a command button) and content is page elements displayed
within the button

To indicate that a field is required, add the required=required

attribute to the control element

To validate an e-mail address, set the data type to email. To validate a

Web address, set the data type to url

To validate that a text input box follows a character pattern, add the
attribute pattern=regex

where regex is a regular expression that defines the character pattern.

One disadvantage with the current validation checks is that they all
occur after a user has completed and submitted the form

The technique of immediate data validation and reporting of errors is

known as inline validation

One way of integrating inline validation into a Web form is to create

style rules that change the appearance of each control element based
on the validity of the data it contains
This can be done using some of the CSS3 pseudo-classes

CHAPTER 7

Bandwidth is a measure of the amount of data that can be sent

through a communication pipeline each second.
Consider bandwidth when working with multimedia on a Web site
Multimedia is much more accessible to Internet users because of
high-speed internet connections and the reduction of the file size
of multimedia clips

Multimedia is displayed within a Web page in a fashion similar to an

inline images
Controls are displayed as part of the Web page
To play a multimedia file, a browser often will have access to a
plug-in or add on
Starting with the widespread adoption of HTML5, many browsers
now include built-in support for audio and video files, removing
the need for plug-ins

Every sound wave is composed of two components:

 Amplitude- the height of the sound wave

Relates to sounds volume

Frequency- the speed at which the sound wave moves

Relates to sounds pitch

You hear sounds as a continuously varying signal

Must be converted to digital format to store as a computer file

Digital recording measures the sounds amplitude at discrete moments

in time
Each measurement is called a sample

Samples per second taken is called the sampling rate

Sampling resolution (also called bit depth) indicates the precision

in measuring the sound within each sample.
8-bit
16-bit
32-bit

There are different sound file formats used for different operating
systems.

Different file formats provide varying levels of sound quality and file
compression.

MP4 WAV OGG VORBIS

To add an audio clip under HTML5, use the audio element

<audio>
<source src=url1 />
<source src=url2 />

</audio>

where url1, url2, etc. are the possible sources of the audio clip.

Older browsers that dont support the HTML5 audio element instead
rely on plug-ins to play embedded media clips

To insert an embedded object such as a media player, you can nest the
embed element within the audio element

 Browsers recognizing the audio element will attempt to load the

audio clip that way

<audio src=overture.mp3>
<embed src=overture.mp3
width=250 height=10

type=audio/mpeg
/>

</audio>

The src, type, height, and width attributes constitute the basic HTML
attributes for the embed element, but they do not specify how users
interact with the embedded object

Audio html and example

Digital video adds a visual element to a Web page as well as provides

information

Video files are composed of a series of single images called frames

Many frames are sized to have width-to-height ratios or aspect ratios

of 4:3, though theatrical releases typically have aspect ratios of 1.85:1
or 2.39:1

The video bit rate, which is the amount of data that has to be
processed by the video player each second

The number of frames shown in a period of time is the frame rate

To add a video clip with HTML5 use

<video>
<source src=url1 />
<source src=url2 />

</video>

where url1, url2, etc. are the possible sources

of the video clip.

To add a Flash player (.swf) file, use the object element

<object data=url

type=application/x-shockwavewidth=value
height=value>

flash

<param name=movie value=url />

parameters
</object>

where url is the location and filename of the SWF file, and parameters
is other parameter elements that manage the appearance and actions
of the player

YouTube videos are embedded using either the YouTube Shockwave

Flash player file (.swf) or, depending on each users device and playing
preferences, an HTML5 video player.
<object width=value
height=value>
<param name=movie value=url />
parameters
<embed src=url

type=application/x-shockwave-flash width=value
height=value parameters />
</object>

Internet Explorer supports a technology called ActiveX to play

embedded media

ActiveX employs reusable software components that can be run from

within a variety of Windows programs

Each ActiveX component is identified by a unique string of characters

called the class id.

CHAPTER 8

To create a text shadow, apply the style

text-shadow: color offsetX offsetY blur;

where color is the color of the shadow, offsetX and offsetY are the
displacements of the shadow from the text in the horizontal and vertical
directions, and blur is the size of the blurring effect.

To apply a drop shadow to a page element, use the style

box-shadow: [inset] color offsetX offsetY blur [spread];

where the optional inset keyword places the shadow within the object,
and the optional spread value increases or decreases the size of the shadow
relative to the size of the object.

To apply an Internet Explorer filter, add the style

filter: progid:DXImageTransform.Microsoft.filter(param);

where filter is the name of an Internet Explorer visual effect, and

param is the parameters that apply to that effect

To apply an Internet Explorer filter in compliance with correct CSS

syntax, add the following style:
-ms-filter: progid:DXImageTransform.Microsoft.filter(param);

Styles that modify the placement or orientation of a page object are

organized under the transform style
transform: effect(params);

where effect is the transformation function that will be applied to the

object, and params are any parameters required by the transformation

To create a linear gradient, apply the function

linear-gradient(position || angle, color-stop, color-stop, )

where position is the starting point of the gradient using the keywords
left, right, top, and bottom; angle is the angle of the gradient; and color-stop
is the position and color of each color (entered as color position).

To create a radial gradient, apply the function

radial-gradient(center, shape size, color-stop, color-stop, )

where center is the position of the radial gradients center, shape is the
gradients shape, size is the size of the gradient, color is the initial color at
the center, and color-stop is a color and its position within the radial
gradient.

To use a graphic image as an element border, apply the style

border-image: url(url) slice repeat;

where url is the source of the border image file, slice is the size of the
slice cut from the border image file, and repeat indicates whether the border
slices should be stretched to cover the objects four sides or tiled

To create a semi-transparent object, apply the style opacity: value;

where value ranges from 0 (completely

(completely opaque).

To create a semi-transparent object under Internet Explorer version 8

or earlier, apply the filter Alpha(opacity=value)

where value ranges from 0 (completely

(completely opaque).

transparent) up to 1

transparent) up to 100

To create a style sheet for a specific media device, add the attribute
media = devices

to either the link element or the style element, where devices is one or
more of braille, embossed, handheld, print, projection, screen, speech, tty,
tv, or all. If you dont specify a media device, the style sheet applies to all
devices. Multiple media types should be entered in a comma-separated list

To create a style for specific media from within a style sheet, add the
rule
@media devices {styles}

where styles is the style rules that are applied to the different page
elements displayed by those media devices

To define a page box for a printout that indicates the page size,
margins, and orientation, use the style rule
@page {styles}
where styles is the styles that define the page.

To set the page size and orientation, use the style property
size: width height orientation;

where width and height are the width and height of the page, and
orientation is the orientation of the page (portrait or landscape).

To insert a page break before an element, use the style property

page-break-before: type;

where type is to always place a page break, avoid to never place a

page break, left to force a page break where the succeeding page will be a
left page, right to force a page break where the succeeding page will be a
right page, auto to allow browsers to determine whether or not to insert a
page break, or inherit to inherit the page break style of the parent element.

To insert a page break after an element, use the property

page-break-after: type;
where type has the same values as the page-break-before style.

To apply a page break inside an element, use the property

page-break-inside: type;
where type is auto, inherit, or avoid.

To create a media query for loading a style sheet, add the media
attribute
media = devices and|or (features)

to the link element, where devices is a list of media devices, and

features is a list of display features and their values as found on those
devices

To associate a style sheet with screen devices that are less than or
equal to a specific width, use the query
media = screen and (max-width: value)
where value is the maximum allowable width of the screens viewport

To associate a style sheet with screen devices that are greater than or
equal to a specific width, use the query
media = screen and (min-width: value)
where value is the minimum allowable width of the screens viewport.

To associate a style sheet with screen devices that fall within a range
of screen widths, use the following query:
media = screen and (min-width: value and max-width: value)

To associate a style sheet with screen devices in portrait or landscape

mode, use the query
media = screen and (orientation: type)
where type is either portrait or landscape

Chapter 9

SGML (Standard Generalized Markup Language)

Device-independent and system-independent
Introduced in the 1980s
Not intended for the World Wide Web

HTML
Standards get confusing among browsers
Can be applied inconsistently

The first line of an XHTML file contains a statement called a prolog

that indicates the document adheres to the syntax rules of XML. The
form of the XML prolog is
<?xml version=value encoding=type ?>

XML documents must be evaluated with an XML parser

An XML document with correct syntax is a well-formed document

XHTML documents must also include a single root element that

contains all other elements
For XHTML, that root element is the html element

Attribute minimization is when some attributes lack attribute values

XHTML doesnt allow attribute minimization

A valid document is a well-formed document that also contains only

those elements, attributes, and other features that have been defined
for the XML vocabulary that it uses

To specify the correct content and structure for a document, the

developers of an XML-based language can create a collection of rules
called the document type definition or DTD

Transitional: supports many of the presentational features of HTML,

including the deprecated elements and attributes. Best used for older
documents that contain deprecated features.

Frameset: used for documents containing frames, and also supports

deprecated elements and attributes

Strict: does not allow any presentational features or deprecated HTML

elements and attributes. Does not support frames or inline frames. It is
best used for documents that need to strictly conform to the latest
standards

The DTD used depends on the content of the document and the needs
of your users

To support old browsers, use the transitional DTD

To support old browsers in a framed Web site, use the frameset DTD

To support more current browsers and to weed out any use of

deprecated features, use the strict DTD

Elements not allowed under the strict DTD:

applet

basefont

center

dir

font

isindex

menu

noframes

strike

To specify which DTD is used by an XML document, you add a DOCTYPE

declaration directly after the XML prolog

<!DOCTYPE root type id url>

Validate website

A namespace is a unique identifier for elements and attributes

originating from a particular document type (like XHTML or MathML)

Two types of namespaces:

-

Default: applied to any element or attribute in the document

<root xmlns=namespace>

Local: applies to only select elements

Each element in the local namespace is marked by a prefix
attached to the element name
xmlns: prefix=namespace
Identify any element belonging to that namespace by modifying
the element name in the tag
prefix:element

To set XHTML as the default namespace for a document, add the xmlns
attribute to the html element with the following value:

<html xmlns=http://www.w3.org/1999/xhtml>

HTML5 was developed to be backward compatible with earlier versions

of HTML, and also to support the common application of HTML syntax

The rules for HTML5 are much more open than for XHTML

Parsed character data (PCDATA) is text processed by a browser or

parser

Unparsed character data (CDATA) is text not processed by the

browser or parser

A CDATA section marks a block of text as CDATA so that parsers

ignore any text within it

Chapter 10

JAVA

Spam is essentially junk e-mailmessages that advertise products

and services not requested by the recipient
A spammer is a person who sends these unsolicited e-mails,
sometimes in bulk

An e-mail harvester is a program that scans documents, usually Web

pages, looking for e-mail addresses

Server-side programs are placed on the server that hosts a Web site
Can be problematic

Client-side programming runs programs on each users computer

JavaScript is a subset of Java

Differences between Java and JavaScript:

Java is a compiled language
JavaScript is an interpreted language

A JavaScript program can be placed directly in an HTML file or it can be

saved in an external text file

Insert a client-side script in a Web page when using the script element
<script type="mime-type">
script commands
</script>

To place a script element in a Web page, insert the two-sided tag

<script type=mime-type>
script commands
</script>

where mime-type defines the language in which the script is written

and script commands represents commands written in the scripting
language

For JavaScript programs, set mime-type to text/javascript.

To place a script element in a Web page, insert the two-sided tag

<script type=mime-type>
script commands
</script>

where mime-type defines the language in which the script is written

and script commands represents commands written in the scripting
language

For JavaScript programs, set mime-type to text/javascript.

Every JavaScript program consists of a series of Statements

Each statementalso known as a commandis a single line that

indicates an action for the browser to take

An object is any itemfrom the browser window itself to a document

displayed in the browser to an element displayed within the document

A method is a process by which JavaScript manipulates or acts upon

the properties of an object

To write text to a Web page with JavaScript, use the method

document.write(text);
where text is the HTML code to be written to the Web page

JavaScript is case sensitive

Ignores most occurrences of extra white space

Do not break a statement into several lines

The + symbol used in this command combines several text strings into
a single text string

A variable is a named item in a program that stores a data value

You introduce variables in your code by declaring them

Declaring a variable tells the JavaScript interpreter to reserve
memory space for the variable

To declare a JavaScript variable, use the statement

var variable;
where variable is the name assigned to the variable.

To declare a JavaScript variable and set its initial value, use

var variable = value;

where value is the initial value of the variable.

JavaScript data types:

Numeric values
Text strings

 Boolean values
Null values

You must declare a variable before using it

JavaScript is a weakly typed language

The + symbol can be used with either numeric values or text strings
var total = 5 + 4;
var emLink = "cadler" + "@" + "mpl.gov";

A function is a collection of commands that performs an action or

returns a value

A function name identifies a function

Parameters are values used by the function

The function is executed only when called by another JavaScript

command
function_name(parameter values)

The code to access an external script file is:

<script src="url" type="mime-type"></script>

to the Web page, where url is the URL of the external document and
mime-type is the language of the code in the external script file.

For JavaScript files, set the mime-type to text/javascript.

Commenting your code is an important programming practice

// comment text

Modular code entails breaking up a programs different tasks into

smaller, more manageable chunks

An alert dialog box is a dialog box generated by JavaScript that

displays a text message with an OK button
alert(text);