SlideShare a Scribd company logo
#64
  Get More Refcardz! Visit refcardz.com


                                          cONtENts iNclUDE:




                                                                                                                      Core HTML
                                          n	
                                               HTML Basics
                                          n	
                                               HTML vs XHTML
                                          n	
                                               Validation
                                          n	
                                               Useful Open Source Tools
                                          n	
                                               Page Structure Elements
                                          n	
                                               Key Structural Elements and more...                                                                                 By Andy Harris

                                                                                                                          The src attribute describes where the image file can be found,
                                                    html Basics                                                           and the alt attribute describes alternate text that is displayed if
                                                                                                                          the image is unavailable.
                                                HTML and XHTML are the foundation of all web development.
                                                HTML is used as the graphical user interface in client-side               Nested tags
                                                programs written in JavaScript. Server-side languages like PHP            Tags can be (and frequently are) nested inside each other. Tags
                                                and Java also receive data from web pages and use HTML                    cannot overlap, so <a><b></a></b> is not legal, but <a><b></
                                                as the output mechanism. The emerging Ajax technologies                   b></a> is fine.

                                                likewise use HTML and XHTML as their visual engine. HTML
                                                was once a very loosely-defined language with very little                     html vs Xhtml
                                                standardization, but as it has become more important, the
                                                need for standards has become more apparent. Regardless of                HTML has been around for some time. While it has done its
                                                whether you choose to write HTML or XHTML, understanding                  job admirably, that job has expanded far more than anybody
                                                the current standards will help you provide a solid foundation            expected. Early HTML had very limited layout support.
                                                that will simplify all your other web coding. Fortunately HTML            Browser manufacturers added many competing standards and
                                                and XHTML are actually simpler than they used to be, because              web developers came up with clever workarounds, but the
                                                much of the functionality has moved to CSS.                               result is a lack of standards and frustration for web developers.
                                                                                                                          The latest web standards (XHTML and the emerging HTML 5.0
                                                Common Elements                                                           standard) go back to the original purpose of HTML: to describe
                                                Every page (HTML or XHTML shares certain elements in                      the structure of the data only, and leave all formatting to CSS
                                                common.) All are essentially plain text files, with the .html             (Please see the DZone CSS Refcard Series). XHTML is nothing
                                                extension. HTML files should not be created with a word                   more than HTML code conforming to the stricter standards
  www.dzone.com




                                                processor, but in some type of editor that creates plain text.            of XML. The same style guidelines are appropriate whether
                                                Every page has a large container (HTML or XHTML) and                      you write in HTML or XHTML (but they tend to be enforced in
                                                two major subcontainers, the head and the body. The head                  XHTML):
                                                area contains information useful behind the scenes, such as
                                                CSS formatting instructions and JavaScript code. The body                    •   Use a doctype to describe the language (described below)
                                                contains the part of the page that is visible to the user.                   •   Write all code in lowercase letters
                                                                                                                             •   Encase all attribute values in double quotes
                                                Tags and Attributes                                                          •   Each tag must have an end specified. This is normally
                                                An HTML document is based on the notion of tags. A tag is a                      done with an ending tag, but a special case allows for
                                                piece of text inside angle brackets (<>). Tags typically have a                  non-content tags.
                                                beginning and an end, and usually contain some sort of text
                                                                                                                          Most of the requirements of XHTML turn out to be good
                                                inside them. For example, a paragraph is normally denoted like
                                                                                                                          practice whether you write HTML or XHTML. I recommend
                                                this:

                                                 <p>
                                                   This is my paragraph.
                                                 </p>
                                                                                                                                                     Get More Refcardz
                                                                                                                                                               (They’re free!)
                                                The <p> indicates the beginning of a paragraph. Text is then
                                                placed inside the tag, and the end of the paragraph is denoted                                         n   Authoritative content
                                                by an end tag, which is similar to the start tag but with a slash                                      n   Designed for developers
                                                (</p>.) It is common to indent content in a multi-line tag, but it                                     n   Written by top experts
                                                is also legal to place tags on the same line:                                                          n   Latest tools & technologies
                                                                                                                                                           Hot tips & examples
Core html




                                                                                                                                                       n
                                                 <p>This is my paragraph.</p>
                                                                                                                                                       n   Bonus content online
                                                Tags are sometimes enhanced by attributes, which are name                                              n   New issue every 1-2 weeks
                                                value pairs that modify the tag. For example, the <img> tag
                                                (used to embed an image into a page) usually includes the
                                                following attributes:
                                                                                                                                         Subscribe Now for FREE!
                                                 <img src = “myPic.jpg”                                                                       Refcardz.com
                                                      Alt = “this is my picture” />



                                                                                                        DZone, Inc.   |   www.dzone.com
2
                                                                                                                                                                                    Core html



using XHTML strict so you can validate your code and know it                                             Web Developer     https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox
follows the strictest standards.                                                                         Toolbar           extension adds numerous debugging and web development tools to
                                                                                                                           your browser.

XHTML has a number of flavors. The strict type is                                                        Firebug           https:addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that
                                                                                                                           adds full debugging capabilities to the browser. The firebug lite version
recommended, as it is the most up-to-date standard which                                                                   even works with IE.
will produce the most predictable results. You can also use
a transitional type (which allows deprecated HTML tags) and                                                 pagE strUctUrE ElEmENts
a frameset type, which allows you to add frames. For most
applications, the strict type is preferred.                                                             The following elements are part of every web page.
HTML Template
                                                                                                         Element              Description
The following code can be copied and pasted to form the
                                                                                                         <html></html>        Surrounds the entire page
foundation of a basic web page:
                                                                                                         <head></head>        Contains header information (metadata, CSS styles, JavaScript
                                                                                                                              code)
 <html>
 <head>                                                                                                  <title></title>      Holds the page title normally displayed in the title bar and used
   <title></title>                                                                                                            in search results
 </head>
                                                                                                         <body></body>        Contains the main body text. All parts of the page normally visible
 <body>                                                                                                                       are in the body

 </body>
 </html>
                                                                                                            KEy strUctUral ElEmENts
XHTML Template
The XHTML template is a bit more complex, so it’s common to
                                                                                                        Most pages contain the following key structual elements:
keep a copy on your desktop for quick copy – and paste work,
or to define it as a starting template in your editor.                                                   Element             Name            Description

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”                                                <h1></h1>           Heading 1       Reserved fo strongest emphasis
 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
                                                                                                         <h2></h2>           Heading 2       Secondary level heading. Headings go down to level 6,
 <html lang=”EN” dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”>
                                                                                                                                             but <h1> through <h3> are most common
 <head>
   <meta http-equiv=”content-type” content=”text/xml;                                                    <p></p>             Paragraph       Most of the body of a page should be enclosed in
         charset=utf-8” />                                                                                                                   paragraphs
   <title></title>
 </head>                                                                                                 <div></div>         Division        Similar to a paragraph, but normally marks a section of
                                                                                                                                             a page. Divs usually contain paragraphs
 <body>

 </body>
 </html>                                                                                                    lists aND Data

     valiDatiON
                                                                                                        Web pages frequently incorporate structured data so HTML
                                                                                                        includes several useful list and table tags:
The structure of your web pages is critical to the success of
programs based on those pages, so use a validating tool to                                               Element             Name            Description
ensure you haven’t missed anything.                                                                      <ul></ul>           Unordered       Normally these lists feature bullets (but that can be
                                                                                                                             list            changed with CSS)
 Validating Tool    Description
                                                                                                         <ol></ol>           Ordered         These usually are numbered, but this can be changed
 WC3                The most commonly used validator is online at http://validator.w3.org This                               list            with CSS
                    free tool checks your page against the doctype you specify and ensures
                    you are following the standards. This acts as a ‘spell-checker’ for your code        <li></li>           List item       Used to describe a list item in an unordered list or an
                    and warns you if you made an error like forgetting to close a tag.                                                       ordered list

 HTML Tidy          There’s an outstanding free tool called HTML tidy which not only checks              <dl></dl>           Definition      Used for lists with name-value pairs
                    your pages for validity, but also fixes most errors automatically. Download                              list
                    this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator
                    extension to build tidy into your browser.                                           <dt></dt>           Definition      The name in a name-value pair. Used in definition lists
                                                                                                                             term
 HTML Validator     The extension mechanism of Firefox makes it a critical tool for web
 extension          developers. The HTML Validator extension is an invaluable tool. It                   <dd></dd>           Definition      The value (or definition) of a name – value pair
                    automatically checks any page you view in your browser against both the                                  description
                    w3 validation engine and tidy. It can instantly find errors, and repair them
                                                                                                         <table></table>     Table           Defines beginning and end of a table
                    on the spot with tidy. With this free extension available at
                    http://users.skynet.be/mgueury/mozilla/, there’s no good reason not to               <tr></tr>           Table row       Defines a table row. A table normally consists of several
                    validate your code.                                                                                                      <tr> pairs (one per row)

                                                                                                         <td></td>           Table data      Indicates data in a table cell. <td> tags occur within
                                                                                                                                             <tr> (which occur within <table>)
     UsEfUl OpEN sOUrcE tOOls
                                                                                                         <th></th>           Table           Indicates a table cell to be treated as a heading with
                                                                                                                             heading         special formatting
Some of the best tools for web development are available
through the open source community at no cost at all. Consider                                           Visit http://www.aharrisbooks.net/dzone/listTable.html for an
these application as part of your HTML toolkit:                                                         example. Use view source to see the XHTML code.

 Open Source Tool    Description                                                                        Standard List Types
 Aptana              http://www.aptana.com/ This free programmer’s editor (based on Eclipse)            HTML supports three primary list types. Ordered lists and
                     is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and
                     Ajax. It offers code completion, syntax highlighting, and FTP support              unordered lists are the primary list types. By default, ordered
                     within the editor.
                                                                                                        lists use numeric identifiers, and unordered lists use bullets.

                                                                                    DZone, Inc.     |   www.dzone.com
3
                                                                                                                                        Core html



