anchor

the code to mark a location within a document to which you want to be able to link

• Syntax for anchor - <a name="id"></a>

attribute

• Elements also have these that provide browsers with additional information about how to treat them.  They are inserted into the element's opening tag using the following syntax:
  • attribute1="value1" attribute2="value2"
    • Attribute1 = name of attribute; value1 = value associate with attribute
  • Ex) <p align="right">Pixel Products</p>

• can be listed in any order, but must be separated from one another in the opening tag by white space
• Should enter their names in lowercase letters and enclose attribute values within quotation marks

block-level elements

an element within the body element that contains content that is displayed in a separate section within a web page set off from other blocks

• A block-level element contains content displayed in a separate section within the page, setting it off from other blocks - one example is the paragraph

block level element

    <h1>

• H = heading, one of the block level elements
• Headings are titles placed within the page body, usually to mark different topics appearing on the page
  • Html supports 6, numbered h1 to h6 (h1 the largest and most prominent, h6 the minor heading)

• Syntax - <hy>content</hy>
  • y = heading #

block level element

<p>

• Paragraph tag - <p>content of paragraph</p>
  • When a browser encounters this, it starts the enclosed content on a new line with blank space above it, separating the new paragraph from the preceding element

block level element

   lists <ul>

• For lists in which the items don't need to be placed in any special order, you can create an unordered list
• <ul>

                     <li> item1 - milk</li>

                     <li> item2 - pie</li>

                      …

                    </ul>

• This would show up in a browser as:
  • Milk
  • Pie

block level element

lists <ol>

• Use an ordered lists for items that have a prescribed sequential order
• <ol>

                        <li> item1 - milk</li>

                        <li> item2 - pie</li>

                           …

                         </ol>

• <li> - indicates a single list item
• This would show up by default in a browser as:
  1. Milk
  2. pie

block level elements

lists <dl>

• A definition list contains a list of definition terms with each term followed by a definition description
  • <dl>

                          <dt>term1</dt>

                          <dd>definition1</dd>

                           < dt>term2</dt>

                          <dd>definition2</dd>

                          </dl>

• This would show up as:
  • Term1

Definition

• Term 2

definition

block level element

<div>

a block-level element that is a generic container for block-level content; can be resized and floated to create different page layouts

• HTML and XHTML also support a block-level element called the div element, which is a generic container for any block-level content
• Syntax:

            <div>

Content (any page content you want to enclose)

          </div>

• Browsers display content in block, but usually don't apply any other formatting

cell padding

the sapce between the content of a table cell and the cell border

• The space between the content of each table cell and the cell's border is known as cell padding. (default is 1)
  • Syntax for cellpadding:
    • <table cellpadding="value">…</table>
      • Value = size of the cell padding in pixels

cell spacing

the amount of space between table cells

• To change the amount of space between table cells, which is known as the cell spacing, use the cellspacing attribute:
  • <table cellspacing="value">…</table>
    • Value = size of the cell spacing in pixels

check box

a control element for specifying an item as either present or absent

• Check boxes are similar to option buttons except that they limit the user to only one of two possible choices.  Syntax:
  • <input type="checkbox" name="name" id="id" value="value" />
    • Name and id attributes - identify the check box
    • Value - specifies the value hat is sent to the server to if the check box is selected
      • Required for every checkbox, unlike option buttons - name and id should both be included even though they usually contain the same information
  • Ex)
    • <input type="checkbox" name="party" id="party" value="democrat" />

• To have a web form open with a check box already selected, use the checked attribute as follows:
  • <input type="checkbox" checked="checked" />

class attribute

• To mark several elements as related, use the class attribute with the syntax:
  • Class="text"
    • Text = name of element class
  • Ex) <ul>

<li class="dairy">milk</li>

<li class="dairy">sour cream</li>

<li class="produce">celery</li>

<li class="produce">lettuce</li>

</ul>

client

a computer or other device that requests services from a server

• running computers known as clients.

closing tag

deprecated

when a feature of HTML or XHTML is being phased out by the W3C and might not be supported by future browsers

• Older features of HTML are often deprecated by the W3C, meaning that they might not be supported in current or future browsers and you should use caution in applying them.

dhtml

element

a distinct object in a web document, such as a paragraph, heading, or the page's title

field

field value

forms

• One of the most important uses of the web is to collect information from users to order items, register products, or complete surveys and questionnaires. 
  • This is often done using web forms
  • The data from these forms can then be sent to a program running on a web server or client for processing
