<blod:.quote> <tt><ltt>
<lblod:.quole> <ul> <lui>
<var> <lvar>
Body <bodp <lbodp Identifies the body of on HTMLdocument Unordered list Identifies on unordered !bulletedl Jist
Displays text in boldface Variable Indicates a variable or program argument
Bold Forces a line break in the document
Creates a push button
Break (line break) <br/> Adds a table caption
Identifies a citation or source reference
Button <button> </ button> Identifies a computer code fragment HTML ATTRIBUTES
<caption> </caption> Creates a group of table column attributes ATTRIBUTE ELEMENTS IT VALUE TYPES FUNCTION
Creates a specifi c column group NAME
Cite <Cite> <Ieite> abbr WORKS WITH
Adds comments not displayed as part of the page accept
Code <code> </code> Identifies definition in a glossary or definition list accept- <ld>, <lh> Text Includes on abbreviation for
Indicates a defining instance of a given term charset
Column (table) <COl I> Creates definition or glossary list accesskey header cell name
Identifies a term to be defined
Displays strikethrough text action dorm>, <input> Comma-separated list of Provides a list of MIME types for
Sets apart element's contents on separate line all media types file upload
Column group <colgroup> Indicates emphasis Iusually. displays in italics) all
<lcolgroup> Groups together related controls
Modifies font appearance archive dorm> Space-separated list of Provides a list of supported
Creates on interactive form axis character encodings character sets
Comment <! -- --> Defines a frame bgcolor
Defines a group of frames border
Definition description <dd> <ldd> cellpadding <O>, <area>, Chorset !A single character Identifies an accessibility key
Identifies HTML document header cellspocing character
Defining instance <dfn> </dfn> Identifies heading levels 1-6 char <button>, <input>, lrom 150-106461
Adds a horizontal line
Definition list <dl> <ldl> Identifies HTML document charoff <label>, <legend>,
Embeds on image
Creates on inline subwindow (floating frame) charset <lextarea>
Specifies a form control (user input) checked
Definition term <dl> <ldl> Marks up a document, identifying text inserted in cite dorm> URI IUniform Resource Identifies a server-side form
o new version cite Identifier! handler
Deleted text <del> </del> Displays text in italics class
Identifies text to be entered by the user
Division <div> <ldiv> Assigns labels to form fields classid <area>, <img> Text Displays a short text description
Sets apart groups of form elements in boxes codebase of on image
Emphasis <em> <lem> Used in document head to create links to other codetype
documents cols
Fleldset <fieldsef></fieldsef> Identifies an item in an orde red or unordered list cols <input> CDATA lA sequence of Displays a short text description
Identifies a client-side image mop colspon characters from the docu- of form buttons for non-graphical
Font <font> </font> Conta ins descriptive information content
Contains alternate content for browsers not coords ment's cha racter set. May browsers
supporting frames coords include entities.)
Form dorm> <!form> Contains alternate content for browsers not data
supporting client-side scripts datetime
Frame <frame I> Identifies a generic embedded object declare <Object> CDATA Contains a URL where on archive
Identifies a selectable choice in a form defer
Frameset <framesel> Creates a logical group of options in a form dir file is located
<l framesef> Identifies a numbered list
Identifies a paragraph <ld>, <lh> CDATA Includes a comma-separated list
Contains a set of values required by an object at
Head <head> </head> run-time of related headers
Overrides HTML's text formatting
Heading 1-6 <hl> </hb, <h2> <lh2> . Identifies a short inline quotation <body>, <fable>, Color Specifies background color.
Sample output <td>, <lh>, <tr>
Horizontal rule <hr I> Encloses script statements
Creates a drop-down menu in a form <img>, <fable> Pixels Controls border width around table
HTML <html> <lhtml> Renders text in a "small" font
Contains a customizable inline element <table> Length (nn for pixels or nn% Adds extra space w ithin cells
Displays text as strongly emphasized (usually, as
Image <img/> boldface) for percentage lengthI
Includes style information in the document header
lnlineframe <iframe> <liframe> Renders text as subscript < fabl e > Length Adds extra space between cells
Renders text as superscript
Input <input I> Identifies a table <col>, <colgroup>. Character lA single charac- Identifies alignment character
Inserted text <ins> <fins> Creates a grouping of table body elements <lbodp, <ld>. ter from 150-106461 for table elements. For instance,
Creates a table data cell <ffoof>, <fh >, char=";"
Identifies a table footer
Italic text <i><li> Creates a grouping of rows in a table header <thead>, <lr>
Keyboard text <kbd> <ikbd> Identifies a table header cell
Label <label> </label> Identifies a row of cells in a table <col>, <colgroup>, Length Specifies offset for alignment
Legend <legend> <!legend> Creates a multiple line text field in a form
Unk <link/> <!body>, <ld>, character
<ffool>, <th>,
<fhead>, <fr>
<a>, <link>, Charset lA character Identifies character encoding of
<scrip!> encoding) linked resource
Ust Item <li> <IIi> <input> (checked) Identifies o pre-selected option in
Map <mop> </mop> checkboxes and radio buttons
Meta information <metal>
Noframes <noframes> <blockquote>, <q> URI Identifies URI for source document
<lnofromes>
Noscript <noscript> <lnoscripl> <del>. <ins> URI Includes info on reason for change
All except, CDATA Identifies a space-separated list of
<bose>. <head>, classes in an element
<hlml>. <meta>.
<param>, <script>,
Object <object> </object> <style>. <title>
Option <Option> </option>
Option group <optgroup> <loptgroup> <objecl> URI. Contains a URI for an object's
Ordered list <OI> <lol>
Paragraph <P> <lp> implementation
Parameter <porom I>
<Object> URI Identifies a base URI for classid,
data, archive
<object> Media type Identifies content type for code
dramesel> Multiple lengths Define columns in a frames page
ldefou l l l 0 0 %1
Preformatted text <pre> </pre> <textarea> Number Defines the width lin characters) of
Quotation <q> <lq> a text area
Sample text <samp> <lsamp>
Script <scri pt> </script> <td>, <lh> Number Specifies the number of table
Select <select> </select>
Small <small> </small> columns spanned by a single cell
Span <span> </span>
Strong emphasis <strong> </strong> <meta> CDATA Identifies information types
included in <meta> element
<a> Coords Sets coordinates for clickable area
in client-side image maps
<area> Coords (A comma- Sets the points that define a shape
separated li st of lengthsI in an image mop
Style <style> </style> <Object> URI Contains a reference to on object's
Subscript <SUb> </sub> data
SUperscript <sup> </sup>
Table <table> </table> <del>, <ins> Date and time in ISO date Identifies date and time of change
Table body <lbodp <llbodp format
Table data <td> <ltd>
Table footer <ffool> <ltfool> <object> !declare! Declares on object w ithout
Table header <lhead> <lthead> instantiating it
Table header cell <fh > <llh>
Table row <fr> <fir> <script> (defer) Enables user agent to defer
Textarea <fextareo> <ltextorea>
All except, <base>, lltr I rill execution of script
Specifies direction for weak/
<bdo>, <br>, neutral text
<frame>, <frame-
set>, <iframe>,
<param>, <script>
..- ~
dir <bdo> lltrlrtll Specifies directionality of text onfocus <O>, <area>. Script cdtses an action when on i
disabled <button>. <input>, element receives the focus
<button>. <input>, !disabledI Disables form elements <label>, <select>,
enctype <lextarea>
for <optgroup>.
frame <option >, <select>,
frameborder <lextorea>
headers
height dorm> Media type Sets the encoding method for
height
href form data
href
hreflang <label> ID reference defined by Matches field 10 value onkeydown All except: <base>, Script Causes an action when a k:ey is
http-equiv <table> onkeypress <bdo>. <br>. Script pressed down
id other attributes Identifies which parts of a table doni>, <frame>,
<frame>. <iframe> structure should display dramesel>.
ismap void I above Ibelowl hsides <head>. <hfmb,
label llhs Irhs Ivisdes Ibox I Turns frame borders on or off <ifrome>. <meta>.
label <param>. <script>,
lang border <style>. <title>
longdesc 11101 (same as above}
longdesc
marginheight <ld>, <lh> ID reference defined by Contains a list of IDs for header
marginwidth other attributes cells
maxlength
media <ifram e> Length Specifies frame height Causes on action when a key is
media pressed and released
method <img>. <Object> Length Specifies an image's or object's
multiple height in pixels Causes an action when a key is
name released
name <a>. <area>. URI Identifies a URI for a linked onkeyup !same as above} Script Causes an action when the docu-
name <link> resource men! has been loaded
name Causes an action when all the
name <base> URI Identifies a URI that acts as a onload <body> Script frames hove been loaded
name base URI Causes on action when a pointer
or mouse button is pressed down
.name <a>. <link> A language code Specifies a language code onload <framesef> Sc ri pt
name
name <meta> Name Identifies an HTTP response
name header name
nohref onmouse- All except: <bose>. Sc ript
noresize All except: <base>, ID Specifies a document-wide down <bdo>, <br>, Script
on blur <head>, <html>, unique ID doni>. <frame>.
on mouse- dramesef>,
onchange <meta>, <script>. move <head>, <html>,
onclick <ifrome>. <meta>.
<style>. <Iitie> <porom>, <script>,
ondblclick <style>, <title>
<img>, <input> lismapl Identifies a server-side image mop
!some as above}
<optgroup> Text Identifies a group of options in
a form
Causes on action when a pointer
<opti on> Text Specifies on option nome in a form or mouse is moved within the
element
All except, Language code Indicates the language being used Causes an action when a pointer
is moved away from the element
<bose>, <br>. in on element's contents onmouseout All except: <bose>. Script
onmouseover <bdo>, <br>, Script
<frame>. <frame- doni>. <frame>.
d ramesef>,
set>. <iframe>, <head>, <htm l>,
<iframe>. <meta>.
<parom >, <script> <param>. <script>.
<style>, <title>
<frame>. <ifrome> URI Provides a link to a long descrip-
lion of a frame's contents !same as aboveI
< img > URI Provides a link to a long descrip-
lion for non-graphical browsers
<frame>. <iframe> Pixe ls Specifies frame margin height Causes on action when a pointer or
cursor is moved onto the element
<frame>. <ifrome> Pixels Specifies frame margin width
<input> Number Specifies maximum number of onmouseup (some as aboveI Script Causes an action when a pointer
characters for text fields
or mouse butlon is released
<link> Single or comma-separated Identifies the media a linked style onreset dorm > Script Causes an action when a form
list of media descriptors sheet should apply to is reset
<style> Single or comma-separated Identifies the media an embedded onselect <i nput>, Script Causes an action when some text
dorm> list of media descriptors style sheet should apply to onsubmit <lextorea> Script
Specifies the HTTP method used to dorm> is selected
lget Ipostl submit a form
Causes an action when a form is
submitted
<select> (multipleI Permits multiple selections in a form onunlood <bOdY> Script Causes an action when the docu-
<a> COATA Creates a named marker in a men! has been removed
document
onunlood <fromesef> Script Causes an action when all the
frames have been removed
<bUI!On >. COATA Allows a form control to be named
< lextarea > profile <head> URI links to a named dictionary of
<select> COATA Assigns a name to a form field meta information
<form> COATA Assigns a name to a form for readonly <input>, (reodonlyl Prevents editing of text fields in
scripting purposes <lextareo>
rei <O>, <link> Link types a form
rev <a>. <link> Link types
<frame>. <iframe> COATA Assigns a name to a frame for rows dromesef> Multiple lengths Identifies forward link types
rows <lextareo> Nu mber
targeting purposes Identifies reverse link types
<img> COATA Assig ns a name to an image for Specifies a list of lengths
sc ripting purposes Sets the number of rows in a
text area
<input>. <object> COATA Assigns a name for scripting
purposes rowspan <ld>, <lh> Number Specifies the number of rows
<mop> COATA Assigns a nome for reference by rules spanned by a single table cell
usemop scheme <table> none 1groups 1rows I Controls the display of rules within
<meta> eels I all
<meta> Nome Assigns a name to meta information scope a table
COATA
<parom > COATA Specifies the nome of the object scrolling Identifies the expected format of
properly being set selected
shape the conte nt otlribute
<area> Inch ref) Identifies a region that ha s no shape <td>. <th> row 1coli rowgroup I Indicates the scope covered by
colg roup I
action in an image map <frame>, <ifrome> Iyes 1no 1auto) header cells
<option>
<frame> lnoresizel Prevents resizing of frames <a> lselecledl Turns scroll bars on or off in a frame
<a>. <area >. Script lA script expression Causes an action when the rect 1circle 1poly 1default Defines preselected option in a form
element loses the focus
<butlon >. <input>, or code segme nt! Defines a selectable region in a
<label>. <select>. client-side image mop
<lextoreo>
< area> reel I circle Ipoly I default Controls interpretation of
coordinates in on image mop
<input>. <select>, Script Causes an action when the
<lexto reo> element va lue is changed size <input> CDATA Specifies the size lin characters! of
a text form control
All except: <base>, Script Causes an action when pointer
<bdo>, <br>, !mouse) button is clicked size <select> Number Specifies the number of rows
<font>. <frame>. visible in a drop-down menu
<fromesel >. span <COl> Number Specifies the number of table col-
<head>, <hlmb. umns effected by COL attributes
<iframe>. <meta>, spa n <colg roup> Number Specifies the default number of
<porom>. <script>, table columns in a column group
<style>, <Iitie> src <frame>, <iframe> URI Identifies the source of frame content
{some as above) Script Causes on action when pointer src <input> URI Identifies the URI of on image for
[mouse) button is double clicked
form fields with images
:
-
rnNTINI I~n nt.a nTl-l~D c.1n~
SPARKCHARTS'" 1 ~::~
HTML
KEY HTML TERMS CREATING TABLES
Hypertext: A means of connecting documents by text links. <table wi.dt~"##" cellpoddi~"##" cellspocin~"##" border="##">
HTML: Hypertext Markup Language. A language that uses elements, attributes, and values
(markup) to construct and link (hypertext) documents for easy access and display. <tr><td>Row 1 Cell 1</td><td>Row 1 Cell Z<ltd><ltr>
XML: Extensible Markup Language. A customizable markup language.
• XHTML: Extensible Hypertext Markup Language. A reformulation of HTML 4 as an XML 1.0 <tr><td>Row Z Cel l 1</td><td>Row Z Cell Z<ltd><ltr>
application.
• OHTML: Dynamic Hypertext Markup Language. HTML, CSS, and Javascri pt combined to create <!tabl e> ,
dynamic (as opposed to static) pages. !Use the <tabl e><ltable> element to create a table, the <tr ><ltr > element to define rows, and
SGML: stanvard Generalized Markup Language. The mother language from which HTML,
XHTML, and XML were created. the <td><ltd> element to create cells. To create a dynamic table that resizes according to the ;
Element: A container that specifies the nature, formatting, or function of a portion of a docu-
ment. E.g., <form>, <table>, <p>, <irng I>. browser window size, use% values in the width and/or height attributes.
Tag : Signifies the opening and closing of an element. E.g., <table> <!table>.
Empty element: An element that has no content and is written as a single tag. E.g., <i.rng 1>. CONSTRUCTING FORMS
• Block element: causes a tine break after the element. E.g., <p>, <hl>, <table>, <br I>.
• tnline element: Displays inline and does not generate a line break. E.g., <irng I>, <b>, <i.>. • Identity where the form information will be sent.
Proprietary element: An element not part of the official HTML recommendation. Often, it is <fo rm acti.on="mailto: name@emailaddress. com" method~"post">
supported only by the browser fo r which it was developed. E.g., Netscape's <blink> element. • Create a text box.
• Deprecated element or attribute : An element or attribute that is being phased out of HTML <p>Name <input type="text" name="name" si.ze="20" maxl ength="40" l><ip>
and therefol e eventually will not be supported by browsers. • Create a text input area.
• Attribute: Li sts a characteristic of a particu lar element. E.g, <table border~"3">. <p>Enter text: <textarea name="response" rows~"S" cols="ZS"> <ltextarea><lp>
• Value: Modifies the attribute in which it occurs. E.g., <table border~"3 ">.
• Nesting: The practice of placing elements inside one another (as opposed to overlapping • Offer a choice of one item with radio buttons.
them). Nesting is the correct syntax for HTML. overlapping is incorrect and can cause prob- Choice 1: <input type="radi.o" name="choi.ces" value="choi.ce 1"
lems with your Web page.
• Correctly nested elements: <tr><td><ltd><ltr > checked~"checked" l><br I>
• Incorrectly nested (overlapped) elements: <tr><td><ltr><ltd> Choice 2: <input type="radi.o" ncme="choices" value="choi.ce 2" l><br I>
User agent (UA) : The means (e.g., a web browser) by which one accesses an HTML document.
Client-side: Describes anything that is done on the user's computer. Choice 3: <input type="radi.o" ncme="choices" value="choice 3" l><br I>
Server-side: Describes anything that is done on the Web server.
CGI: common Gateway Interface. A protocol that is used for managing the exchange of infor- • Offer multiple choices with check boxes.
mation between the user, the server, and the Web site owner. <i.~ t~"checkbox" ~"selections" val ~"selection1" />Sel ection 1<br I>
Script: A portion of programming code that can function in a Web page or on the server, but <i.~ t~"checkbox" ~"selections" val~"selectionZ" />Selection Z<br I>
not as a stand-atone program.
• Applet: A small program that can be embedded in a Web page. <i~ type="checkbox" ncme="selecti.ons" value="sel ecti.on3" />Selection 3<br I>
Well-formed document: A document that uses correct HTML or XHTML syntax.
Valid document: A document that conforms to a particular DTD (Document Type Definition). i• Use the select and option elements to create a scrolling list box (size attribute value greater
• DTD: Document Type Definition. A standard that identifies the elements, attributes, and values
that comprise HTML, XHTML, XML, or any other language created with SGML. than 1) or a pull-down menu (size attribute value of 1).
• W3C: The world Wide Web consortium. The group responsible for establishing standards for <sel ect ncrne="pulldowrmenu" si.ze="3">
the world Wide web (www.w3.org). <opti.on value="firsti.tem">Fi rst Item<lopti.on>
<opti.on value="secondi tem">Second Item<lopti.on>
XHTML DISTINCTIONS <opti.on value="thirdi tem">Third Item<lopti.on>
<opti.on value="fourthitem">Fourth I tem<lopti.on>
XHTML 1.0 is the current recommendation by the W3C for authoring Web documents. Although <!sel ect>
it uses the same elements as HTML, there are a number of important distinctions between the
two. In particular XHTML is much stricter regarding syntax. The following points are important to • Use the "password" attribute to create a password field.
remember when writing valid XHTML:
• Documents must be well-formed (syntactically correct). <input type="password" s i.ze="lS" I>
• Element and attribute names must be in lowercase.
• End tags are required for all non-empty elements. • Use the "submit" and "reset• attributes to create submit/reset buttons
• Empty elements should be written in a minimized form. E.g., <br />. <input type="submi t" l><br I>
• Attribute values must always be in quotation marks. <input type="reset" I>
• All attributes must have values.
CREATING A FRAMESET PAGE
SYNTAX
<html>
Element with content: <elerrentName attribut~"value">Content<lelerrentName> <head><title>Frameset Page<lti.tle><lhead>
Ex: <a href~"ney,page . hbn''>LinkNane<la> <frameset cols="ZS%, 75%">
Empty element: <el enentNane attribvt~"value" I> <frcrne src="docl..lllent_a . htm" I>
Ex: <i.rng src~"ITMJiX. jpg" I>
<frame src="document_b. htm" I>
NUMBERED (ORDERED) LISTS <lfromeset>
<ol type~"I"> displays capital Roman numerals. < l h tml >
Note: For the frameset page to display property, the corresponding frame documents must also
• <ol type~"i"> displays small Roman numerals. be created (in this case, document_a.htm and document_b.htm).
<ol type~"A"> displays capital letters.
<ol type~"a"> displays small letters. APPLYING STYLE SHEETS
• <ol type~"1"> displays Arabic numerals (default). • Link to an external style sheet:
<head>
BULLETED (UNORDERED) LISTS <link rel="stylesheet" type~"textlcss" href="stylesheetdoc. css" I>
' <Ul type~"square"> displays a SOlid, Square bu llet. <!head>
• <ul type~"disc"> displays a solid disc (default). • Embed a style sheet:
• <Ul type~"circle"> displays a circle. <head>
<style type~"text/css">
CREATING HYPERLINKS
sel ector {property: val ue;}
• Text link (internal) selector {property: value;}
<a href~"mypageZ. htm">Link to a page on my own si te<la> <!style>
<!head>
• Text link (external) • Apply style inline:
<a href~" http ://VMW.othersite.com">Link to someone el se's si te<la> <p style~"property: value; property: value">Formatted text<lp>
• Image link (internal) INCLUDING SCRIPTS
<a h ref~"mypageZ. htm"><irng src~"button . gif" wi.dth~"50" height="Z0" alt="Cli. ck
here" l><ia> <script type="textljavascript"> <! --
document. write ("This is fun");
• Image link (external, with blue border turned off) --> </script>
<a href="http : I IVMW. othersite. com"><irng src="buttonZ. gif" border="0" width="50" The script can be placed in the <head> of the document or in the body. It can also exist as
height~"Z0" alt="Other guy's site" !><Ia> a separate document on the server. To link to an external script, you must add the attribute 1
src~"document. js" to the opening script tag.
• Email (mailto) link
<a href="mai.lto: name@email address. com">Send me a greeting<!a> HTML ELEMENTS
ELEMENT NAME SYNTAX FUNCTION
Abbreviation <obbr> <lobbr> Identifies abbreviated text
Acronym <acronym> </ acronym > Identifies acronyms
Anchor <O> <Ia> Creoles links
Area <area I> Defines hot spots in client-side image mops
Attribution <address> </address> Identifies author and contact information
Information
Base URL <base I> Identifi es a base URL for a document
Bidirectional <bdo> <lbdo> Overrides the directionality of language characters
algorithm
Big text <big> </big> Makes text one size larger than default
HTML ATTRIBUTES (continued)
ATIRIBUTE ELEMENTS IT VALUE TYPES FUNCTION type <object> Media type IRFC20451 Identifies content type fo r object
NAME WORKS WITH URI type dolo
src <img> URI Identifies the URI of image to embed type <OI> llaiAiill Specifies numbering style in an
src <SCript> Text Identifies the URI for an type ordered list
standby Style rules external script type <param> Media type IRFC20451 Identifies content type for value
style <object> Contains a message to display type when valuetype=·refM
Text while loading an object usemap <SC rip!> Media type IRFC2045} Identifies content type of script
summary All except: <base>, Number Cohtains associated style vallgn language
toblndex <head>, <html>, inforrriation <style> Media type IRFC20451 Identifies content type of style
<meta>. <parom>. Frome nome or _blank. value language
target <SCript>, <Style>, _parent. _self. or _top Identifies the purpose/structure of value <UI> disc I square I circle Specifies bullet style in an
<title> Text a table for speech output value unordered list
lflle <table> Specifies tabbing order for form value <img>. <input>, URI Instructs user agent to use a
Media type IRFC20451 fields valuetype <object> lop I middle I bollam I client-side image map
type <a>. <area >. button I submit I reset width baseline Specifies vertical alignment in cells
type <button>. <input>. text I password I checkbox Identifies a frame or browser width <col>. <colgroup>,
type <objec t>. <select>. I radio I submit I resell file I window in which content is to be <!body>, <ld>, CDATA Specifies a value sent to the server
<lextarea> hidden I image I bullon rendered <!fOOl>, <lh>, when clicked
type <a>. <area>. disc I square I circle or 11 Assigns on advisory title to an <lhead>. <lr> Specifies values for radio buttons
<bose>. dorm>. aAiI element and checkboxes in forms
<link> <button> Specifies a value in a form item
All except: <base>, Identifies advisory content type Specifies the va"lue of a parameter
<head>. <html>. Defines the function of a form button <input> CDATA Specifies how a value should be
<meta>. <param>, Defines the kind of input that is interpreted
<script>. <title> needed for a farm field <Option> CDATA Specifies width
<a>. <link> <param> CDATA Specifies width
<button> Specifies a list item style <param> data I ref I object
<input>
<col>. <colgroup> Multiple length
<li> <iframe>. <img>, length
<object>, <fable>
CASCADING STYLE SHEETS [CSS] I
KEY CSS TERMS (The important declaration will usually prevent a user's Pseudo-element Selects an element based on a potential situ·
Selector: Identifies which portions of a document will be styles from overriding your own.) ation in which that element occu rs.
p :first-line {font-size: Zem}
affected by the style. Frequently a selector is an HTML ele- RELATIVE LENGTH UNITS increases the font size of the first line of every
ment name. paragraph .
• Ems: em
Decloration : Identifies which style is to be applied to a selec- TEXT PROPERTIES
tor (contains both a property and va lue). • Exes: ex
Property Possible Values
Property: Identifies which characteristic of an element is to • Percentage: % color
be modified (similar to an HTML attribute). • Pixels: px text-align }calor} I inherit
text-decoration
Value: Identifies the specific style to be applied. ABSOLUTE LENGTH UNITS left I right I center I justify
text-indent
Inheritance : The passing of style from a parent element to • Centimeters : em text-transform none Iunderline I overline I line-through
its children and grandchildren (descendants). • Inches: in
• Millimeters: mm text-shadow I blink 1inherit
Descendant: An element that is nested inside another • Pica s: pc letter-spacing
element. • Points: pt word-spacing lleng!hl l lpercentage} I inherit
Rule: A comp lete style instruction, including a selector and GENERIC FONTS capitalize Iuppercase [lowercase I none
one or more properties and values. • Cursive
1inh erit
Text properties: Modify how text is displayed. • Fantasy
• Monospace none llcolorl llleng!hl I inherit
Font properties: Modify how fonts are displayed. • Sans-serif
• Serif normallllenglhl I inherit
Box properties: Modify how margins, borders, and padding normallllenglhlllpercentage} I inherit
are displayed. USEFUL PSEUDO CLASSES
baseline I sub I super I top I text-lop I
Background properties: Set background images and back- a :link middle I bollom ltext-bollom llpercenl-
ground colors. Determine link appearance. age} llleng!hl I inherit
a :visited
Classification properties : Set the display and function char- Determine appearance of visited links. FONT PROPERTIES
acteristics of elements. • a:active
Determine appearance of active links. Property Possible Values
linked style sheet: A style sheet that exists on the server a :hover font-family
as a separate text document and is linked to a web page or Change appearance of links when a cursor moves over I!font name) [ !generic name] inherit
pages through the <1i.nk> element. them. font-style
font-variant xx-small l x-sma lll small I medium I large
Embedded style sheet: A style sheet that is contained in the SELECTORS f ont-weight I x- large I xx-large llleng!hl llpercentage}
<head> portion of an HTML document, inside the <style> I larger 1smaller 1[relative measurement)
<!style> element. font-stretch 1inherit
lnline style sheet: A style sheet that is inserted directly into : Selector Syntax font-size-adjust norm al I italic I oblique I inherit
an HTML element through the use of the style attribute. ; Type (element} line-height
body {property: value ;} lmulliple normal[ small-cops [ inherit
Cascade: The order of priority a web browser gives to style : Descendant selectors may be separated by commosl hl,
sheets. Generally (though not always), this order is as fol- ; (contextu al) h2, h3 , h4, h5, h6 {property: normal I bold I lighter I bolder 1100 I 200
lows: inline styles take priority over embedded styles, and Cla ss value;} 1300 1400 ISOO 1600 1700 1800 I 900 I
embedded styles take priority over linked styles. inherit
10 Selects an element <h3> that is a descendant
CSS SYNTAX of another element <Span>. I Iultra~condensed extra-condensed con-
densed I semi-condensed Inormal Isemi-
• Style rule: span h3 {property : value;}
selector {property: value; property: expanded 1expanded I extra-expanded I
value; property : value;} Selects an element that contains a corre- ultra~expanded 1 inherit
or sponding class attribute.
selector { .boldface {property: value;} selects: !number) I none Iinherit
property: value; <P class="boldface"> normalllnumber} lllenglhl llpercenlage}
property : value; 1inherit
property: value Selects an element that contains a unique
} ID allribute. BACKGROUND PROPERTIES
Specifying a URL:
url(pi.cture .gi.f) #243 {property: value;} selects: <P Property Possible Values
• Adding an !i.rrportaot declaration: background-color
selector {property: value !i.rrportant;} id="243"> background-image transparent IIcolor va lue) I inherit
background-repeat
Selects an element based on a potential con- none llurlll inherit
dition that may occur when a page is viewed. background-attachment
background-position repeal I repeat-x I repeat-y I no-
o:visited {color: red;}setsthecolor
repeat Iinherit
of visited links to red .
scroll I fixed I inherit
lpercentagellllength(l,2JJ lltop
1center I bollom} Illeft I center I
right} I inherit
BOX PROPERTIES padding-bottom (Jenglhll lpercentagell inherit font [font-weight! lllfont-stylelll !font-variant!
padding-left llengthll !percentage! I inherit II !font-size! II !line-height! II !font-family! 11
Property Poss1ble Values border
width CLASSIFICATION PROPERTIES border-[top, right, caption I icon I menu I message-box 1sma ll-
height !lengthlllpercentagel l auto I inherit bottom, left] caption Istqtus-bar I inherit
clear Jlengthlllpercentagell auto I inherit Property Possible Values margin
float none I left 1right 1both 1inherit display padding !border-width! lllborder-stylelll color 1
border-top-width left I right I none I inherit block I inline I list-item I run-in I compact 1 inherit
border-bottom-width !lengthII thin 1medium 1thick 1inherit list-style-type marker I table I inline-table I table-row-group
border-left-width [length! I thin I medium I thick 1inherit I table-header-group I table-footer-group 1 [border-width[ II [border-style[ II color 1
border-right-width !lengthII th in 1medium 1thick 1inherit list-style-image table-row I table-column-group I table-column I inherit
border-width !lengthII thin I medium I thick 1inherit list-style- position table-cell I tabl e-caption I none I inherit
border-color !lengthII thin I medium I thick I inherit white-space margin-width {1,4} I inherit
[color value} I Icolor name! I disc I ci rcle I square I decimal llower-romon
border-style I upper-roman I lower-alpha I upper-alpha I padding-width {1,4} I inherit
transparent Iinherit none 1inherit
margin-top When adding va lues with the border, margin, and padding
margin-right none 1hidden 1dotted 1dashed 1solid 1dou- uri I none I inherit shorthand properties, the syntax is as follows:
margin-bottom ble I groove 1ridge 1inset 1outset 1inherit 1. If a single va lue is supplied, it applies to all four sides.
margin-left [length! I [percentage! I auto I inherit I Iinside outside inh erit 2. If two values are supplied, they apply to the top and bot-
padding-top llengthlllpercentagell auto 1inherit normal I pre I nowrap I inherit
padding-right [length! I [percentage! I auto I inherit tom, respective ly.
[length! I lpercentogell auto 1inherit SHORTHAND PROPERTIES
[lengthII [percentage! I inherit 3. If t hree va lues are supplied, the first and thi rd apply to
llengthll [percentagell inherit Property Values the top and bottom; t he second applies to both the right
background and left sides.
[background-color II background-image II
background-repeat II background -attach- 4. If four values are supplied, they apply to the top, right, bot-
ment II background-position} I inherit tom, and left sides respectively.
ADDING COLOR TO WEB PAGES
METHODS FOR CODING COLOR body {background-color : green;} THE WEB SAFE COLOR PERCENTAGES
table {background-color : #00ff00;}
• Name [sixteen basic colors only): white p {background-col or: #0f0;} Percent Hexadecimal Short Hex Numerical Value
Netscape Named (not all browsers support): Jemonchiffon di.v {background-col or: rgb(0, 255, 0);}
span {background -color : rgb(0%, 100%,0%);} 0% 00
• Hexadecimal: #ffffff 2. The color properly:
Short hex: #Iff (CSS only) • control s foreground (usually text) color. 20% 33 51
rgb(decimal): rgb(255, 255, 255) [CSS only) Accepts colors by name, hexadecimal code, short hex,
rgb(decimal), and rgb(%). 40% 66 102
• rgb(%) : rgb(100%, 100%, 100%) [CSS only) • May be used with any element (selector).
• syntax: 60% 99 c 15 3
APPLYING COLOR WITH HTML (DEPRECATED) p {color : black;} 80% 204
1. The bgcolor attribute controls background color: td {color : #000000;} 100% cc -gray 255
body {color: #000;} #808080
Accepts name, Netscape name, or hexadecimal code. di.v {color : rgb(0,0,0,);} -black FF -(~------white
• May be used with <body>, <table>, <ld>, <lh>, and <tr>. span {color : rgb(e%,0%,0%);} #000000 purple #FFFFFF
-silver
syntax: THE SIXTEEN BASIC COLORS maroon #COCOCO -#800080 fuchsia
<body bgcolor="red"> <tabl e bgcolor="#ff0000"> #FFOOFF
2. The color attribute controls text color: See chart in next column. -#800000 red olive
• Accepts name, Netscape name, or hexadecimal code. #808000 -yellow
• May be used with the <font> and <basefont> elements. green -#FFOOOO #FFFFOO
• Syntax: #008000 --teal
<font color="blue"> <basefont col or="#0000ff"> lime #008080 aqua
--navy #OOFFOO #OOFFFF
APPLYING COLOR WITH CSS THE WEB SAFE COLORS #000080
--blue
1. The background-color properly: Non-dithering or web safe colors are constructed using com- #OOOOFF
• Accepts colors by name, hexadecimal code, short hex, binations of red , green, and blue in amounts of 0%, 20%, 40%,
60%, 80%, 100%. These va lues must be expressed in hexadeci-
rgb(decimal), and rgb(%). mal if you are using the HTML bgcolor attribute, but may be writ-
May be used with any element (selector). ten in short hex, rgb(decimal). and rgb(%). in CSS.
• Syntax:
SPECIAL CHARACTERS [ENTITIES)
DEFINITION LETTERS AND NUMERALS Dollar sign $
Percent sign %
Character entities are case sensitive combinatio ns of letters A A a a 0 0 Ampersand & & &
and numbers that represent a specific character or letter. B B b b 1 Apostrophe + '
For example, ® and ® both represent the registered 2 Parenthesis (left) ( &It;
trade mark symbol, ®. Every character in the ISO 8859 Latin 1 c C c 3 Parenthesis (right) < ) >
Character Set has a numeric reference li ke ®, but only cer- d d Asterisk > *
tain characters have character references like ®. D D e e 4 4 Pius sign +
E 5 5 Comma @ , ¡
1. Inserting special characters: Entities may be used to insert f 6 6 Hyphen/minus sign - €
special characte rs into your Web page. For example, if you F F g g 7 7 Period [none! .
want to represent an amount of money using the Pound (£), G G h h 8 8 Stash E /
you cou ld use either a character entity or numeric entity to H H 9 9 Colon :
represent t he pound symbol: t I i Semicolon ;
<:p>Item pri.ce : £2.5<1p> less than <
or J i j Equal sign =
K K Greater than >
<:p>Item pri.ce : £2. 5</p>. L L k k Question mark ?
In either case, the text will display: Item price: £2.5 . M M l Commercial ..at.. sign @ ;
2. Escaping out characters : Some characters, such as the "less N N Square bracket lleftl [
than" and "greater than" signs, can cause problems with 0 O m m Backslash \
your pages if you simply type them in from the keyboard. p P n ]
This is because a browser might co nfuse those characters Q Q Square bracket Iright) ^
with HTML, css, or Javascript code. To avoid this problem, R R 0 o ; _
you need to escape out those characters by using entities. p p Caret `
For example, if you are designing an HTML tutorial page and s S q q Underscore {
wish to represent the <table> tag, you would need to write Grave accent |
it either as T T r Curly brace lleft) }
s Vertical bar ~
&1t; tabl e> u U t Curly brace !right)  
v V u Tilde &# 161;
or as v Non-breaking space
< tabl e> w W w w Inverted exclamation &# 128;
X x point
SYNTAX X X y Euro sign
y Y z
• All entities are case-sensitive.
z Z
All entities must begin with an & (ampersand). PUNCTUATION AND SYMBOLS
All entities must end with a; (semicolon).
• Numeric entities must have a# (crosshatch) before the entity Normal space (none!  
Exclamation point # !
number. , Quotation mark "
Hash mark #
"
11 11 11 11 11 11 11 11 11 11 11 11 11 11 1111 11 11 I
990033 FF3366 CC0033 FF0033 FF9999 CC3366 FFCCFF CC6699 993366 660033 CC3399 FF99CC FF66CC FF99FF FF6699 CC0066 FF006 6 FF339 9 FF0099
11 11 11 11 1111 11 11 11 11 11 11 111111 11 11 11 11
FF33CC FFOOCC FF66FF FF33 FF FFOOFF CC0099 990066 CC66CC CC33CC CC99FF CC66FF CC33FF 993399 CCOOCC CCOOFF 9900CC 990099 CC99CC 996699
11 11 11 11 1111 11 11 111111 11 11 1111 1111 11
663366 660099 9933CC 660066 9900FF 9933FF 9966CC 330033 66339 9 6633CC 6600CC 9966FF 330066 6600FF 6633FF CCCCFF 9999FF 9999CC 6666CC
1111 11 11 11 11111111 11 11 1111 11 11 11 11 1111
6666FF 666699 333366 333399 330099 3300CC 3300FF 3333FF 3333CC 0066FF 0033FF 3366FF 3366CC 000066 000033 OOOOFF 000099 0033CC OOOOCC
II 11 11 11 11 11 11 11 11 11 11 11 1111 1111
336699 0066CC 99CCFF 6699FF 003366 6699CC 006699 3399CC 0099CC 66CCFF 33 99FF 003399 0099FF 33CCFF OOCCFF 99FFFF 66FFFF 33FFFF OOFFFF
11 11 11 11 11 11 11 11 11 11 1111 1111 11 11 11 11
OOCCCC 009999 669999 99CCCC CCFFFF 33CCCC 66CCCC 339999 336666 006666 003333 OOFFCC 33FFCC 33CC99 OOCC99 66FFCC 99FFCC OOFF9 9 339966
11 11 11 11 11 11 11 11 11 11 1111 11 11 11 1111
00663 3 33 66 33 669966 66CC66 99FF99 66FF66 339933 99CC99 66FF99 33FF99 33CC66 OOCC66 66CC99 009966 009933 33FF66 OOFF66 CCFFCC CCFF99
11 11 1111 1111 11 11 11 11 11 11 11 11 11 11 111111
99FF66 99FF33 OOFF33 33FF33 OOCC33 33CC33 66FF33 OOFFOO 66CC33 006600 003300 009900 33FFOO 66FFOO 99FFOO 66CCOO OOCCOO 33CCOO 339900
1111 11 11 11 11 11 1111 11 11 11 11 11 11 11
99CC66 669933 99CC33 336600 669900 99CCOO CCFF66 CCFF33 CCFFOO 999900 CCCCOO CCCC33 333300 666600 999933 CCCC66 666633 999966 CCCC99
11 11 11 11 11 11 11 11 11 11 11
FFFFCC FFFF99 FFFF66 FFFF33 FFFFOO FFCCOO FFCC66 FFCC33 CC993 3 996600 CC9900 FF9900 CC6600 993300 CC6633 663300 FF9966 FF6633 FF9933
11 11 11 11 11 11 11 11 11 1111 11 11 11 11 11 11 11
FF6600 CC3300 996633 330000 663333 996666 CC9999 993333 CC6666 FFCCCC FF3333 CC3333 FF6666 660000 990000 CCOOOO FFOOOO FF3300 CC9966
D 11 11 11 11 216 Web Safe Colors
FFCC99 FFFFFF CCCCCC 999999 666666 333333 000000
Cent sign ¢ & c e nt ; Capital A (Hide) A Ã & Atil de; Small oe (ligature) ae æ &ae lig;
Pound sign £ & pound; Capital A (umlaut) Ä &Au ml;
Currency sign £ &# 164 ; &cu rren; Capital A (ring) A Å & A rin g; Small c (cedilla) ç ç ;
Yen sign ¥ ¥ Capijal AE (ligature) Æ &AEiig;
Broken vertical bar 0 ¦ &brvbor; Capital C (cedilla) A Ç Ç ; Small e (grove accent) è & e g r a ve;
Section sign § § Capitol E (grove accent) È &Eg rave;
Umlaut ¥ &# 168 ; ¨ Capitol E (acute accent) AO  01 ; &E acute ; Small e (acute accent) é é
Copyright symbol § © © Capitol E (circumflex Ê & Ecirc;
Feminine ordinal ª ª accent) ~ Small e (circumflex ê & e c irc;
Left angle quote c « ; & laquo; Capital E (umlaut) Ë Ë ; accent)
Logical not sign &# 172; & n o t; Copitoll(grave accent) I Ì & lgrave;
Soft hyphen ® ­ ­ Capitol I (acute accent) !l  05 ; & la cu te; Small e (umlaut) ë &eu ml ;
Registered trademark ± ® ; & reg ; Copitoll(circumflex Î & Ieire;
Macron accent ¯ ¯ accent) N Small i (grove accent) ì & igrove;
Degree sign v. &# 176; & deg ; Capital I (umlaut) 6 Ï & luml;
Plus or minus ± &plu smn ; Capital ETH (Icelandic) Ð & ETH ; Small i (acute accent) í & ia cute;
Superscript two y, &# 178 ; ² Capital N (tilde) 6 Ñ Ñ
Superscript three ³ ³ Capital 0 (grave accent) 6 Ò & O gra ve; Small i (circumflex î & ici rc;
Acute accent ´ &acu te; Capitol 0 (acute accent)  11 ; & O acut e; accent)
Micro sign µ µ Capitol 0 (circumflex 6 Ô &Oc irc;
Paragraph sign ¶ ¶ ; accent) 6 Small i (umlaut) ï &ium l;
Middle dot · ; & m i d d o t; Capital 0 (tilde) 11! Õ &Otild e;
Cedillci ¸ &cedi l; Capital 0 (umlaut) 0 Ö &O uml ; Small eth (Icelandic) ð &e th ;
Superscript one ¹ ¹ ; Capital 0 (slash) 0 Ø &Oslas h;
Masculine ordinal º &o rdm; Capital U (grave) Ù & Ugrave; Small n (tilde) ñ ñ
Right angle quote » » Capitol U (acute) 0 Ú & U a c ut e;
Fraction one-fourth ¼ & fra c14; Capital U (circumflex) Û & Ucirc; Small o (grave accent) ò &og rave; .g
Fraction one-half ½ & frac12; Capital U (umlout) 0 Ü Ü
Fraction three-fourths ¾ ¾ Capital Y (acute) Ý &Yacut e; Small o (acute accent) ó ó
Inverted question mark ¿ & i q u e s t; Capital Thorn (Icelandic) 0 Þ &T HO RN ;
Multiplication sign × × Small sz (ligature, 6 ß &s zlig ; Small o (circumflex 6 ô ô t~
Division sign ÷ ÷ German) accent)
Small a (grave accent) à ò .. .~.v;
Small a (acute accent)  5; &cocute ; Small o (tilde) õ &otild e;
Small a (circumflex â &aci rc; :0::
accent) Small o (umlout) ö &o uml; ~
Small o (tilde) ã &atild e; t0c:. -oc1:!
Small a (umlaut) ä &aum l; Small o (slash) ø ø ~ ~.. Q.
Small a (ring) å & aring ;
Small u (grave accent) ù & ugrave;
Small u (acute accent) ú & u a c ut e;
Small u (circumflex û &uci rc;
accent)
Small u (umlaut) ü & uuml; I
Small y (acute accent) ý ý
Small thorn (Icelandic) þ & thorn;
Small y (umlaut) ÿ &yu ml;
left arrow ← &l arr;
Up arrow ↑ & uorr;
Right arrow ͛ 4; & rarr;
Down arrow ↓ & dorr;
MISCELLANEOUS SPECIAL CHARACTERS Horizontal arrow ↔ & h e r r:
Spade suit (black)
A ... ♠ & s p a d e s; I
A
Capital A (grave accent) A À &Ag rave; Club suit (black) ♣ &c lubs;
Capital A (acute accent) Á Á Heart suit (black)
Capitol A (circumflex  &Ac irc; Diamond suit (black) • ♥ ♥
accent)
♦ & d i e m s;
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
attributes list and works
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
attributes list and works
- 1 - 6
Pages: