More Related Content
Similar to INFT132 093 04 HTML and XHTML (20)
More from Michael Rees (20)
INFT132 093 04 HTML and XHTML
- 1. INFT11/71-132
Web Applications
HTML and XHTML
Dr Michael Rees
School of Information Technology
mrees@bond.edu.au
- 2. History of HTML
• HTML defined using SGML for the general layout of
web pages
• HTML 4.01 – 1999
• XHTML 1.0 – 2000: HTML 4.01 defined using XML
– Modular: Strict, Transitional, Frameset
– Syntax can be validated at W3C
• XHTML 1.1 – 2001: Modularized 1.0, no frames
• HTML 5: to be the next standard
© 2009 Michael Rees Web Applications 2
- 3. Hypertext Markup Language
• Text-based markup language for web pages
• Defines:
– Page content: text, images, audio-visual, executable
behaviour (JavaScript)
– Page structure: different types of content (paragraphs,
headings, lists, tables, links, and so on)
– Page presentation: deprecated in favour of CSS
• HTML comprises:
– Elements or tags, tag attributes, and content
– Character entities: single special characters
– Data types: URI, colour, ID, units, dates, encoding
© 2009 Michael Rees Web Applications 3
- 4. Dynamic HTML
• An old marketing term
• Browsers read (X)HTML to create an in-memory Document
Object Model (DOM)
• JavaScript code within a web page is able to access and
change the DOM contents
• Browsers detect DOM changes and immediately redisplay
the content dynamically – hence the name
• Enables:
– responsive graphical user interface controls
– effects such as animation, drag and drop & so on
• Different browsers use different JavaScript notation for the
DOM contents
© 2009 Michael Rees Web Applications 4
- 5. HTML Components
• head tag
– title (regard as mandatory)
– styles
– metadata—content description
• body tag—page content
– headings
– body paragraphs
– lists
– Tables
• JavaScript: in head or body
© 2009 Michael Rees Web Applications 5
- 6. HTML Basics
• HTML consists of plain text interspersed with HTML tags
• tags are enclosed in ‗<‘ and ‗>‘ angle brackets
– eg <title> or <head>, lowercase spelling is required in
XHTML
• tags have content enclosed within start and ending forms:
– <title> ...title text... </title>
• empty tags start and end in one tag:
– <hr/> equivalent to <hr></hr>
• <!-- one or more lines of comment -->
© 2009 Michael Rees Web Applications 6
- 7. HTML Components
DTD Declaration
XML Namespace
Attribute, value in quotes
Entity
Closed tag
Empty tag
© 2009 Michael Rees Web Applications 7
- 8. Character Entities
• common characters ‗<‗, ‗>‗ and ‗&‘
– < for <
– > for >
– & for &
– © for © (ALT+0169)
– non-breaking space
• accented characters
– é is written é
– è is written è
– ñ is written ñ
– æ is written æ
© 2009 Michael Rees Web Applications 8
- 9. XHTML Lists
<p>Academic Senate ... following matters:
<ul>
<li>the formulation and development of ...
<li> regulatory provisions for ...
</ul>
<h2>Composition</h2>
<dl>
<dt>Executive Chancellor: ...
<dt>Deans of Schools</dt>
<dd>Business: ...
<dd>Humanities ..
</dl>
© 2009 Michael Rees Web Applications 9
- 10. Paragraph types
• <pre> ... </pre>
– preformatted text in fixed-width font
– spaces, tabs, newlines are significant
• <blockquote> ... </blockquote>
– as <p> but indented left and right
• <address> ... </address>
– italics
– used for address and identification
information, usually at end of document
© 2009 Michael Rees Web Applications 10
- 11. Tables
• Tags for table building are:
– <table> ... </table> whole table definition
– <tr> ...</tr> surround a single row
– <td> ...</td> surround a single cell in a row
– <th> ... </th> surround a header (title) cell
– <caption> ... </caption> surround heading and
footing captions
• Tables may be nested within tables
© 2009 Michael Rees Web Applications 11
- 12. Table Example
<table border="1" >
<tr align="center" valign="center">
<th>Code</th>
<th>Item</th>
<th>Note</th>
<th>Price</th>
</tr>
<tr>
<td>P125</td>
<td>Glucose Tester</td>
<td>Pain-free</td>
<td>$28.99</td>
</tr>
<tr>
<td>D652</td>
<td>Bandage Kit</td>
<td>Long stick</td>
<td>$8.95</td>
</tr>
</table>
© 2009 Michael Rees Web Applications 12
- 13. Container Tags
• Container tags allow a group of tags (page fragment)
to be accessed as a single tag
– Single id attribute
– Apply style to whole container
– Respond to events in whole container
• <div>
– Always starts a new line in the page
• <span>
– No line break
– Words and characters within one line
© 2009 Michael Rees Web Applications 13
- 14. Links
• Hyperlink to any web resource
• Specifies a resource address:
– Pathname to file – relative link
– URL – absolute link
• Uses the anchor <a> tag with an href attribute:
– <a href=―http://www.bond.edu.au‖> Bond
Uni</a>
• Set target within a page: <p id=―target‖></p>
then use <a href=―#target‖>Target link</a>
© 2009 Michael Rees Web Applications 14
- 15. Images
• Image specified with tag:
– <img src="URL" alt="text description" />
– SRC attribute: URL where image is located (can be
anywhere)
– ALT attribute: text displayed in special situations:
• non-visual browsers: text shown instead of image
• visual browsers: text shown while image loads
• accessibility
• Supported image types:
– GIF: Graphics Interchange Format
– JPEG: Joint Photographic Experts Group
– PNG: Portable Network Graphics
• Each image requires one additional request-response cycle
© 2009 Michael Rees Web Applications 15