However, you can use the list-style-type CSS attribute to
change the list marker to one of several types.                                     liNKs aND imagEs
 <ol>
   <li>uno</li>                                                                 Links and images are both used to incorporate external
   <li>dos</li>                                                                 resources into a page. Both are reliant on URIs (Universal
   <li>tres</li>
 </ol>                                                                          Resource Indicators), commonly referred to as URLs or
                                                                                addresses.
Lists can be nested inside each other
                                                                                <a> (anchor)
 <ul>
   <li>English                                                                  The anchor tag is used to provide the basic web link:
      <ol>
        <li>One</li>
        <li>Two</li>                                                             <a href = “http://www.google.com”>link to Google</a>
        <li>Three</li>
      </ol>                                                                     In this example, http://www.google.com is the site to be visited.
   </li>                                                                        The text “link to Google” will be highlighted as a link.
   <li>Spanish
      <ol>
        <li>uno</li>                                                            absolute and relative references
        <li>dos</li>
        <li>tres</li>
                                                                                Links can be absolute references containing an entire url
      </ol>                                                                     including the http: protocol indicator.
   </li>
 </ul>                                                                          http://www.aharrisbooks.net goes directly to my site from any
                                                                                page on the internet.
Definition lists
The special definition list is used for name / value pairs. The                 A relative reference leaves out the http:// business. The
definition term (dt) is a word or phrase that is used as the list               browser assumes the same directory on the same server as
marker, and the definition data is normally a paragraph:                        the referring page. If this link: <a href = “xfd”>XHTML for
                                                                                Dummies</a> is on my main site, it will take you to
 <h2>Types of list</h2>
 <dl>                                                                           http://www.aharrisbooks.net/xfd.
   <dt>Unordered list</dt>
   <dd>Normally used for bulleted lists, where the order of data is
 not important. </dd>
                                                                                <link>
                                                                                The link tag is used primarily to pull in external CSS files:
   <dt>Ordered lists</dt>
   <dd>Normally use numbered items, for example a list of
 instructions where the order is significant.</dd>                               <link rel = “stylesheet”
                                                                                       type = “text/css”
   <dt>Definition list</dt>                                                            href = “mySheet.css” />
   <dd>Used to describe a term and definition. Often a good
 alternative to a two-column table</dd>                                         <img>
 </dl>
                                                                                The img tag is used in to attach an image. Valid formats are
Use of tables                                                                   .jpg, .png, and .gif. An image should always be accompanied
Tables were used in the past to overcome the page-layout                        by an alt attribute describing the contents of the image.
shortcomings of HTML. That use is now deprecated in favor of
                                                                                 <img src = http://www.cs.iupui.edu/~aharris/face.gif
CSS-based layout. Use tables only as they were intended – to                          alt = “me before shaving” />
display tabular data.
                                                                                Image formatting attributes (height, width, and align) are
A table mainly consists of a series of table rows (tr.) Each table
                                                                                deprecated in favor of CSS.
row consists of a number of table data (tr) elements. The
table heading (th) element can be used to indicate a table cell
                                                                                   spEcialty marKUp
should be marked as a heading.
The rowspan and colspan attributes can be used to make a cell                   HTML / XHTML includes several specialty tags. These are used
span more than one row or column.                                               to describe special purpose text. They have default styling, but
                                                                                of course the styles can be modified with CSS.
Each row of a table should have the same number of columns,
and each column should have the same number of rows. Use                        <quote>
of the span attribute may require adjustment to other rows or                   The quote tag is intended to display a single line quote:
columns.
                                                                                 <quote>Now is the time for all good men to come to the aid of
                                                                                 their country</quote>
 <table border = “1”>
   <tr>
     <th>&nbsp;</th>                                                            Quote is an inline tag. If you need a block level quote, use
     <th>English</th>                                                           <blockquote>.
     <th>Spanish</th>
   </tr>
                                                                                <pre>
   <tr>                                                                         The <pre> tag is used for pre-formatted text. It is sometimes
     <th>1</th>
     <td>One</td>                                                               used for code listings or ASCII art because it preserves carriage
     <td>Uno</td>
   </tr>                                                                        returns. Pre-formatted text is usually displayed in a fixed-width
                                                                                font.
   <tr>
     <th>2</th>
     <td>Two</td>                                                                <pre>
     <td>Dos</td>                                                                for i in range(10):
   </tr>                                                                           print i
 </table>                                                                        </pre>



                                                              DZone, Inc.   |   www.dzone.com
4
                                                                                                                                    Core html



<code>                                                                      Legend
The code format is used to manage pre-formatted text,                       You can add a legend inside a fieldset. This describes the
especially code listings. It is very similar to pre.                        purpose of the fieldset.

 <code>
                                                                            Label
 while i < 10:                                                              A label is a special inline element that describes a particular
   i += 1
   print i                                                                  field. A label can be paired with an input element by putting
 </code>                                                                    that element’s ID in the label’s for attribute.
<blockquote>                                                                Input
This tag is used to mark multi-line quotes. Frequently it is set            The input element is a general purpose inline element. It is
off with special fonts and indentation through CSS. It is (not              meant to be used inside a form, and it is the basis for several
surprisingly) a block-level tag.                                            types of more specific input. The subtype is indicated by the
                                                                            type attribute. Input elements usually include an id attribute
 <blockquote>
   Quoth the raven:                                                         (used for CSS and JavaScript identification) and / or a name
   Nevermore                                                                attribute (used in server-side programming.) The same element
 </blockquote>
                                                                            can have both a name and an id.
<span>
The span tag is a vanilla inline tag. It has no particular                  Text
formatting of its own. It is intended to be used with a class or            This element allows a single line of text input:
ID when you want to apply style to an inline chunk of code.                  <input type = “text”
                                                                                           id = “myText”
 <span class = “highlight”>This text</span> will be highlighted.                           name = “myText” />


<em>                                                                        Password
The em tag is used for standard emphasis. By default, <em>                  Passwords display just like textboxes, except rather than
italicizes text, but you can use CSS to make any other type of              showing the text as it is typed, an asterisk appears for each
emphasis you wish.                                                          letter. Note that the data is not encoded in any meaningful way.
                                                                            Typing text into a password field is still entirely unsecure.
<strong>
This tag represents strong emphasis. By default, it is bold, but you         <input type = “password”
can modify the formatting with CSS.                                                 id = “myPWD” />

                                                                            Radio Button
    fOrms                                                                   Radio buttons are used in a group. Only one element of a radio
                                                                            group can be selected at a time. Give all members of a radio
Forms are the standard user input mechanism in HTML /                       group the same name value to indicate they are part of a group.
XHTML. You will need another language like JavaScript or PHP                 <input type = “radio”
to read the contents of the form elements and act upon them.                        name = “radSize”
                                                                                    value = “small”
                                                                                    id = “radSmall”
Form Structure                                                                      selected = “selected” />
A number of tags are used to describe the structure of the                   <label for = “radSmall”>Small</label>
                                                                             <input type = “radio”
form. Begin by looking over a basic form:                                           name = “radSize”
                                                                                    value = “large”
                                                                                    id = “radLarge” />
 <form action = “”>                                                          <label for = “radLarge”>Large</label>
   <fieldset>
      <legend>My form</legend>
      <label for = “txtName”>Name</label>                                   Attaching a label to a radio button means the user can activate
      <input type = “text”
              id = “txtName” />
                                                                            the button by clicking on the corresponding label. For best
      <button type = “button”                                               results, use the selected attribute to force one radio button to
               Onclick = “doSomething()”>
        Do something                                                        be the default.
      </button>
   </fieldset>                                                              Checkbox
 </form>
                                                                            Checkboxes are much like radio buttons, but they are
Form                                                                        independent. Like radio buttons, they can be associated with a
The <form></form> pair describes the form. In XHTML strict,                 label.
you must indicate the form’s action property. This is typically
                                                                             <input type = “checkbox”
the server-side program that will read the form. If there is no                     id = “chkFries” />
                                                                             <label for = “chkFries”>Would you like fries with that?</label>
such program, you can set the action to null (“”) The method
attribute is used to determine whether the data is sent through             Hidden
the get or post mechanism.                                                  Hidden fields hold data that is not visible to the user (although
Fieldset                                                                    it is still visible in the code) It is primarily used to preserve state
Most form elements are inline tags, and must be encased                     in server-side programs.
in a block element. The fieldset is designed exactly for this
                                                                             <input type = “hidden”
purpose. Its default appearance draws a box around the form.                        name = “txtHidden”
                                                                                    value = “recipe for secret sauce” />
You can have multiple fieldsets inside a single form.

                                                          DZone, Inc.   |   www.dzone.com
5
                                                                                                                                                  Core html



Note that the data is still not protected in any meaningful way.         size. Numerous CSS attributes replace this capability with much
                                                                         more flexible alternatives. See the CSS refcard for details.
Button
Buttons are used to signal user input. Buttons can be created            I (italics)
through the input tag:                                                   HTML code should indicate the level of emphasis rather
                                                                         than the particular stylistic implications. Italicizing should
 <input type = “button”
        value = “launch the missiles”
                                                                         be done through CSS. The <em> tag represents emphasized
        onclick = “launchMissiles()” />                                  text. It produces italic output unless the style is changed to
                                                                         something else. The <i> tag is no longer necessary and is not
This will create a button with the caption “launch the missiles.”
                                                                         recommended. Add font-style: italic to the style of any element
When the button is clicked, the page will attempt to run a
                                                                         that should be italicized.
JavaScript function called “launchMissiles()” Standard
buttons are usually used with JavaScript code on the client.             B (bold)
The same button can also be created with this alternate format:          Like italics, boldfacing is considered a style consideration. Use
                                                                         the <strong> tag to denote any text that should be strongly
 <button type = “button”
         Onclick = “launchMissiles()”>                                   emphasized. By default, this will result in boldfacing the
   Launch the missiles                                                   enclosed text. You can add bold emphasis to any style with the
 </button>
                                                                         font-weight: bold attribute in CSS.
This second form is preferred because buttons often require
different CSS styles than other input elements. This second                   DEprEcatED tEchNiqUEs
form also allows an <img> tag to be placed inside the button,
making the image act as the button.                                      In addition to the deprecated tags, there are also techniques
                                                                         which were once common in HTML that are no longer
Reset
                                                                         recommended.