• allow interactivity on the web
• information entered in a web page is passed to a script that uses the information in some way
• uses <form> and </form> elements
  

frame

a section of the browser window capable of displaying the content of an entire web page.

frameset

HTML code that defines the layout and content of the frames within the browser window

                       <html>

<head>

<title>title</title>

</head>

<frameset>

Frames

</frameset>

</html>

html

Hypertext markup language

language used to mark the elements of a document to create a web page

• A webpage is simply a text file that is written in a language called Hypertext Markup Language (HTML).

id attribute

• To identify distinct elements or groups of elements, use the id attribute
  • Syntax - id="text"
    • Text = unique name of id value
  • Ex) <p id ="leading">Welcome to pixel products.</p>

inline elements

 placed within block-level and are not separated from other page content, flowing "in-line" with the rest of the characters in the block

inline element

<b>

inline element

<i>

inline element

<u>

inline element

<span>

• A table cell occupies the intersection of a single row and a single column
  • Sometimes, needs to cover more than one row or column

• To create a cell that spans columns in a table, you enter the <td> tag as
  • <td colspan ="value">…</td>

• Span rows:
  • <td rowspan="value">…</td>

• Span 2 columns and 2 rows:
  • <td rowspan="2" colspan ="2">…</td>

input box

link

list box

the element in which a selection list occurs

• A selection list is a list box from which a user selects a particular value or set of values.
  • Good idea when a field's input is a fixed set of possible responses; in such a case, a selection list helps prevent spelling mistakes and erroneous entries
  • Syntax:
    • <select name="name" id="id">

<option>item1</option>

<option>item2</option>

.

.

.

</select>

• Name and id - identify the selection field
• Each option element displays one option from the selection list along with a list arrow to view additional selection options

• Syntax of the size attribute (to change the # of options displayed):
  • <select size="value">…</select>
    • Value - # of items that the selection list displays in the form
    • By specifying a value greater than 1, you change the selection list from a list box to a list box with a scroll bar

• To enable multiple selections form the list use this syntax:
  • <select multiple="multiple">…</select>
  • To make multiple selections from a selection list, a user must hold down an access key while making selections.  Two different access keys with Windows:
    • Press and hold ctrl key
    • Select first item, press and hold shift key, and select last item

• To specify the value that is sent to the server with the value attribute - syntax:
  • <option value="value">item</option>
    • Value - value associated with the selection item

• You can also specify which item in the selection list is selected, or highlighted, when the form is initially displayed
  • Can specify a different value using the following:
    • <option selected="selected">item</option>

nesting

• he technique of placing one element within another 
  • When one element contains another element, you must close the inside element before closing the outside element
  • Ex) <html><head>head content</head><body>body content</body></html>

one-sided tag

• contains no content - <element />
  • Element = element name
  • HTML allows you to enter one-sided tags using the syntax <element> (no space and closing slash), but XHTML doesn't - include space and closing slash at all times
  • Elements that employ one-sided tags are called empty elements because they contain on content
    • Ex) line break - <br / >

opening tag

option button

a control element that allows users to select a single option from a predefined list

• Option buttons, or radio buttons, confine users to making a selection from a list of predetermined choices - users can only select one option button at a time from a group.
  • Syntax: <input type="radio" name="name" id="id" value="value" />
    • Name - field containing the collection of option buttons
    • Id - identifies the specific option
    • Value = value of the selection options
  • The id attribute is optional, but you must include the name attribute because it groups distinct option buttons together

• See figure A-18 pg JVS A30
• If you want an option button to be selected when the form opens, you add the checked attribute to the input tag: <input type="radio" checked="checked" />

ordered list

• list for items that have a prescribed sequential order
• <ol>

<li> item1 - milk</li>

<li> item2 - pie</li>

…

</ol>

• <li> - indicates a single list item
• This would show up by default in a browser as:
  1. Milk
  2. pie

post method (form)

parameter that sends data in a spearate stream from the URL

sends form data in a separate data stream, allowing the web server to receive the data through what is called "standard input."

radio button

• Option buttons, or radio buttons, confine users to making a selection from a list of predetermined choices - users can only select one option button at a time from a group.
  • Syntax: <input type="radio" name="name" id="id" value="value" />
    • Name - field containing the collection of option buttons
    • Id - identifies the specific option
    • Value = value of the selection options
  • The id attribute is optional, but you must include the name attribute because it groups distinct option buttons together

• See figure A-18 pg JVS A30
• If you want an option button to be selected when the form opens, you add the checked attribute to the input tag: <input type="radio" checked="checked" />

