INFT132 093 04 HTML and XHTML
Download as PPTX, PDF0 likes626 views
This document discusses the history and components of HTML and XHTML. It covers the evolution of HTML standards from version 4.01 to HTML5. It describes the basic building blocks of HTML pages including headings, paragraphs, lists, tables, links and images. It also discusses dynamic HTML, character entities and different types of paragraphs and containers.
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
- 16. Resources • Read Sections 2.1 through 2.8 of textbook © 2009 Michael Rees Web Applications 16