1. Introduction to HTML & XHTML 15 th February

2. Introduction to HTML & XHTML Introduction to HTML Introduction to XHTML

3. Introduction Web developers views a web page as a document that must be created according to authoring and development guidelines Web developers use HTML or XHTML to write code of a web page Web browsers have a built-in interpreter to render the results of a code in its window

4. The World Wide Web Definitions  HTML The HyperText Markup Language The language used to design web pages  XHTML The eXtensible HyperText Markup Language Intended to enhance HTML, not replace it World Wide Consortium (W3C) organisation is responsible for developing web standards

5. Content of Web Pages A web site may contain a combination of 13 standard elements: TextSound ListsVideo HyperlinksTables ColourLayers GraphicsFrames ImagesForms Image Maps

6. Content of Web Pages The content of a web site can be classified as:  Static content – does not change regularly e.g. personal and professional web sites  Dynamic content – changes regularly e.g., banking web sites, weather reports…

7. Authoring of Web Pages After a web page is designed one needs to use HTML/XHTML code to author a web page

8. XHTML Syntax XHTML uses tags that are enclosed in brackets ( ) XHTML content is enclosed between the tags Tags and content form an XHTML Generic form: content Start and end tags have the same name, end tag has a ‘/’ before it: This is BOLD XHTML tags can be nested according to the “first open, last closed” rule: bold and italic

9. XHTML Syntax XHTML rules  Tags must be closed  Empty tags must be closed  Use lower case tags  White space matters  All attributes values must be quoted  Tags must not overlap (i.e., during nesting)  Comments can be used  XHTML uses escaped characters Do not use deprecated or obsolete tags Browsers ignore mis-spelled tags

10. HTML Document Structure HTML Document Structure Web page content goes here

11. XHTML Document Structure XHTML Document Structure Web page content goes here

12. Document Tags The tags that make up the framework of a typical HTML document include the following: Document type tag – DOCTYPE Top-level tag, generally  Tag indicates the beginning and end of an XHTML document

13. Document Tags - Header Header section, delimited by tags  Provides extra information about the document  Serves as a container such as styles and global scripts  The main tags used in this section are: - specifies the document title - provides information to search engines - declares general & local styles for the document - declares any scripting information

14. Document Tags - Body Body section, delimited by tags  Section where visible content appears  Content is a series of block tags containing inline content

15. XHTML Tags ….. …..

16. How can I write my first web page? 1. Open a text editor e.g., Notepad 2. Put in code from the HTML Document Structure Slide 3. Save it as Example1.html 4. In web browser (IE/Firefox/Chrome),  Select File -> Open  Select Example1.html  Select Open

17. Meta Tags Web pages are designed for surfers and surf engines The tag increases the chances of page indexing Meta data refers to data about XHTML document rather than the document content Browsers do not render meta data Search engines use it for indexing and ranking the page hits in a given search Some attributes of this tag are name, content, http-equiv, scheme

18. Meta Tags When a search engine indexes the page, it includes the extra information -> open, source etc. It provides the keywords to agents requesting them Some search engines use these keywords to categorise the document for searching

19. Amazon’s Meta Tags

20. Authoring Tools Tools need to develop a web site:  Editor  Graphics program  Digital cameras  Scanners  Audio & video software Types of editors  Text: type in code and view results later -> Bottom-up development  HTML: view results as you develop the web page -> top-down development Web author must be familiar with both approaches

21. Text Formatting Paragraphs Lines Headings Horizontal Rules Block divisions

22. Paragraphs Main textual blocks, delimited by tags This a paragraph of text in an XHTML document Line space

23. Lines Used when you need to break a line prematurely (before the paragraph) The line break tag is

24. Lines - Example This a paragraph of text in an XHTML document This a 2nd paragraph of text in an XHTML document This a paragraph of text in an XHTML document This a 2nd paragraph of text in an XHTML document This a paragraph of text in an XHTML document This a 2nd paragraph of text in an XHTML document This a paragraph of text in an XHTML document This a 2nd paragraph of text in an XHTML document

25. Headings There are 6 levels of headings ….., the higher the heading number the smaller the text Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6

26. Horizontal Rules Horizontal rules appear as lines across the user agent screen - Used to separate information visually A line should be drawn under this text A line should be drawn under this text

27. Block Divisions Sometimes, there is a need to format a large block of text in a similar fashion but in a way that is different from other blocks in the same document e.g. a quote should appear in a different style than the text around it - Text formatted using div tag Text formatted using div tag