reset button

• A web form usually contains push buttons that users can click to run a program, submit the form data for processing, or reset the form.  Syntax:
  • <input type="type" value="text" />
    • Type - button type
    • Text - text that appears on the button
    • to create a button to reset- value = reset
    • to create a button to run a program or script- value = button

• For more artistic control use this syntax for a button element:
  • <button name="name" id="id" value="value" type="type">

Content (of the page

</button>

• Name and value - specify name of the button and value sent to server-based program

root element

• Any markup document must include a root element, which contains all other elements in the document
  • For an HTML document, the root element is the html document
  • Basic structure of HTML document:
    • <html>

Content (anything in the document)

</html>

selection list

• A selection list is a list box from which a user selects a particular value or set of values.
  • Good idea when a field's input is a fixed set of possible responses; in such a case, a selection list helps prevent spelling mistakes and erroneous entries
  • Syntax:
    • <select name="name" id="id">

<option>item1</option>

<option>item2</option>

.

.

.

</select>

• Name and id - identify the selection field
• Each option element displays one option from the selection list along with a list arrow to view additional selection options

• Syntax of the size attribute (to change the # of options displayed):
  • <select size="value">…</select>
    • Value - # of items that the selection list displays in the form
    • By specifying a value greater than 1, you change the selection list from a list box to a list box with a scroll bar

• To enable multiple selections form the list use this syntax:
  • <select multiple="multiple">…</select>
  • To make multiple selections from a selection list, a user must hold down an access key while making selections.  Two different access keys with Windows:
    • Press and hold ctrl key
    • Select first item, press and hold shift key, and select last item

• To specify the value that is sent to the server with the value attribute - syntax:
  • <option value="value">item</option>
    • Value - value associated with the selection item

• You can also specify which item in the selection list is selected, or highlighted, when the form is initially displayed
  • Can specify a different value using the following:
    • <option selected="selected">item</option>

server

a network node that makes informatino or a service available on the network

 documents were stored on network computers called servers,

spanning cell

• A table cell occupies the intersection of a single row and a single column
  • Sometimes, needs to cover more than one row or column

• To create a cell that spans columns in a table, you enter the <td> tag as
  • <td colspan ="value">…</td>

• Span rows:
  • <td rowspan="value">…</td>

• Span 2 columns and 2 rows:
  • <td rowspan="2" colspan ="2">…</td>

special characters

• like copyright, math symbols. Syntax:
  • &code;
    • Code = code name or code number
    • Code numbers are preceded by a pound symbol (3)

• Special characters and codes table
  • See pg JVS A18

special character

    &copy

special character

    &gt

special character

    &lt

special character

&amp

submit button

• A web form usually contains push buttons that users can click to run a program, submit the form data for processing, or reset the form.  Syntax:
  • <input type="type" value="text" />
    • Type - button type
    • Text - text that appears on the button
    • To create a button to submit - value = submit
    • to create a button to run a program or script- value = button

• For more artistic control use this syntax for a button element:
  • <button name="name" id="id" value="value" type="type">

Content (of the page

</button>

• Name and value - specify name of the button and value sent to server-based program

tag

text boxes

text area

a control element from extended entries that can include several lines of text

• Allows users to insert several lines of text
• Syntax:
  • <textarea name="name" id="id" rows="value" cols="value">

Default text

</textarea>

two-sided tag

• Two-sided: <element> content</element>
  • Ex) <p> hi </p>
  • The scope of a two-sided tag is identified by its opening tag (<p>) and its closing tag (</p>), with the content (hi) placed between them
  • HTML doesn't distinguish between uppercase and lowercase letters, so you can use <p> or <P>, but XHTML requires all lowercase.

W3C

• A group of web developers, programmers, and analysts formed the World Wide Web Consortium (W3C) to create a set of standards for all browser manufacturers to follow
  • No enforcement power, but because agreeing on a uniform approach to web page creation is in the best interests of everyone, the W3C'S recommendations are usually followed

web browser

a program that retrieves a web page from a server and displays the page on a computer or other device

• To view a web page, a users runs a software program called a web browser, which retrieves the page from the server and displays it

web page

web server

white space

the blank spaces, tabs, and line breaks within the HTML file

 (Extensible Hypertext Markup Language)

designed to confront some of the problems associated with the different and competing versions of HTML and to better integrate HTML with XML

<!--  comment -->          

<DOCTYPE>                  

instruction to the web browser about what versino of the markup language the page is written in

three types:

strict

transitional

frameset

<a href=”url”> </a>        

link syntax

allows you to change content into a link

<b> </b>                   

<body> </body>             

body element tag

contains all of the content to be displayed in the web page

<br />                     

<div> </div>               

div tag

a block-level element that is a generic container for block-level content; can be resized and floated to create different page layouts

• HTML and XHTML also support a block-level element called the div element, which is a generic container for any block-level content
• Syntax:

            <div>

Content (any page content you want to enclose)

          </div>

• Browsers display content in block, but usually don't apply any other formatting

<dl> </dl>

<dt> </dt>               

<h1> </h1>                 

header tag

can go from 1-6

<head> </head>             

head element tag

 contains information about the document, such as the document's title or keywords that a search engine on the web might use to locate the document for others to use

<hr />                     

inserts a horizontal rule (line) in the HTML document

horizontal rule tag

<html> </html>             

• Any markup document must include a root element, which contains all other elements in the document
  • For an HTML document, the root element is the html document
  • Basic structure of HTML document:
    • <html>

Content (anything in the document)

</html>

<i> </i>                   

<iframe> </iframe>         

• displayed as a separate box or window within a web page in much the same way as inline images are placed within a page
• Syntax:

<iframe src="url">

Alternate content

</iframe>

• Url = url of document you want displayed in the inline frame
• Alternate content - content you want displayed by browsers that don't support inline frames

<img> </img>               

• The most common nontextual object is the graphic image, which is placed within a web page as an inline image.
  • Must be placed within a block-level element such as a paragraph
  • To mark an inline image, use the img element:
    • <img src="url" alt="text"/>
      • Url = location and name of image file
      • Text = alternative text string that browsers can sue in place of an image

<meta> </meta>             

• store information about the document that could be of use to program running on web servers using a one-sided tag - <meta />
  • Ex) <meta name="text" content="text" scheme="text" http-equiv="text" />
  • Author meta tag - <meta name="author" content="name" />

• Some websites use search engines to create lists of web pages devoted to particular topics - you can do this with a list of keywords in <meta /> tags
  • Ex)
    • <meta name="description" content="Pixel Products" />
    • <meta name="keywords" content="digital imaging, scanning, graphics"