The reset button automatically resets all elements in its form to
their default values. It doesn’t require any other attributes.           Frames
                                                                         Frames have been used as a layout mechanism and as a
 <input type = “reset” />
 <button type = “reset”>                                                 technique for keeping one part of the page static while
   Reset                                                                 dynamically loading other parts of the page in separate frames.
 </button>
                                                                         Use of frames has proven to cause major usability problems.
Select / option                                                          Layout is better handled through CSS techniques, and dynamic
Drop-down lists can be created through the select / option               page generation is frequently performed through server-side
mechanism. The select tag creates the overall structure, which           manipulation or AJAX.
is populated by option elements.
                                                                         Table-based design
 <select id = “selColor”>                                                Before CSS became widespread, HTML did not have adequate
   <option value = “#000000”>black</option>
   <option value = “#FF0000”>red</option>
                                                                         page formatting support. Clever designers used tables to
   <option value = “#FFFFFF”>white</option>                              provide an adequate form of page layout. CSS provides a
 </select>
                                                                         much more flexible and powerful form of layout than tables,
The select has an id (for client-side code) or name (for server-         and keeps the HTML code largely separated from the styling
side code) identifier. It contains a number of options. Each             markup.
option has a value which will be returned to the program. The
text between <option> and </option> is the value displayed to                 html ENtitiEs
the user. In some cases (as in this example) the value displayed
to the user is not the same as the value used by programs.
                                                                         Sometimes you need to display a special character in a web
Multiple Selections                                                      page. HTML has a set of special characters for exactly this
You can also create a multi-line selection with the select and           purpose. Each of these entities begins with the ampersand(&)
option tags:                                                             followed by a code and a semicolon.

 <select id = “selColor”                                                  Character    Name                   Code     Note
         size = “3”
         multiple = “multiple”>                                                        Non-breaking space     &nbsp;   Adds white space
   <option value = “#000000”>black</option>
   <option value = “#FF0000”>red</option>
                                                                          <            Less than              &lt;     Used to display HTML code or
   <option value = “#FFFFFF”>white</option>
                                                                                                                       mathematics
 </select>
                                                                          >            Greater than           &gt;     Used to display HTML code or
                                                                                                                       mathematics

                                                                          &            Ampersand              &amp;    If you’re not displaying an entity but really
                                                                                                                       want the & symbol
   DEprEcatED fOrmattiNg tags
                                                                          ©            Copyright              &copy;   Copyright symbol

Certain tags common in older forms of HTML are no longer                  ®            Registered trademark   &reg;    Registered trademark
recommended as CSS provides much better alternatives.
Font                                                                     Numerous other HTML entities are available and can be found
The font tag was used to set font color, family (typeface) and           in online resources like w3schools.

                                                       DZone, Inc.   |   www.dzone.com
6
                                                                                                                                                                                                                                                                                                                                                                                                         Core html



                                                                                                                                                                                                                                                                                                                                                      tools convert from more standard video formats to Ogg. The
                                                                          html 5 / css 3 prEviEw                                                                                                                                                                                                                                                      autoplay option causes the element to play automatically. The
                                                                                                                                                                                                                                                                                                                                                      controls element places controls directly into the page.
                                                          New technologies are on the horizon. Firefox 3.5 now has
                                                          support for significant new HTML 5 features, and CSS 3 is                                                                                                                                                                                                                                   The code between the beginning and ending tag will execute
                                                          not far behind. While the following should still be considered                                                                                                                                                                                                                              if the browser cannot process the audio or video tag. You can
                                                          experimental, they are likely to become very important tools in                                                                                                                                                                                                                             place alternate code here for embedding alternate versions
                                                          the next few years. Firefox 3.5, Safari 4 (and a few other recent                                                                                                                                                                                                                           (Flash, for example)
                                                          browsers) support the following new features:                                                                                                                                                                                                                                               The Canvas tag
                                                                                                                                                                                                                                                                                                                                                      The canvas tag offers a region of the page that can be drawn
                                                          Audio and video tags
                                                          Finally the browsers have direct support for audio and video                                                                                                                                                                                                                                upon (usually with Javascript.) This creates the possibility of
                                                          without plugin technology. These tags work much like the img tag.                                                                                                                                                                                                                           real interactive graphics without requiring plugins like Flash.

                                                               <video src = “myVideo.ogg” autoplay>
                                                                                                                                                                                                                                                                                                                                                      Font Face
                                                                 Your browser does not support the video tag.                                                                                                                                                                                                                                         This is actually a CSS improvement, but it’s much needed. It
                                                               </video>
                                                               <audio src = “myAudio.ogg” controls>                                                                                                                                                                                                                                                   allows you to define a font-face in CSS and include a ttf font
                                                                 Your browsers does not support the audio tag                                                                                                                                                                                                                                         file from the server. You can then use this font face in your
                                                               </audio>
                                                                                                                                                                                                                                                                                                                                                      ordinary CSS and use the downloaded font. If this becomes a
                                                          The HTML 5 standard currently supports Ogg Theora video,                                                                                                                                                                                                                                    standard, we will finally have access to reliable downloadable
                                                          Ogg Vorbis audio, and wav audio. The Ogg formats are open-                                                                                                                                                                                                                                  fonts on the web, which will usher in web typography at long
                                                          source alternatives to proprietary formats, and plenty of free                                                                                                                                                                                                                              last.


                                                   aBOUt thE aUthOr                                                                                                                                                                                                                                                                                   rEcOmmENDED BOOK

                                                                                                                      andy harris                                                                                                                                                                                                                                        You don’t need expensive or complicated
                                                                       I am a lecturer in computer science at Indiana University / Purdue                                                                                                                                                                                                                                software or a super-powerful computer
                                                                       University - Indianapolis. I’ve been interested in computing since                                                                                                                                                                                                                                to build a Web site that does all sorts of
                                                                       the early eighties, when my brother and I took the money we                                                                                                                                                                                                                                       amazing things. All you need is a text editor
                                                                       were saving for a car and blew it on a TRS-80 model 1 with the
                                                                                                                                                                                                                                                                                                                                                                         and the clear, step-by-step guidance you’ll
                                                                       built-in Japanese character set. My favorite part about writing
                                                                       is hearing from readers. It’s great when somebody sends me a
                                                                                                                                                                                                                                                                                                                                                                         find in HTML, XHTML, and CSS All-In-One
                                                                       link to a game or project they’ve written using one of my books.                                                                                                                                                                                                                                  Desk Reference For Dummies.
                                                                       I’d love to get a line from you about one of my books, what
                                                   you’d like to see me work on next, or just to say hi. I hope my writing feels like a
                                                   conversation, and I’m looking forward to hearing from your side of the talk.                                                                                                                                                                                                                                                 BUy NOw
                                                   Andy’s Website: http://www.aharrisbooks.net                                                                                                                                                                                                                                                             books.dzone.com/books/html-xhtml-css-dummies



                                                                                                                                                                                                                      Bro
                                                                                                                                                                                                                              ugh
                                                                                                                                                                                                                                     t to
                                                                                                                                                                                                                                            you
                                                                                                                                                                                                                                                       by...
                                                                                                                                                                                                                                                                  Professional Cheat Sheets You Can Trust
                                                                                                                                                                                 ns
                                                                                                                                                                           Patter                                                                       nald
                                                                                                                                                                                                                                                                                                                                                                 “Exactly what busy developers need:
                                                                                                                                                                      sign
                                                                                                                                                                                                                                                     cDo
                                                                                                                                                                                                                                                   nM                                                                                                              simple, short, and to the point.”
                                                                                                                                                                    De
                                                                                                                                                                                                                                               Jaso
                                                                                                                                                                                                                                            By

