INFT132 093 04 HTML and XHTML
•Descargar como PPTX, PDF•
0 recomendaciones•623 vistas
HTML and XHTML
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Similar a INFT132 093 04 HTML and XHTML
Similar a INFT132 093 04 HTML and XHTML (20)
Más de Michael Rees
Más de Michael Rees (20)
Último
Último (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
- 16. Resources • Read Sections 2.1 through 2.8 of textbook © 2009 Michael Rees Web Applications 16