• A web document can contain only one title element, but several meta elements

<ol> </ol>

  <li>  </li>             

<p> </p>                   

paragraph tag

inserts a new paragraph tag

<span> </span>             

<style> </style>           

• embedded style definitions within the head element of a web document using the style element
  • Syntax:

<style>

Style declarations

</style>

• Style declarations - declarations of different styles to be applied to the document
  • Applied to a group of elements within the document called the selector
  • Style declaration has the syntax:
    • Selector {style1: value1; style2: value2; style3: value3;…}
      • Selector - identifies and element or elements within the document
      • Style: value pairs - follow the same syntax that you use to apply inline styles to elements

• Ex) - to make all h1 headings red:
  • <head>

<title> web page title </title>

<style>

h1 {color: red}

</style>

</head>

• The style element supports several attributes that define the type of style sheet language to be used, the type of output media for which the style is designed, and a name or id that identifies the style elements. Syntax:
  • <style type="mime_type" media="media_type" title="text" id="text">

Style declarations

• </style>

<table> </table>

• marked using the two-sided <table> tag
  • Nested within the table element is the tr element, which encloses the content of each table row.
  • The td element, which enclosed the content of each tr element:
  • Structure of web table:
    • <table>

<tr>

<td> first cell</td>

<td>second cell</td>

</tr>

<tr>

<td>third cell</td>

<td> fourth cell</td>

</tr>

</table>

• Table with two rows and two columns
• <td> = table data

   <th> </th>

   <tr> </tr>

      <td>  </td>

   <tf> </tf>              

<title> </title>

• specifies the page title that is displayed in the title bar of a user's web browser
  • Ex)
    • <head>

<title> Pixel Products</title>

</head>

<ul> </ul>

places an element at defined coordinates within its parent element

attribute selector

border

• Border width can be expressed using units of length or with the keywords "thin," "medium," or "thick."
• Border color is defined using a color name or value
• To work with individual borders, you can identify specific borders to format using the styles:
  • Border-top: width style color
  • Border-right: width style color
  • Border-bottom: width style color
  • Border-left: width style color

cascading style sheet

contextual selector

selector that applies a style based on the context in which an element is

• way to apply a style based on the context in which an element is used
• Syntax) parent descendant {style}
  • Parent = parent element
  • Descendant = descendant of the parent
  • Styles = styles to be applied to the descendant element