#8
                                                                                                                                     ired
                                                                                                                                 Insp e
                                                                                                                                   by th
                                                                                                                                     GoF ller                                                                                                           con
                                                                                                                                                                                                                                                                  tinu
                                                                                                                                                                                                                                                                                  ed
                                                                                                                                                                                                                                                                                           ndle
                                                                                                                                                                                                                                                                                                      r doe
                                                                                                                                                                                                                                                                                                              sn’t
                                                                                                                                                                                                                                                                                                                     have
                                                                                                                                                                                                                                                                                                                            to

                                                                                                                                                                                                                                                                                                                                                                              James Ward, Adobe Systems
                                                                                                                                                                                                                                            ity,
                                                                                                                                                                                                                                                                                                                            r
                                           E:                                                                                                                                                                                                                                          e ha                           ndle
                                                                                                                                                                                                                                                                                  d th
                                      LUD                                                                                          Best
                                                                                                                                        se
                                                                                                                                                                                                                          ns        ibil                              st an                            ith th
                                                                                                                                                                                                                                                                                                               e ha



                                                                                                                                                                                                                                                                                                                                                                  Upcoming titles                most popular
                                 IN C                                                                                                                                                                                                                          que                               st w
                                               y                                                                                                                                                                      spo
                                                                                                                                                                                                                                                             re
                             TS          bilit                                                                                                                                                            e                                             le a                             req
                                                                                                                                                                                                                                                                                             ue
                                                                                                                                                                                                                                                                                                                      ome.
                        EN
                                                                                                                                                                                                     of R
                                                                                                                                                                                                                                       nd                    le a
                     NT             onsi                                                                                                                                                                                    sm
                                                                                                                                                                                                                                ay ha                 hand                       tial
                                                                                                                                                                                                                                                                                      outc              an
                  CO            esp                                                                                                                                                           in                      ject                      le to                       oten                   hen
                           of R                                                                                                                                                      Cha                        le ob       bject
                                                                                                                                                                                                                                   .
                                                                                                                                                                                                                                         be ab                         le p                    .W
                                                                                                                                                                                                                                                                                           tern ethod
     m




                        in                                                                                                                                                                                                                                         tab
                    Cha                                                                                                                                                                               	 ultip ecific o should                               cep                        pat
                                                                                                                                                                                                                                                                                 this if the m up the
                             and                                                                                                                                                                     n M
                                                                                                                                                                                                                                                      an ac
     z.co




                    n	
                           m                                                                                                                                                                                    sp            s                                             ents
                                                                                                                                                                                                         be a            ject        ime.        d is                                   e           d



                                                                                                                                                                                                                                                                                     Download Now
                     Com reter                                                                                                                                                                                    of ob at runt handle                            imp
                                                                                                                                                                                                                                                                       lem ks to se e passe de to
                                                                                                                                                                                          Use                 set                                                                                 til co t
                                                                                                                                                                                                                                                                                                                                                                  Adobe ColdFusion               Spring Configuration
                         n	
                                                                                                                                                                                                                                                                            ec           b
                           rp                                                                                                                                                                             	
                                                                                                                                                                                                         n A         ined                                  ges           ch           ld
                      Inte                                                                                                                                                                 Whe
                                                                                                                                                                                               n
                                                                                                                                                                                                                 erm             being               ngua           ime         shou peats un paren
                                                                                                                                                                                                                           not                   e la the runt or if it
                             tor                                                                                                                                                                            det                                                                     s re        ore
      a rd




                                                             ...
                              n	
                                                                                                                                                                                                                    uest                   som                     tion proces e no m
                       Itera tor                         ore                                                                                                                                                 	 req
                                                                                                                                                                                                            n A                       g in metho
                                                                                                                                                                                                                                                      d
                                                                                                                                                                                                                                                            cep
                                                      dm                                                                                                                                                                        ndlin
                                                                                                                                                                                                                                                                          e        e ar

                                                                                                                                                                                                                                                                                                                                                                  Selenium                       jQuery Selectors
                             dia                                                                                                                                                                                                                       e ex ack th
                                   n	
                                                                                                                                                                                                                                            a                                 ther
                         Me rver                 d an                                                                                  to th
                                                                                                                                             e                                                                            n ha rown in ndle th               ll st      until
         re f c




                                          tho                                                                                   nce
                                                                                                                                                                                                                    ptio        th
                                                                                                                                                                                                               Exce ion is sm to ha up th tered or
                                                                                                                                                                                                                                                       e ca
                                        n	


                          Ob
                              se       Me                               S                                                                                                                                                                                                                                        ral




                                                                                                                                                                                                                                                                          Refcardz.com
                                 plate                               RN                                                   fere        ted
                                                                                                                                            in                                                      mp
                                                                                                                                                                                                       le          cept echani passed                 co un
                                                                                                                                                                                                                                                                                                        Beh
                                                                                                                                                                                                                                                                                                            avio
                                                                 TTE
                                                                                                                                                                                                                ex
                                                                                                                   k re
                                             n	

                                                                                                                                                                                                                                                is en
                                                                                                                                                                                                                                                                                                                                                                  Virtualization                 Windows Powershell
                                                                                                                                                                                                                                   hen
                            Tem                                                                                                 s lis ct-                                                       Exa                   am                                    .
                                                                                PA                           quic          s, a
                                                                                                                                                                                                                  has ack. W
                                                                                                                                                                                                                                      cep
                                                                                                                                                                                                                                          tion uest to
                                                                                                                                                                                                                                                                                              Ob
                                                                                                                                                                                                                                                                                                  ject
                                                                                                       es a
                       it




                                                  n	
                                                                                                                                                                                                                                                  q
                                                                        IGN
                                                                                                                                                                                                                        st
                                                                                                  vid             tt ern              bje                                                                          call          e ex
                                                                                                                                                                                                                                       nd th
                                                                                                                                                                                                                                             e re
                                                                  DES                                                          le O                                                                                        le th
                ! V is




                                                                                             pro            n pa         sab iagram .
                                                                                                                                               s,                                                                   hand s to ha
                                                             UT                      fcard F) desig of Reu
                                                                                                                                                                                                                                                                                                                                                                  ASP.NET MVC Framework          Dependency Injection with EJB 3
                                                                                                                                                                                                                            ct
                                                                                                                                                                                                                     obje
                                                       ABO                      s re          o                               ss d
                                                                                                                                         xam
                                                                                                                                               ple                                                                                                           oke
                                                                                                                                                                                                                                                                    r
                                                                          ttern our (G                  ents des cla                de                                                                                                                   Inv
            arz




                                                                     n Pa      of F              lem                         worl                   suc
                                                                                                                                                        h
                                                                esig                        s: E           inclu
                                                        Th is D
                                                                   23 G
                                                                         ang attern                   ern
                                                                                               patt , and a
                                                                                                                     real                     cts
                                                                                                                                       obje enting                                   AN
                                                                                                                                                                                         D
                                                                                                                                                                                                                                                                                                                                                                  Oracle Berkeley DB             Netbeans IDE JavaEditor
                   c




                                                                                 P
                                                              inal Design . Each                                                 uct                                              MM
                         ef




                                                                                                     tion                    str               m
                                                         orig                                                         con                 ple                                CO                                                        ma
                                                                                                                                                                                                                                             nd
                                                                     k
                                                                boo Softwa
                                                                                  re          rma                                  ir im                                                                                         om
                                                                                                                                                                                                                                                                                                                                                                  Java Performance Tuning        Getting Started with Eclipse
                    re R




                                                          the                            info                  d to           the                                                               nt                         teC
                                                                      d           age                    Use           om                                                                  Clie
                                                                                                                                                                                                               Con
                                                                                                                                                                                                                     cre
                                                                 ente on, us                        ns:           d fr                                                                                                      ()                                    ma
                                                                                                                                                                                                                                                                        nd
                                                             Ori                             tter          uple                               obje
                                                                                                                                                     ct                                                             cute                                  Com )
                                                                     nati               l Pa          eco                                                                                                   +exe
                                                                                                                                                                                                                                                                                                                                                                  Eclipse Plug-In Development    Very First Steps in Flex
                                                                                                                                                                                                                                                                                                           s
                                   Mo




                                                                                                                                                                                                                                                                     (                                low
                                                              e xpla              ona           ed                                  la  rge                                                                                                                  cute                               is al      ch
                                                                              ati           nb                                                    .                                                                                                  +exe                                  . Th       s su
                                                                         Cre        e y ca                                  form bjects                                                                                                                                      an o
                                                                                                                                                                                                                                                                                   bject nship
                                                                               t th                                d to rate o                            ms,                                                                                                          d as ed rela
                                                                                                                                                                                                                                                                                          tio
                                             Get




                                                                           tha                                Use                                    rith                                                                                                       eate
                                                                                      .                  ns:             ispa                   lgo              .                                                                                         e tr ject bas
                                                                            sy stem                tter many d                            ge a          b jects                                            er                                  g it
                                                                                                                                                                                                                                                      to b
                                                                                                                                                                                                                                                             lly o
                                                                                                                                                                                                                                                                   b
                                                                                               Pa                                   ana           en o                                            Rece
                                                                                                                                                                                                       iv                                 win           ona
                                                                                          ral            en                  to m betwe
                                                                                                                                                                                                                                     allo traditi                                                   ers.
                                                                                                    twe                                                                                                                       uest
                                                                              Stru
                                                                                stru
                                                                                    ctu
                                                                                     cture
                                                                                             s be               s: U
                                                                                                        ttern sponsib
                                                                                                                     sed
                                                                                                                               ilitie
                                                                                                                                      s
                                                                                                                                                 s th
                                                                                                                                                       at c
                                                                                                                                                            an                                           psu
                                                                                                                                                                                                    Enca quest
                                                                                                                                                                                                               late
                                                                                                                                                                                                                    sa
                                                                                                                                                                                                                         req ndled in
                                                                                                                                                                                                                           e ha
                                                                                                                                                                                                                     to b llbacks
                                                                                                                                                                                                                                          .
                                                                                                                                                                                                                                                                  nt tim
                                                                                                                                                                                                                                                                          es or
                                                                                                                                                                                                                                                                                  in va
                                                                                                                                                                                                                                                                                        riant
                                                                                                                                                                                                                                                                                                ord

                                                                                                                                                                                                                                                                                                   the
                                                                                                                                                                                                                                                                                                         invo
                                                                                                                                                                                                                                                                                                             catio
                                                                                                                                                                                                                                                                                                                   n.
                                                                                                                                                                                                                                                                                                                                                  DZone, Inc.                         ISBN-13: 978-1-934238-80-6
                                                                                                  l Pa                                      ship                                                         re
                                                                                                                                                                                                                   ng an
                                                                                                                                                                                                                          d ca                     lity.
                                                                                                                                                                                                                                            tiona at varia
                                                                                                                                                                                                                                                                                             ling
                                                                                            iora , and re
                                                                                                                                                                                                                                                                                                                  g
                                                                                                                                     tion                                                 pose       the
                                                                                                                                                                                                            ueui
                                                                                                                                                                                                                                                                                     hand                    ssin

                                                                                                                                                                                                                                                                                                                                                  140 Preston Executive Dr.
                                                                                                                                                                                                                                     func                                       ject
                                                                                         av                                    rela                                                   Pur
                                                                                                                                                                                                      as q                        k               led                                                   roce to be
                                                                                   Beh nships
                                                                                                                                                                                                                                                                            ob                    us p

                                                                                    rela
                                                                                          tio                  ith o
                                                                                                                      b ject
                                                                                                                                                   that
                                                                                                                                                         ca  n be                                                   ed ca
                                                                                                                                                                                                         	 You ne s need
                                                                                                                                                                                                                            llbac be hand ed.
                                                                                                                                                                                                                                  to           ne  ed
                                                                                                                                                                                                                                       sts is couple
                                                                                                                                                                                                                                                             d  from
                                                                                                                                                                                                                                                                        the
                                                                                                                                                                                                                                                                                 asyn
                                                                                                                                                                                                                                                                                       ch
                                                                                                                                                                                                                                                                                               func
                                                                                                                                                                                                                                                                           the rn the without n it is
                                                                                                                                                                                                                                                                                                              y
                                                                                                                                                                                                                                                                                           rono tionalit y need
                                                                                                                                                                                                                                                                                                             an                                                                       ISBN-10: 1-934238-80-5
                                                                                                         ls w                                ips                                                                      st          que
                                                                                                                                                                                                                                                                  n

                                                                                                                                                                                                           	 Reque y of re                  be de                      ate                                            ar
                                                                                                    Dea e.                               nsh                                                                                                                     cilit d patte ssing entatio particul

                                                                                                                                                                                                                                                                                                                                                  Suite 100
                                                                                                                                                                                                                                    ould
                                                                                             pe:                                 latio
                                                                                                                                                                                                                                                                                                                                                                                                                50795
                                                                                                                                                                                           Use                        or                                   to fa
                                                                                                                                                                                                                                                                      n

                                                                                                                                                                                                             	 A hist          r sh                                    an            ce
                                                                                                                                                                                                                                                                                 pro implem ents its ting.
                                                                                        Sco             ntim                                                            pe                                                                        used e comm
                                                                                                                                                                                                 n                       voke
                                                                                                                            s re                                   toty                     Whe                                                                             for
                                                                                                                                                                                                                                                                          n
                                                                                                                                                                                                                                                                                                                 ec
                                                                                                                     clas                                                                                      	 The in                       ely                                     al             m
                                                                                 ject ed at ru                                                                 Pro                                                                      wid              th
                                                                                                                                                                                                                                  are utilizing a job q of the
                                                                                                                                                                                                                                                                    ueue actu d imple
                                                                                                                                                                                                                                                                                                      ue is
                                                                                                                                                                                                                                                                                                             exp
                                                                             Ob                               with
                                                                                                                                                                                                                                                                              n
                                                                                                                                                           C                                                                 ues                                                      ue
                                                                                          g                                                                                                                                                                                      que the que
                                                                                      an                 als                                                                                                           que          s. B
                                                                                                                                                                                                                                         y             to       dg  e         en
                                                                                e ch               : De e time
                                                                                                                      .                                               xy                                                                         en
                                                                                                                                                                                                                  Job orithm be giv knowle that is terface
                                                                              b
                                                                                           cop
                                                                                     ss S at com
                                                                                                e
                                                                                                          pil
                                                                                                                              Deco
                                                                                                                                     rato
                                                                                                                                          r                  S
                                                                                                                                                                  Pro
                                                                                                                                                                        serv
                                                                                                                                                                             er
                                                                                                                                                                                                 Exa
                                                                                                                                                                                                     mp
                                                                                                                                                                                                        le               g
                                                                                                                                                                                                                           ut
                                                                                                                                                                                                                                     n
                                                                                                                                                                                                                   of al ed ca to have d obje of the
                                                                                                                                                                                                                                                     an       nes
                                                                                                                                                                                                                                                                 ct          in
                                                                                                                                                                                                                                                                                                                                                  Cary, NC 27513
                                                              .com




                                                                                                                                                                    Ob                                              exec e queue comm
                                                                                Cla          d                           S                                     B                                                          th            e               confi
                                                                                        nge                                            de                                  leto
                                                                                                                                                                                n                                    for
                                                                                                                                                                                                                             king
                                                                                                                                                                                                                                   . Th
                                                                                                                                                                                                                                         ithin
                                                                                                                                                                                                                                                 the
                                                                                  cha                     tory                  Faca                od                Sing                                             invo hm w

                                        DZone communities deliver over 6 million pages each month to       ract
                                                                                                                Fac                       S
                                                                                                                                                               Meth                              C                                                                                       algo
                                                                                                                                                                                                                                                                                                rit
                                                                                                                                                                                                                                                                                                                                                  888.678.0399
                                                                  one




                                                                                                       Abst                                               tory
                                                                                               C                                              C
                                                                                                                                                      Fac
                                                                                                                                                                                                     B
                                                                                                                                                                                                             State
                                                                                                                                                                   t
                                                                                                             pte
                                                                                                                 r                                           eigh                                                        y
                                                                                                                                                                                                                        teg
                                                                                                        Ada                                             Flyw                                                     Stra             od
                                                                          z




                                        more than 3.3 million software developers, architects and decision
                                                                                                                                                                                                                              Meth
                                                                                                                                                                                                                                                                                                                                                  919.678.0300
                                                                                                   S                                              S
                                                                                                                                                                     ter                                 B
                                                                     w. d




                                                                                                                   ridg
                                                                                                                        e                                      rpre                                                     plate
                                                                                                               B                                      B
                                                                                                                                                          Inte                                                       Tem
                                                                                                       S                                                                                                     B
                                                                                                                            er                                    tor                                                         or
                                                                          ww




                                                                                                                   Build                                    Itera                                                     Visit
                                                                                                                                                                                                                                                                                                                                                                                                                              $7.95




                                                                                                           C                                            B                        r                               B

                                        makers. DZone offers something for everyone, including news,           B
                                                                                                                         in o
                                                                                                                      Resp
                                                                                                                            o
                                                                                                                              f
                                                                                                                     Cha nsibili
                                                                                                                                    ty
                                                                                                                                                            B
                                                                                                                                                                    Me
                                                                                                                                                                         diato

                                                                                                                                                                          men
                                                                                                                                                                                     to
                                                                                                                                                                                                                             ject
                                                                                                                                                                                                                                    Beh
                                                                                                                                                                                                                                          avio
                                                                                                                                                                                                                                                 ral
                                                                                                                                                                                                                                                                                                                                                  Refcardz Feedback Welcome
                                                                                                                                  d                                  Me                                               Ob
                                                                                                                              man                               B


                                        tutorials, cheatsheets, blogs,IBfeature articles, source code and more.
                                                                                                                        C om
                                                                                                                                                                                                                                                                                                                                                  refcardz@dzone.com
                                                                    NS
                                                                                                                    B

                                                                                                                       S
                                                                                                                           Com
                                                                                                                                po site

                                                                                                                                                           PO
                                                                                                                                                                             ILIT
                                                                                                                                                                                  Y
                                                                                                                                                                                                         succ
                                                                                                                                                                                                                 ess
                                                                                                                                                                                                                        or                                                                                                                                                         9 781934 238806
                                                                                                                                             ES
                                        “DZone is a developer’s dream,” says PC Magazine.
                                                        CH
                                                           AIN
                                                               O                                                                          FR
                                                                                                                                                                                                 >>
                                                                                                                                                                                                                                                                                                                                                  Sponsorship Opportunities
                                                                                                                                                                                             ace
                                                                                                                                                                                         terf r
                                                                                                                                                                                     <<in andle
                                                                                                                                                                                        H
                                                                                                                                                                                                   uest
                                                                                                                                                                                                        ()
                                                                                                                                                                                                                                                                                                                                                  sales@dzone.com
                                                                                                                                                      nt
                                                                                                                                                                                      +ha
                                                                                                                                                                                          ndle
                                                                                                                                                                                               req

                                                                                                                                                                                                                                                 ler
                                                                                                                                                                                                                                                        2                                                                                                                                                       Version 1.0
                                                                                reserved. No part of this eteHand ( )
                                        Copyright © 2009 DZone, Inc. All rights Clie                      cr
                                                                                                             publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical,
                                                                                                      Con       req
                                                                                                                    uest
                                        photocopying, or otherwise, without prior written permission ofanthe publisher. king
                                                                                                                          Reference:
                                                                                                s




                                                                                                            dle
                                                                                                   ern




                                                                                              1       +h
                                                                                                                                                                                           ler                                                                     by lin                                                              .c o
                                                                                                                                                                                                                                                                                                                                              m
                                                                                                                                                                                     and                                                                    uest                                                                 one
                                                                                                                                                                            teH                                                                         req                                                               z
                                                                                                                                                                      cre                  ()                                                    le a                                                                 w.d
                                                                                                                                                                Con                   uest                                                hand                                                            |     ww

More Related Content

What's hot (16)

PPTX
The Difference between HTML, XHTML & HTML5 for Beginners
Rasin Bekkevold
 
PPSX
HTML & JAVA Script
Nitesh Gupta
 
PPS
Xhtml
Samir Sabry
 
PPTX
Dhtml
Sadhana28
 
PPT
Xhtml 2010
guest0f1e7f
 
PDF
Html
Peter Kaleta
 
PPTX
Chapter 2 introduction to html5
nobel mujuji
 
DOCX
Webprog lecture1
teoper1205
 
PDF
Vskills certified html designer Notes
Vskills
 
PDF
Introduction to Javascript
Seble Nigussie
 
PDF
Introduction to CSS3
Seble Nigussie
 
PPTX
Unit ii java script and xhtml documents and dynamic documents with javascript
zahid7578
 
PPT
Web Services Part 1
patinijava
 
PPTX
HTML5 New Tags
Ducat
 
PPTX
Lecture 4 - Adding XTHML for the Web
phanleson
 
PPTX
Html5 ppt
Rahul Gupta
 
The Difference between HTML, XHTML & HTML5 for Beginners
Rasin Bekkevold
 
HTML & JAVA Script
Nitesh Gupta
 
Dhtml
Sadhana28
 
Xhtml 2010
guest0f1e7f
 
Chapter 2 introduction to html5
nobel mujuji
 
Webprog lecture1
teoper1205
 
Vskills certified html designer Notes
Vskills
 
Introduction to Javascript
Seble Nigussie
 
Introduction to CSS3
Seble Nigussie
 
Unit ii java script and xhtml documents and dynamic documents with javascript
zahid7578
 
Web Services Part 1
patinijava
 
HTML5 New Tags
Ducat
 
Lecture 4 - Adding XTHML for the Web
phanleson
 
Html5 ppt
Rahul Gupta
 

Viewers also liked (20)

PDF
Social Media for Chicago Community Trust presentation
Hack the Hood
 
PDF
Linux fest 2013
Vladimir Zuev
 
ODP
Gabriela
Rositsa Dimova
 
PPT
Une Vie En Noir Et Blanc
smillie
 
PPT
Getstarted Vembustoregrid V1
Lakshmanan Narayan
 
PPS
Winter views
chlud
 
PDF
Doctrine in FLOW3
Karsten Dambekalns
 
PDF
Digital Tv In Cee (2012)
wimvermeulen
 
PPTX
I pad user group nov
Josh Allen
 
PPTX
истори за софия En
Rositsa Dimova
 
PDF
Mesi
Vladimir Zuev
 
PDF
Qwerly GeeknRolla Presentation
Max Niederhofer
 
PPTX
Dolphins
Rositsa Dimova
 
PPTX
GlobalSHIFT 3.0
William Wilkie
 
PDF
Filosofia da educação uma abordagem sobre fundamentos da educação no brasil
sammyfreitas
 
PDF
International Conference on Renewable Energy Development & Applications for a...
Mohamed Larbi BEN YOUNES
 
PDF
Transition Management Topic5 How Can A Manager Introduce Knowledge Management
Nico Schuster (德竹安)
 
PDF
1001 Ona Career Day Preso
Hack the Hood
 
PPTX
03 - Le Rôle des Universités / The Role of Universities
Mohamed Larbi BEN YOUNES
 
PPT
Inergy
guest5ae2c9
 
Social Media for Chicago Community Trust presentation
Hack the Hood
 
Linux fest 2013
Vladimir Zuev
 
Gabriela
Rositsa Dimova
 
Une Vie En Noir Et Blanc
smillie
 
Getstarted Vembustoregrid V1
Lakshmanan Narayan
 
Winter views
chlud
 
Doctrine in FLOW3
Karsten Dambekalns
 
Digital Tv In Cee (2012)
wimvermeulen
 
I pad user group nov
Josh Allen
 
истори за софия En
Rositsa Dimova
 
Qwerly GeeknRolla Presentation
Max Niederhofer
 
Dolphins
Rositsa Dimova
 
GlobalSHIFT 3.0
William Wilkie
 
Filosofia da educação uma abordagem sobre fundamentos da educação no brasil
sammyfreitas
 
International Conference on Renewable Energy Development & Applications for a...
Mohamed Larbi BEN YOUNES
 
Transition Management Topic5 How Can A Manager Introduce Knowledge Management
Nico Schuster (德竹安)
 
1001 Ona Career Day Preso
Hack the Hood
 
03 - Le Rôle des Universités / The Role of Universities
Mohamed Larbi BEN YOUNES
 
Inergy
guest5ae2c9
 
Ad

Similar to Rc064 010d Core Html 1 (20)

PDF
WEB Module 1.pdf
IbrahimBadsha1
 
PDF
WT Module-1.pdf
RamyaH11
 
PDF
Web I - 02 - XHTML Introduction
Randy Connolly
 
PPT
Dynamic html (#1)
Haider Habeeb
 
PDF
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
webre24h
 
PPTX
Introdution to HTML
yashh1402
 
PPT
introdution-to-html.ppt coding programming
programizconsultancy
 
DOCX
Html5
Shivani Gautam
 
DOCX
Html5
Shivani Gautam
 
PPTX
Html in Web design and Development.pptxt.pptx
samuelasefa9
 
PDF
xhtml-documentation
tutorialsruby
 
PDF
xhtml-documentation
tutorialsruby
 
PDF
Web Engineering UNIT III as per RGPV Syllabus
NANDINI SHARMA
 
PDF
wt mod1.pdf
VinayKumarV24
 
PDF
Web engineering notes unit 3
inshu1890
 
PDF
Web Development - HTML, CSS, JavaScript
Mark John Lado, MIT
 
PDF
Html5 tutorial
Divyesh Bharadava
 
PDF
Html5 tutorial
Arjuman Shaikh
 
PDF
Html5 tutorial
Jitendra Gangwar
 
PDF
Html5 tutorial
Ali Haydar(Raj)
 
WEB Module 1.pdf
IbrahimBadsha1
 
WT Module-1.pdf
RamyaH11
 
Web I - 02 - XHTML Introduction
Randy Connolly
 
Dynamic html (#1)
Haider Habeeb
 
www.webre24h.com - [O`reilly] html and xhtml. pocket reference, 4th ed. - [...
webre24h
 
Introdution to HTML
yashh1402
 
introdution-to-html.ppt coding programming
programizconsultancy
 
Html in Web design and Development.pptxt.pptx
samuelasefa9
 
xhtml-documentation
tutorialsruby
 
xhtml-documentation
tutorialsruby
 
Web Engineering UNIT III as per RGPV Syllabus
NANDINI SHARMA
 
wt mod1.pdf
VinayKumarV24
 
Web engineering notes unit 3
inshu1890
 
Web Development - HTML, CSS, JavaScript
Mark John Lado, MIT
 
Html5 tutorial
Divyesh Bharadava
 
Html5 tutorial
Arjuman Shaikh
 
Html5 tutorial
Jitendra Gangwar
 
Html5 tutorial
Ali Haydar(Raj)
 
Ad

Rc064 010d Core Html 1

  • 1. #64 Get More Refcardz! Visit refcardz.com cONtENts iNclUDE: Core HTML n HTML Basics n HTML vs XHTML n Validation n Useful Open Source Tools n Page Structure Elements n Key Structural Elements and more... By Andy Harris The src attribute describes where the image file can be found, html Basics and the alt attribute describes alternate text that is displayed if the image is unavailable. HTML and XHTML are the foundation of all web development. HTML is used as the graphical user interface in client-side Nested tags programs written in JavaScript. Server-side languages like PHP Tags can be (and frequently are) nested inside each other. Tags and Java also receive data from web pages and use HTML cannot overlap, so <a><b></a></b> is not legal, but <a><b></ as the output mechanism. The emerging Ajax technologies b></a> is fine. likewise use HTML and XHTML as their visual engine. HTML was once a very loosely-defined language with very little html vs Xhtml standardization, but as it has become more important, the need for standards has become more apparent. Regardless of HTML has been around for some time. While it has done its whether you choose to write HTML or XHTML, understanding job admirably, that job has expanded far more than anybody the current standards will help you provide a solid foundation expected. Early HTML had very limited layout support. that will simplify all your other web coding. Fortunately HTML Browser manufacturers added many competing standards and and XHTML are actually simpler than they used to be, because web developers came up with clever workarounds, but the much of the functionality has moved to CSS. result is a lack of standards and frustration for web developers. The latest web standards (XHTML and the emerging HTML 5.0 Common Elements standard) go back to the original purpose of HTML: to describe Every page (HTML or XHTML shares certain elements in the structure of the data only, and leave all formatting to CSS common.) All are essentially plain text files, with the .html (Please see the DZone CSS Refcard Series). XHTML is nothing extension. HTML files should not be created with a word more than HTML code conforming to the stricter standards www.dzone.com processor, but in some type of editor that creates plain text. of XML. The same style guidelines are appropriate whether Every page has a large container (HTML or XHTML) and you write in HTML or XHTML (but they tend to be enforced in two major subcontainers, the head and the body. The head XHTML): area contains information useful behind the scenes, such as CSS formatting instructions and JavaScript code. The body • Use a doctype to describe the language (described below) contains the part of the page that is visible to the user. • Write all code in lowercase letters • Encase all attribute values in double quotes Tags and Attributes • Each tag must have an end specified. This is normally An HTML document is based on the notion of tags. A tag is a done with an ending tag, but a special case allows for piece of text inside angle brackets (<>). Tags typically have a non-content tags. beginning and an end, and usually contain some sort of text Most of the requirements of XHTML turn out to be good inside them. For example, a paragraph is normally denoted like practice whether you write HTML or XHTML. I recommend this: <p> This is my paragraph. </p> Get More Refcardz (They’re free!) The <p> indicates the beginning of a paragraph. Text is then placed inside the tag, and the end of the paragraph is denoted n Authoritative content by an end tag, which is similar to the start tag but with a slash n Designed for developers (</p>.) It is common to indent content in a multi-line tag, but it n Written by top experts is also legal to place tags on the same line: n Latest tools & technologies Hot tips & examples Core html n <p>This is my paragraph.</p> n Bonus content online Tags are sometimes enhanced by attributes, which are name n New issue every 1-2 weeks value pairs that modify the tag. For example, the <img> tag (used to embed an image into a page) usually includes the following attributes: Subscribe Now for FREE! <img src = “myPic.jpg” Refcardz.com Alt = “this is my picture” /> DZone, Inc. | www.dzone.com
  • 2. 2 Core html using XHTML strict so you can validate your code and know it Web Developer https://www.addons.mozilla.org/en-US/firefox/addon/60 This Firefox follows the strictest standards. Toolbar extension adds numerous debugging and web development tools to your browser. XHTML has a number of flavors. The strict type is Firebug https:addons.mozilla.org/en-US/firefox/addon/1843 is an add-on that adds full debugging capabilities to the browser. The firebug lite version recommended, as it is the most up-to-date standard which even works with IE. will produce the most predictable results. You can also use a transitional type (which allows deprecated HTML tags) and pagE strUctUrE ElEmENts a frameset type, which allows you to add frames. For most applications, the strict type is preferred. The following elements are part of every web page. HTML Template Element Description The following code can be copied and pasted to form the <html></html> Surrounds the entire page foundation of a basic web page: <head></head> Contains header information (metadata, CSS styles, JavaScript code) <html> <head> <title></title> Holds the page title normally displayed in the title bar and used <title></title> in search results </head> <body></body> Contains the main body text. All parts of the page normally visible <body> are in the body </body> </html> KEy strUctUral ElEmENts XHTML Template The XHTML template is a bit more complex, so it’s common to Most pages contain the following key structual elements: keep a copy on your desktop for quick copy – and paste work, or to define it as a starting template in your editor. Element Name Description <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” <h1></h1> Heading 1 Reserved fo strongest emphasis “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <h2></h2> Heading 2 Secondary level heading. Headings go down to level 6, <html lang=”EN” dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”> but <h1> through <h3> are most common <head> <meta http-equiv=”content-type” content=”text/xml; <p></p> Paragraph Most of the body of a page should be enclosed in charset=utf-8” /> paragraphs <title></title> </head> <div></div> Division Similar to a paragraph, but normally marks a section of a page. Divs usually contain paragraphs <body> </body> </html> lists aND Data valiDatiON Web pages frequently incorporate structured data so HTML includes several useful list and table tags: The structure of your web pages is critical to the success of programs based on those pages, so use a validating tool to Element Name Description ensure you haven’t missed anything. <ul></ul> Unordered Normally these lists feature bullets (but that can be list changed with CSS) Validating Tool Description <ol></ol> Ordered These usually are numbered, but this can be changed WC3 The most commonly used validator is online at http://validator.w3.org This list with CSS free tool checks your page against the doctype you specify and ensures you are following the standards. This acts as a ‘spell-checker’ for your code <li></li> List item Used to describe a list item in an unordered list or an and warns you if you made an error like forgetting to close a tag. ordered list HTML Tidy There’s an outstanding free tool called HTML tidy which not only checks <dl></dl> Definition Used for lists with name-value pairs your pages for validity, but also fixes most errors automatically. Download list this tool at http://tidy.sourceforge.net/ or (better) use the HTML validator extension to build tidy into your browser. <dt></dt> Definition The name in a name-value pair. Used in definition lists term HTML Validator The extension mechanism of Firefox makes it a critical tool for web extension developers. The HTML Validator extension is an invaluable tool. It <dd></dd> Definition The value (or definition) of a name – value pair automatically checks any page you view in your browser against both the description w3 validation engine and tidy. It can instantly find errors, and repair them <table></table> Table Defines beginning and end of a table on the spot with tidy. With this free extension available at http://users.skynet.be/mgueury/mozilla/, there’s no good reason not to <tr></tr> Table row Defines a table row. A table normally consists of several validate your code. <tr> pairs (one per row) <td></td> Table data Indicates data in a table cell. <td> tags occur within <tr> (which occur within <table>) UsEfUl OpEN sOUrcE tOOls <th></th> Table Indicates a table cell to be treated as a heading with heading special formatting Some of the best tools for web development are available through the open source community at no cost at all. Consider Visit http://www.aharrisbooks.net/dzone/listTable.html for an these application as part of your HTML toolkit: example. Use view source to see the XHTML code. Open Source Tool Description Standard List Types Aptana http://www.aptana.com/ This free programmer’s editor (based on Eclipse) HTML supports three primary list types. Ordered lists and is a full-blown IDE customized for HTML / XHTML, CSS, JavaScript, and Ajax. It offers code completion, syntax highlighting, and FTP support unordered lists are the primary list types. By default, ordered within the editor. lists use numeric identifiers, and unordered lists use bullets. DZone, Inc. | www.dzone.com
  • 3. 3 Core html However, you can use the list-style-type CSS attribute to change the list marker to one of several types. liNKs aND imagEs <ol> <li>uno</li> Links and images are both used to incorporate external <li>dos</li> resources into a page. Both are reliant on URIs (Universal <li>tres</li> </ol> Resource Indicators), commonly referred to as URLs or addresses. Lists can be nested inside each other <a> (anchor) <ul> <li>English The anchor tag is used to provide the basic web link: <ol> <li>One</li> <li>Two</li> <a href = “http://www.google.com”>link to Google</a> <li>Three</li> </ol> In this example, http://www.google.com is the site to be visited. </li> The text “link to Google” will be highlighted as a link. <li>Spanish <ol> <li>uno</li> absolute and relative references <li>dos</li> <li>tres</li> Links can be absolute references containing an entire url </ol> including the http: protocol indicator. </li> </ul> http://www.aharrisbooks.net goes directly to my site from any page on the internet. Definition lists The special definition list is used for name / value pairs. The A relative reference leaves out the http:// business. The definition term (dt) is a word or phrase that is used as the list browser assumes the same directory on the same server as marker, and the definition data is normally a paragraph: the referring page. If this link: <a href = “xfd”>XHTML for Dummies</a> is on my main site, it will take you to <h2>Types of list</h2> <dl> http://www.aharrisbooks.net/xfd. <dt>Unordered list</dt> <dd>Normally used for bulleted lists, where the order of data is not important. </dd> <link> The link tag is used primarily to pull in external CSS files: <dt>Ordered lists</dt> <dd>Normally use numbered items, for example a list of instructions where the order is significant.</dd> <link rel = “stylesheet” type = “text/css” <dt>Definition list</dt> href = “mySheet.css” /> <dd>Used to describe a term and definition. Often a good alternative to a two-column table</dd> <img> </dl> The img tag is used in to attach an image. Valid formats are Use of tables .jpg, .png, and .gif. An image should always be accompanied Tables were used in the past to overcome the page-layout by an alt attribute describing the contents of the image. shortcomings of HTML. That use is now deprecated in favor of <img src = http://www.cs.iupui.edu/~aharris/face.gif CSS-based layout. Use tables only as they were intended – to alt = “me before shaving” /> display tabular data. Image formatting attributes (height, width, and align) are A table mainly consists of a series of table rows (tr.) Each table deprecated in favor of CSS. row consists of a number of table data (tr) elements. The table heading (th) element can be used to indicate a table cell spEcialty marKUp should be marked as a heading. The rowspan and colspan attributes can be used to make a cell HTML / XHTML includes several specialty tags. These are used span more than one row or column. to describe special purpose text. They have default styling, but of course the styles can be modified with CSS. Each row of a table should have the same number of columns, and each column should have the same number of rows. Use <quote> of the span attribute may require adjustment to other rows or The quote tag is intended to display a single line quote: columns. <quote>Now is the time for all good men to come to the aid of their country</quote> <table border = “1”> <tr> <th>&nbsp;</th> Quote is an inline tag. If you need a block level quote, use <th>English</th> <blockquote>. <th>Spanish</th> </tr> <pre> <tr> The <pre> tag is used for pre-formatted text. It is sometimes <th>1</th> <td>One</td> used for code listings or ASCII art because it preserves carriage <td>Uno</td> </tr> returns. Pre-formatted text is usually displayed in a fixed-width font. <tr> <th>2</th> <td>Two</td> <pre> <td>Dos</td> for i in range(10): </tr> print i </table> </pre> DZone, Inc. | www.dzone.com
  • 4. 4 Core html <code> Legend The code format is used to manage pre-formatted text, You can add a legend inside a fieldset. This describes the especially code listings. It is very similar to pre. purpose of the fieldset. <code> Label while i < 10: A label is a special inline element that describes a particular i += 1 print i field. A label can be paired with an input element by putting </code> that element’s ID in the label’s for attribute. <blockquote> Input This tag is used to mark multi-line quotes. Frequently it is set The input element is a general purpose inline element. It is off with special fonts and indentation through CSS. It is (not meant to be used inside a form, and it is the basis for several surprisingly) a block-level tag. types of more specific input. The subtype is indicated by the type attribute. Input elements usually include an id attribute <blockquote> Quoth the raven: (used for CSS and JavaScript identification) and / or a name Nevermore attribute (used in server-side programming.) The same element </blockquote> can have both a name and an id. <span> The span tag is a vanilla inline tag. It has no particular Text formatting of its own. It is intended to be used with a class or This element allows a single line of text input: ID when you want to apply style to an inline chunk of code. <input type = “text” id = “myText” <span class = “highlight”>This text</span> will be highlighted. name = “myText” /> <em> Password The em tag is used for standard emphasis. By default, <em> Passwords display just like textboxes, except rather than italicizes text, but you can use CSS to make any other type of showing the text as it is typed, an asterisk appears for each emphasis you wish. letter. Note that the data is not encoded in any meaningful way. Typing text into a password field is still entirely unsecure. <strong> This tag represents strong emphasis. By default, it is bold, but you <input type = “password” can modify the formatting with CSS. id = “myPWD” /> Radio Button fOrms Radio buttons are used in a group. Only one element of a radio group can be selected at a time. Give all members of a radio Forms are the standard user input mechanism in HTML / group the same name value to indicate they are part of a group. XHTML. You will need another language like JavaScript or PHP <input type = “radio” to read the contents of the form elements and act upon them. name = “radSize” value = “small” id = “radSmall” Form Structure selected = “selected” /> A number of tags are used to describe the structure of the <label for = “radSmall”>Small</label> <input type = “radio” form. Begin by looking over a basic form: name = “radSize” value = “large” id = “radLarge” /> <form action = “”> <label for = “radLarge”>Large</label> <fieldset> <legend>My form</legend> <label for = “txtName”>Name</label> Attaching a label to a radio button means the user can activate <input type = “text” id = “txtName” /> the button by clicking on the corresponding label. For best <button type = “button” results, use the selected attribute to force one radio button to Onclick = “doSomething()”> Do something be the default. </button> </fieldset> Checkbox </form> Checkboxes are much like radio buttons, but they are Form independent. Like radio buttons, they can be associated with a The <form></form> pair describes the form. In XHTML strict, label. you must indicate the form’s action property. This is typically <input type = “checkbox” the server-side program that will read the form. If there is no id = “chkFries” /> <label for = “chkFries”>Would you like fries with that?</label> such program, you can set the action to null (“”) The method attribute is used to determine whether the data is sent through Hidden the get or post mechanism. Hidden fields hold data that is not visible to the user (although Fieldset it is still visible in the code) It is primarily used to preserve state Most form elements are inline tags, and must be encased in server-side programs. in a block element. The fieldset is designed exactly for this <input type = “hidden” purpose. Its default appearance draws a box around the form. name = “txtHidden” value = “recipe for secret sauce” /> You can have multiple fieldsets inside a single form. DZone, Inc. | www.dzone.com
  • 5. 5 Core html Note that the data is still not protected in any meaningful way. size. Numerous CSS attributes replace this capability with much more flexible alternatives. See the CSS refcard for details. Button Buttons are used to signal user input. Buttons can be created I (italics) through the input tag: HTML code should indicate the level of emphasis rather than the particular stylistic implications. Italicizing should <input type = “button” value = “launch the missiles” be done through CSS. The <em> tag represents emphasized onclick = “launchMissiles()” /> text. It produces italic output unless the style is changed to something else. The <i> tag is no longer necessary and is not This will create a button with the caption “launch the missiles.” recommended. Add font-style: italic to the style of any element When the button is clicked, the page will attempt to run a that should be italicized. JavaScript function called “launchMissiles()” Standard buttons are usually used with JavaScript code on the client. B (bold) The same button can also be created with this alternate format: Like italics, boldfacing is considered a style consideration. Use the <strong> tag to denote any text that should be strongly <button type = “button” Onclick = “launchMissiles()”> emphasized. By default, this will result in boldfacing the Launch the missiles enclosed text. You can add bold emphasis to any style with the </button> font-weight: bold attribute in CSS. This second form is preferred because buttons often require different CSS styles than other input elements. This second DEprEcatED tEchNiqUEs form also allows an <img> tag to be placed inside the button, making the image act as the button. In addition to the deprecated tags, there are also techniques which were once common in HTML that are no longer Reset recommended. The reset button automatically resets all elements in its form to their default values. It doesn’t require any other attributes. Frames Frames have been used as a layout mechanism and as a <input type = “reset” /> <button type = “reset”> technique for keeping one part of the page static while Reset dynamically loading other parts of the page in separate frames. </button> Use of frames has proven to cause major usability problems. Select / option Layout is better handled through CSS techniques, and dynamic Drop-down lists can be created through the select / option page generation is frequently performed through server-side mechanism. The select tag creates the overall structure, which manipulation or AJAX. is populated by option elements. Table-based design <select id = “selColor”> Before CSS became widespread, HTML did not have adequate <option value = “#000000”>black</option> <option value = “#FF0000”>red</option> page formatting support. Clever designers used tables to <option value = “#FFFFFF”>white</option> provide an adequate form of page layout. CSS provides a </select> much more flexible and powerful form of layout than tables, The select has an id (for client-side code) or name (for server- and keeps the HTML code largely separated from the styling side code) identifier. It contains a number of options. Each markup. option has a value which will be returned to the program. The text between <option> and </option> is the value displayed to html ENtitiEs the user. In some cases (as in this example) the value displayed to the user is not the same as the value used by programs. Sometimes you need to display a special character in a web Multiple Selections page. HTML has a set of special characters for exactly this You can also create a multi-line selection with the select and purpose. Each of these entities begins with the ampersand(&) option tags: followed by a code and a semicolon. <select id = “selColor” Character Name Code Note size = “3” multiple = “multiple”> Non-breaking space &nbsp; Adds white space <option value = “#000000”>black</option> <option value = “#FF0000”>red</option> < Less than &lt; Used to display HTML code or <option value = “#FFFFFF”>white</option> mathematics </select> > Greater than &gt; Used to display HTML code or mathematics & Ampersand &amp; If you’re not displaying an entity but really want the & symbol DEprEcatED fOrmattiNg tags © Copyright &copy; Copyright symbol Certain tags common in older forms of HTML are no longer ® Registered trademark &reg; Registered trademark recommended as CSS provides much better alternatives. Font Numerous other HTML entities are available and can be found The font tag was used to set font color, family (typeface) and in online resources like w3schools. DZone, Inc. | www.dzone.com
  • 6. 6 Core html tools convert from more standard video formats to Ogg. The html 5 / css 3 prEviEw autoplay option causes the element to play automatically. The controls element places controls directly into the page. New technologies are on the horizon. Firefox 3.5 now has support for significant new HTML 5 features, and CSS 3 is The code between the beginning and ending tag will execute not far behind. While the following should still be considered if the browser cannot process the audio or video tag. You can experimental, they are likely to become very important tools in place alternate code here for embedding alternate versions the next few years. Firefox 3.5, Safari 4 (and a few other recent (Flash, for example) browsers) support the following new features: The Canvas tag The canvas tag offers a region of the page that can be drawn Audio and video tags Finally the browsers have direct support for audio and video upon (usually with Javascript.) This creates the possibility of without plugin technology. These tags work much like the img tag. real interactive graphics without requiring plugins like Flash. <video src = “myVideo.ogg” autoplay> Font Face Your browser does not support the video tag. This is actually a CSS improvement, but it’s much needed. It </video> <audio src = “myAudio.ogg” controls> allows you to define a font-face in CSS and include a ttf font Your browsers does not support the audio tag file from the server. You can then use this font face in your </audio> ordinary CSS and use the downloaded font. If this becomes a The HTML 5 standard currently supports Ogg Theora video, standard, we will finally have access to reliable downloadable Ogg Vorbis audio, and wav audio. The Ogg formats are open- fonts on the web, which will usher in web typography at long source alternatives to proprietary formats, and plenty of free last. aBOUt thE aUthOr rEcOmmENDED BOOK andy harris You don’t need expensive or complicated I am a lecturer in computer science at Indiana University / Purdue software or a super-powerful computer University - Indianapolis. I’ve been interested in computing since to build a Web site that does all sorts of the early eighties, when my brother and I took the money we amazing things. All you need is a text editor were saving for a car and blew it on a TRS-80 model 1 with the and the clear, step-by-step guidance you’ll built-in Japanese character set. My favorite part about writing is hearing from readers. It’s great when somebody sends me a find in HTML, XHTML, and CSS All-In-One link to a game or project they’ve written using one of my books. Desk Reference For Dummies. I’d love to get a line from you about one of my books, what you’d like to see me work on next, or just to say hi. I hope my writing feels like a conversation, and I’m looking forward to hearing from your side of the talk. BUy NOw Andy’s Website: http://www.aharrisbooks.net books.dzone.com/books/html-xhtml-css-dummies Bro ugh t to you by... Professional Cheat Sheets You Can Trust ns Patter nald “Exactly what busy developers need: sign cDo nM simple, short, and to the point.” De Jaso By #8 ired Insp e by th GoF ller con tinu ed ndle r doe sn’t have to James Ward, Adobe Systems ity, r E: e ha ndle d th LUD Best se ns ibil st an ith th e ha Upcoming titles most popular IN C que st w y spo re TS bilit e le a req ue ome. EN of R nd le a NT onsi sm ay ha hand tial outc an CO esp in ject le to oten hen of R Cha le ob bject . be ab le p .W tern ethod m in tab Cha ultip ecific o should cep pat this if the m up the and n M an ac z.co n m sp s ents be a ject ime. d is e d Download Now Com reter of ob at runt handle imp lem ks to se e passe de to Use set til co t Adobe ColdFusion Spring Configuration n ec b rp n A ined ges ch ld Inte Whe n erm being ngua ime shou peats un paren not e la the runt or if it tor det s re ore a rd ... n uest som tion proces e no m Itera tor ore req n A g in metho d cep dm ndlin e e ar Selenium jQuery Selectors dia e ex ack th n a ther Me rver d an to th e n ha rown in ndle th ll st until re f c tho nce ptio th Exce ion is sm to ha up th tered or e ca n Ob se Me S ral Refcardz.com plate RN fere ted in mp le cept echani passed co un Beh avio TTE ex k re n is en Virtualization Windows Powershell hen Tem s lis ct- Exa am . PA quic s, a has ack. W cep tion uest to Ob ject es a it n q IGN st vid tt ern bje call e ex nd th e re DES le O le th ! V is pro n pa sab iagram . s, hand s to ha UT fcard F) desig of Reu ASP.NET MVC Framework Dependency Injection with EJB 3 ct obje ABO s re o ss d xam ple oke r ttern our (G ents des cla de Inv arz n Pa of F lem worl suc h esig s: E inclu Th is D 23 G ang attern ern patt , and a real cts obje enting AN D Oracle Berkeley DB Netbeans IDE JavaEditor c P inal Design . Each uct MM ef tion str m orig con ple CO ma nd k boo Softwa re rma ir im om Java Performance Tuning Getting Started with Eclipse re R the info d to the nt teC d age Use om Clie Con cre ente on, us ns: d fr () ma nd Ori tter uple obje ct cute Com ) nati l Pa eco +exe Eclipse Plug-In Development Very First Steps in Flex s Mo ( low e xpla ona ed la rge cute is al ch ati nb . +exe . Th s su Cre e y ca form bjects an o bject nship t th d to rate o ms, d as ed rela tio Get tha Use rith eate . ns: ispa lgo . e tr ject bas sy stem tter many d ge a b jects er g it to b lly o b Pa ana en o Rece iv win ona ral en to m betwe allo traditi ers. twe uest Stru stru ctu cture s be s: U ttern sponsib sed ilitie s s th at c an psu Enca quest late sa req ndled in e ha to b llbacks . nt tim es or in va riant ord the invo catio n. DZone, Inc. ISBN-13: 978-1-934238-80-6 l Pa ship re ng an d ca lity. tiona at varia ling iora , and re g tion pose the ueui hand ssin 140 Preston Executive Dr. func ject av rela Pur as q k led roce to be Beh nships ob us p rela tio ith o b ject that ca n be ed ca You ne s need llbac be hand ed. to ne ed sts is couple d from the asyn ch func the rn the without n it is y rono tionalit y need an ISBN-10: 1-934238-80-5 ls w ips st que n Reque y of re be de ate ar Dea e. nsh cilit d patte ssing entatio particul Suite 100 ould pe: latio 50795 Use or to fa n A hist r sh an ce pro implem ents its ting. Sco ntim pe used e comm n voke s re toty Whe for n ec clas The in ely al m ject ed at ru Pro wid th are utilizing a job q of the ueue actu d imple ue is exp Ob with n C ues ue g que the que an als que s. B y to dg e en e ch : De e time . xy en Job orithm be giv knowle that is terface b cop ss S at com e pil Deco rato r S Pro serv er Exa mp le g ut n of al ed ca to have d obje of the an nes ct in Cary, NC 27513 .com Ob exec e queue comm Cla d S B th e confi nge de leto n for king . Th ithin the cha tory Faca od Sing invo hm w DZone communities deliver over 6 million pages each month to ract Fac S Meth C algo rit 888.678.0399 one Abst tory C C Fac B State t pte r eigh y teg Ada Flyw Stra od z more than 3.3 million software developers, architects and decision Meth 919.678.0300 S S ter B w. d ridg e rpre plate B B Inte Tem S B er tor or ww Build Itera Visit $7.95 C B r B makers. DZone offers something for everyone, including news, B in o Resp o f Cha nsibili ty B Me diato men to ject Beh avio ral Refcardz Feedback Welcome d Me Ob man B tutorials, cheatsheets, blogs,IBfeature articles, source code and more. C om [email protected] NS B S Com po site PO ILIT Y succ ess or 9 781934 238806 ES “DZone is a developer’s dream,” says PC Magazine. CH AIN O FR >> Sponsorship Opportunities ace terf r <<in andle H uest () [email protected] nt +ha ndle req ler 2 Version 1.0 reserved. No part of this eteHand ( ) Copyright © 2009 DZone, Inc. All rights Clie cr publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, Con req uest photocopying, or otherwise, without prior written permission ofanthe publisher. king Reference: s dle ern 1 +h ler by lin .c o m and uest one teH req z cre () le a w.d Con uest hand | ww