Your SlideShare is downloading. ×
INFT132 093 04 HTML and XHTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

INFT132 093 04 HTML and XHTML

727
views

Published on

HTML and XHTML

HTML and XHTML

Published in: Education, Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
727
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 ‗&‘ – &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. 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

×