• Ex)
  • li b {color: blue}

class

• To apply a style to a group of elements use the selector:
  • .class {styles}
    • Class = value of the class attribute for the group

css

• The most commonly used style sheet language used on the web is the Cascading Style Sheets language, known as CSS.
  • The specifications for CSS are maintained by the World Wide Web(W3C) Consortium and several version of CSS exist with varying levels of browser support

<div> tag

a block-level element that is a generic container for block-level content; can be resized and floated to create different page layouts

• HTML and XHTML also support a block-level element called the div element, which is a generic container for any block-level content
• Syntax:

            <div>

Content (any page content you want to enclose)

          </div>

• Browsers display content in block, but usually don't apply any other formatting

em unit

typesetting standard

equal to the width of the capital letter "M"

embedded style

ex unit

typesetting standard

equal to the height of a lowercase "x"

external style

float

• Style to float an element:
  • Float: margin
    • Margin = left or right

font and text styles

font-style: type

font-weight: weight

text-decoration: type

text-transform: type

text-transform: capitalize

font-variant: type

font-family: fonts

font-size: length

text-align: type

vertical-align: type

generic font

name for a grouping of fonts that share a similar appearnce;

five types:

serif

sans-serif

monospace

cursive

fantasy

name for the general description of the font's appearance

hiding elements

• Two ways:
  • Set display style to none:
    • Address {display: none{
  • Use visibility style:
    • Visibility: type
      • Type = can be
        • Visible - element visible
        • Hidden - hides element
        • Collapse - used with the tables to prevent a row or column from being displayed
        • Inherit (default) - causes an element to inherit the visibility of its parent

id

• To apply a style to an element based on the value of its id attribute use:
  • #id {styles}
    • Id = id value of an element in the document

inline style

• style that is applied to an element by adding the style attribute to the elements markup tag
  • Syntax:

<element style="style1: value1; style2: value2; style3: value3;…">

• Element - name of the element
• Style1, style2, style3 - names of the styles
• Value1,value2, value3 - values associated with each style

• Ex)
  • <h1 style="color: red">Pixal Products</h1>

• Easy to use and interpret because they are applied directly to the elements they affect
• Problems with inline style sheets:
  • Applies only to the specific element that it modifies

kerning

amount of space between letters

leading

margin

• 4 styles that can be sued to control the size of the margin of a page element:
  • Margin-top: value
  • Margin-right: value
  • Margin-bottom: value
  • Margin-left: value
    • Value = size of the margin expressed in absolute units or as a percentage of the width of the parent element
    • Can also use the value auto
    • Ex) h1 {margin-top: 5; margin-right: 10; margin-bottom: 5; margin-left: 10}

• Margin styles can also be combined into a single style:
  • Margin: top right bottom left
    • Top right bottom left- sizes of the corresponding margins

padding

• To increase the space between element content and its border, you increase the size of the padding using:
  • Padding-top: value
  • Padding-right: value
  • Padding-bottom: value
  • Padding -left: value
  • OR padding: top right bottom left
    • Value = value expressed in absolute units or as a percentage of the width of the block-level element

pixel

positioning

placing elements at specific coordinates on a page

pseudo-class

a classification of an element based on its status, position, or current use in a document

used to create a rollover effect

• To create a style for one, use:
  • Selector: pseudoclass {styles}
    • Selector = element or group of elements within the document
    • Pseudoclass = name of a pseudo-class
    • Styles = styles you want to apply

pseudo-element

element that is not part of the document tree, but is instead abstracted from what is known of an element's content, use, or position in the document

• Syntax:
  • Selector: pseudoelement {styles}
    • Selector = element or group of elements within a document
    • Pseudoelement = abstract element based on the selector
    • Styles = styles you want to apply to the pseudo element

relative positioning

moves an element a specific distance from where the browser would have placed it

rollover effect

visual effect in which an object changes apperance in response to the pointer hovering over the object

created by a pseudo-class

scalable

selector

<span> tag

• best used as inline elements
• only becomes useful when you apply a style to it
• can apply both a class and id attribute to it
• ex)
  • <span class="name"> content</span>

stacking elements

• By default, elements that are defined later in a document are placed on top of earlier elements.  To specify a different stacking order use:
  • z-index: value
    • Value = positive or negative integer or "auto"

style inheritance

rule that specifies how styles are passed or cascaded down the document hierarchy from the more general levels to the more specific, when there is no conflict

causes style declarations to cascade down through the document hierarchy

a collection of properties that describes how elements within a document  should be rendered by the device presenting the document