28. Text Formatting Text HeadingsParagraphs Word/Characters largest largest.. smallest smallest <p> bold bold italic italic line break line break acts like a line break acts like a line break line in a web page, line in a web page,

29. Special Characters These are required because some characters are reserved for XHTML use such as ‘ ’, etc. Special characters are represented by a character entity or a numeric code The character entity begins with & and ends with; © ->© The numeric code begins with &# and ends with ; © -> © 3 distinct character sets are:  ISO 8859-1 (Latin – 1)  Symbols, mathematical symbols, and Greek letters  Markup-significant and internationalisation characters

30. Hyperlinks Hyperlinks link web pages to each other  A link is a connection from one source to another  Hyperlinks create hypertext and is the driving force of the web Hyperlinks can be used as:  Links (inter-document links)  Anchors (intra-document links) Links start at the source (visible part) and points to the destination (invisible part) visible part Text or image File / web page/ program/ image/ video or Audio file….etc.

31. Hyperlinks The important attributes of the tag:  href  title  name  charset  type  rel  rev  accesskey  shape  coords

32. Hyperlinks The visible part of the link may have 4 states  Link – is not active and has not been visited  Active – target of the link is active in another browser window  Visited – target of the link has been previously visited  Hover – mouse pointer is over the link Example: This is the DIT web site http://www.dit.ie

33. Hyperlinks Anchors are tag to link different sections of the same web page 2 uses of anchors are for table of contents and eliminating scrolling Creation of anchor requires 2 tags and

34. Hyperlinks - anchors Table of Contents Section 1 Return to Table of Contents

35. Lists XHTML supports 3 types of lists:  Ordered –  Unordered –  Definition – Lists may be nested to obtain multiple hierarchy levels

36. Ordered List - Ordered List - Lists whose elements must appear in a certain order Such lists usually have their items prefixed with a number or letter <ol><li>Apples</li><li>Bananas</li><li>Coconuts</li></ol> 1.Apples 2.Bananas 3.Coconuts

37. Ordered List - Ordered List - How can the numbering style be changed?? Some other style options:  decimal  lower-roman  upper-roman  upper-alpha <li>Apples</li><li>Bananas</li><li>Coconuts</li></ol> a.Apples b.Bananas c.Coconuts

38. Unordered List - Unordered List - Lists whose elements do not have to appear in a certain order <ul><li>Apples</li><li>Bananas</li><li>Coconuts</li></ul> ApplesApples BananasBananas CoconutsCoconuts

39. Unordered List - Unordered List - How can the list item marker be changed?? Some other style options:  disc  circle  none <li>Apples</li><li>Bananas</li><li>Coconuts</li></ul> ApplesBananasCoconuts

40. Definition List - Definition List - More complex than the other 2 lists due to their having 2 elements per list item <dl> Internet Explorer Internet Explorer Developed by Microsoft Developed by Microsoft Netscape Netscape Developed by Netscape Developed by Netscape </dl> Internet Explorer Developed by Microsoft Netscape Developed by Netscape

41. Nesting Lists Lists can be nested of the same or different types <ul> Send us a letter, including: Send us a letter, including: Your full name Your full name Your order number Your order number Your contact information Your contact information Use the web form to send an email Use the web form to send an email </ul> Send us a letter, including:Send us a letter, including: 1.Your full name 2.Your order number 3.You contact information Use the web form to send an emailUse the web form to send an email

42. Colours Colour is an essential element and greatly improves visualisation A web author can set colours for background and text Tags have a color attribute that enables web authors to set colours for different XHTML elements Colours are specified using hexadecimal codes  Black -> #000000  Red -> #FF0000  Blue -> #0000FF Colours can be set globally or locally

43. Audio & Video XHTML allows any author to incorporate digital audio and videos in a web page  Audio formats – AU, WAV, MIDI, AIFF and MP3  Video formats – AVI, QuickTime, MPEG and MJPEG A surfer must have the right hardware and software to be able to play multimedia content of the web page tag is used to incorporate audio and video files in a web page Attributes used are src, width and height, volume, autostart, loop and hidden

44. Audio & Video

45. Conclusion Three views of Web pages: URL, browser display, and document Web sites and Web pages Text formatting: text, lists, colors, hyperlinks, audio, video HTML and XHTML Text and HTML editors XHTML document structure Content of Web pages Special characters

46. Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript