Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

INFT132 093 04 HTML and XHTML

975 views

Published on

HTML and XHTML

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

INFT132 093 04 HTML and XHTML

  1. 1. INFT11/71-132 Web Applications HTML and XHTML Dr Michael Rees School of Information Technology mrees@bond.edu.au
  2. 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. 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. 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. 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. 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. 7. HTML Components DTD Declaration XML Namespace Attribute, value in quotes Entity Closed tag Empty tag © 2009 Michael Rees Web Applications 7
  8. 8. Character Entities • common characters ‗<‗, ‗>‗ and ‗&‘ – &lt; for < – &gt; for > – &amp; for & – &copy; for © (ALT+0169) – &nbsp; non-breaking space • accented characters – é is written &eacute; – è is written &egrave; – ñ is written &ntilde; – æ is written &aelig; © 2009 Michael Rees Web Applications 8
  9. 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. 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. 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. 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. 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. 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. 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
  16. 16. Resources • Read Sections 2.1 through 2.8 of textbook © 2009 Michael Rees Web Applications 16

×