Intr To Html & Xhtml


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Intr To Html & Xhtml

  1. 1. Introduction to HTML & XHTML
  2. 2. Introduction <ul><li>Web developers view web pages as documents that must be created according to authoring and development guidelines </li></ul><ul><li>Web developers use HTML or XHTML to write code of a web page </li></ul><ul><li>Web browsers have a built-in interpreter to render the results of the code in its window </li></ul>
  3. 3. The World Wide Web <ul><li>Definitions </li></ul><ul><ul><li>HTML </li></ul></ul><ul><ul><ul><li>The HyperText Markup Language </li></ul></ul></ul><ul><ul><ul><li>The language used to structure text-based information in a document </li></ul></ul></ul><ul><ul><ul><ul><li>by denoting certain text as headings , paragraphs , lists , etc — and to supplement that text with interactive forms , embedded images , and other multimedia objects </li></ul></ul></ul></ul><ul><ul><li>XHTML </li></ul></ul><ul><ul><ul><li>The eXtensible HyperText Markup Language </li></ul></ul></ul><ul><ul><ul><li>XHTML consists of all the elements in HTML 4.01 combined with the syntax of XML. </li></ul></ul></ul><ul><ul><ul><ul><li>Allows users to define their own “tags” for defining structure, layout, etc. </li></ul></ul></ul></ul>
  4. 4. Content of Web Pages <ul><li>A web site may contain a combination of 13 standard elements: </li></ul><ul><ul><li>Text Sound </li></ul></ul><ul><ul><li>Lists Video </li></ul></ul><ul><ul><li>Hyperlinks Tables </li></ul></ul><ul><ul><li>Colour Layers </li></ul></ul><ul><ul><li>Graphics Frames </li></ul></ul><ul><ul><li>Images Forms </li></ul></ul><ul><ul><li>Image Maps </li></ul></ul>
  5. 5. Content of Web Pages <ul><li>The content of a web site can be classified as: </li></ul><ul><ul><li>Static content – does not change regularly e.g. personal and professional web sites </li></ul></ul><ul><ul><li>Dynamic content – changes regularly e.g., newspaper web sites, weather report sites… </li></ul></ul>
  6. 6. Authoring of Web Pages <ul><li>After a web page layout is designed, one needs to use HTML/XHTML code to implement the design </li></ul><ul><li>Introduction to XHTML </li></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Document Tags </li></ul></ul><ul><ul><li>Authoring tools </li></ul></ul><ul><ul><li>Text formatting </li></ul></ul><ul><ul><li>Special characters </li></ul></ul><ul><ul><li>Hyperlinks </li></ul></ul><ul><ul><li>Lists </li></ul></ul><ul><ul><li>Meta Data </li></ul></ul><ul><ul><li>Colours </li></ul></ul><ul><ul><li>Audio & Video </li></ul></ul>
  7. 7. XHTML Syntax <ul><li>XHTML uses tags that are enclosed in brackets < > </li></ul><ul><li>XHTML content is contained between tags </li></ul><ul><li>Tags and content form an XHTML element </li></ul><ul><li>Generic element form: < start-tag > content < end-tag > </li></ul><ul><li>Start and end tags have the same name, end tag has a ‘/’ before it: <b>This is BOLD</b> </li></ul><ul><li>XHTML tags can be nested according to the “first open, last closed” rule: <b><i>bold and italic</i></b> </li></ul>
  8. 8. XHTML Syntax <ul><li>XHTML rules </li></ul><ul><ul><li>Tags must be closed </li></ul></ul><ul><ul><li>XHTML is case sensitive </li></ul></ul><ul><ul><li>Use lower case tags and attribute names, e.g. width=“100%” </li></ul></ul><ul><ul><li>All attribute values must be double quoted, e.g. “100%” </li></ul></ul><ul><ul><li>Tags must not overlap (i.e., during nesting) </li></ul></ul><ul><ul><li>Comments can be used </li></ul></ul><ul><ul><ul><li><!-- This text is a comment --> </li></ul></ul></ul><ul><li>Do not use obsolete ( deprecated) tags </li></ul><ul><li>Browsers ignore misspelled tags (and many other things!) </li></ul>
  9. 9. Document Tags <ul><li>The tags that make up the framework of a typical XHTML document include the following: </li></ul><ul><li>Document type definition (DTD) tag – DOCTYPE </li></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul></ul><ul><ul><li>&quot;;> </li></ul></ul><ul><ul><li>Describes (to web browsers) what type/version of (x)html is used </li></ul></ul><ul><ul><li>Specifies rules that apply to the markup of documents </li></ul></ul><ul><ul><li>Used for document syntax validation (e.g. strict) and for web browser to process document in proper “parsing” mode (impacts on consistency and speed of display) </li></ul></ul><ul><li>An XHTML document is validated against a Document Type Definition. </li></ul><ul><li>Top-level tag, generally <html> </li></ul><ul><ul><li>Tag indicates the beginning and /end of an XHTML document </li></ul></ul>
  10. 10. Sample XHTML Document Structure <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; </li></ul><ul><li>&quot;;> </li></ul><ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> New Document </TITLE> </li></ul><ul><li><META NAME=&quot;Author&quot; CONTENT=&quot;&quot;> </li></ul><ul><li><META NAME=&quot;Keywords&quot; CONTENT=&quot;&quot;> </li></ul><ul><li><META NAME=&quot;Description&quot; CONTENT=&quot;&quot;> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li>webpage content goes here! </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  11. 11. Minimal XHTML Document <ul><li><!DOCTYPE ….> <html> </li></ul><ul><li> <head> ….. </head> </li></ul><ul><li><body> </li></ul><ul><li><p> </li></ul><ul><li>…… . </li></ul><ul><li></p> </body> </html> </li></ul>HTML element HTML element HTML element HTML element
  12. 12. HTML Document Structure <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>HTML Document Structure</title> </li></ul><ul><li><meta name=“author” content=“Andrea Curley” /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li>all web page content goes here </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  13. 13. Document Tags - Header <ul><li>Header section, delimited by <head> tags </li></ul><ul><ul><li>Provides extra information about the document </li></ul></ul><ul><ul><li>Serves as a container for styles, global scripts, etc. </li></ul></ul><ul><ul><li>The main tags used in this section are: </li></ul></ul><ul><ul><ul><li><title> - specifies the document title </li></ul></ul></ul><ul><ul><ul><li><meta> - provides information to search engines </li></ul></ul></ul><ul><ul><ul><li><style> - declares general & local styles for the document </li></ul></ul></ul><ul><ul><ul><li><script> - declares any scripting information </li></ul></ul></ul>
  14. 14. Meta Tags <ul><li>Web pages are designed for surfers and surf engines </li></ul><ul><li>The <meta> tag increases the chances of page indexing </li></ul><ul><li>Meta data refers to data about XHTML document rather than the document content </li></ul><ul><li>Browsers do not render meta data </li></ul><ul><li>Search engines use it for indexing and ranking the page hits in a given search </li></ul><ul><li>Some attributes of this tag are name , content , http-equiv , etc. </li></ul>
  15. 15. Meta Tags <ul><li>Most often the meta element is used to provide information that is relevant to browsers or search engines like describing the content of your document. </li></ul><ul><li><meta name=“keywords” content=“open, source, PHP, programming, code” /> </li></ul><ul><li>When a search engine indexes the page, it includes the extra information -> open, source, etc. </li></ul><ul><li>It provides these keywords to search agents requesting them </li></ul>
  16. 16. Amazon’s Meta Tags <ul><li>< meta name =&quot;description&quot; content =&quot;Low prices on digital cameras, MP3, LCD TVs, books, music, DVDs, video games, software, home & garden and much, much more. Free delivery on orders over £15.&quot; /> </li></ul><ul><li>< meta name =&quot;keywords&quot; content =&quot;digital camera, LCD TV, books, DVD, low prices, video games, pc games, software, electronics, home, garden, video, amazon&quot; /> </li></ul>
  17. 17. Document Tags - Body <ul><li>Body section, delimited by <body> tags </li></ul><ul><ul><li>Section where visible content appears </li></ul></ul><ul><ul><li>Content is a series of block tags containing inline content </li></ul></ul>
  18. 18. How can I write my first web page? <ul><ul><li>Open a text editor e.g., Notepad, Edit Plus </li></ul></ul><ul><ul><li>Put in code from the HTML Document Structure Slide </li></ul></ul><ul><ul><li>Save it as Example1.html </li></ul></ul><ul><ul><li>In web browser (IE/Firefox/Netscape), </li></ul></ul><ul><ul><ul><li>Select File -> Open </li></ul></ul></ul><ul><ul><ul><li>Select Example1.html </li></ul></ul></ul><ul><ul><ul><li>Select OK </li></ul></ul></ul>
  19. 19. Authoring Tools <ul><li>Tools needed to develop a web site: </li></ul><ul><ul><li>Editor </li></ul></ul><ul><ul><li>Graphics program </li></ul></ul><ul><ul><li>Digital cameras </li></ul></ul><ul><ul><li>Scanners </li></ul></ul><ul><ul><li>Audio & video software </li></ul></ul><ul><li>Types of editors </li></ul><ul><ul><li>Text : type in code and view results later -> Bottom-up development </li></ul></ul><ul><ul><li>HTML : view results as you develop the web page -> top-down development </li></ul></ul><ul><li>Web author must be familiar with both approaches </li></ul><ul><ul><li>e.g. “EditPlus”, “MacroMedia Dreamweaver” </li></ul></ul>
  20. 20. Text Formatting <ul><li>Paragraphs </li></ul><ul><li>Line breaks </li></ul><ul><li>Headings </li></ul><ul><li>Horizontal Rules </li></ul><ul><li>Block divisions </li></ul>
  21. 21. Paragraphs <ul><li>Main textual blocks, delimited by <p> tags </li></ul><ul><li><p> This is a paragraph of text in an XHTML document </p> </li></ul>This is a paragraph of text in an XHTML document Line spaces automatically inserted
  22. 22. Line breaks <ul><li>Used when you need to break a line prematurely (before the paragraph) </li></ul><ul><li>The line break tag is <br /> </li></ul><ul><ul><li>Need space between “ br” and “ /” for Netscape browsers to interpret correctly </li></ul></ul>
  23. 23. Lines - Example <ul><li><p> This is a paragraph of text in an XHTML document </p> </li></ul><ul><li><p> This is a 2nd paragraph of text in an XHTML document </p> </li></ul><ul><li>This is a paragraph of text in an XHTML document </li></ul><ul><li>This is a 2nd paragraph of text in an XHTML document </li></ul><ul><li><p> This is a paragraph of text in an XHTML document </p> </li></ul><ul><li><p> This is a 2nd paragraph of text <br /> in an XHTML document </p> </li></ul><ul><li>This is a paragraph of text in an XHTML document </li></ul><ul><li>This is a 2nd paragraph of text </li></ul><ul><li>in an XHTML document </li></ul>
  24. 24. Headings <ul><li>There are 6 levels of headings <h1> ….. <h6> , the higher the heading number the smaller the text </li></ul><ul><li><h1> Heading 1 </h1> </li></ul><ul><li><h2> Heading 2 </h2> </li></ul><ul><li><h3> Heading 3 </h3> </li></ul><ul><li><h4> Heading 4 </h4> </li></ul><ul><li><h5> Heading 5 </h5> </li></ul><ul><li><h6> Heading 6 </h6> </li></ul>Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
  25. 25. Horizontal Rules <ul><li>Horizontal rules appear as lines across the browser screen - <hr /> use space between “hr” and “/” so Netscape browsers can interpret correctly </li></ul><ul><li>Used to separate information visually </li></ul><ul><li>A line should be drawn under this text <hr /> </li></ul><ul><li>A line should be drawn under this text </li></ul>
  26. 26. Block Divisions (div) <ul><li>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 quoted block of text could appear in a different style than the text around it - <div> </li></ul><ul><li><div align= &quot;center&quot;> Text formatted using div tag </li></ul><ul><li></div> </li></ul><ul><li>Text formatted using div tag </li></ul>
  27. 27. Text Formatting Text Headings Paragraphs Word/Characters <h1> largest . . <h6> smallest <p> <b> bold <i> italic <br /> line break <div> acts like a line break <hr /> line in a web page,
  28. 28. Hyperlinks <ul><li>Hyperlinks <a> link web pages to each other </li></ul><ul><ul><li>A link is a connection from one source to another </li></ul></ul><ul><ul><li>Hyperlinks create hypertext and is the driving force of the web </li></ul></ul><ul><li>Hyperlinks can be used as: </li></ul><ul><ul><li>inter-document and intra-document links </li></ul></ul><ul><li>Links start at the source (visible part) and points to the destination (invisible part) </li></ul><ul><li><a href=&quot;;> Visit W3Schools! </a> </li></ul>address of the document to link to (invisible) Text to be be displayed as a hyperlink (visible)
  29. 29. Hyperlinks <ul><li>The important attributes of the link <a> tag: </li></ul><ul><ul><li>href </li></ul></ul><ul><ul><li>title </li></ul></ul><ul><ul><li>name </li></ul></ul><ul><ul><li>charset </li></ul></ul><ul><ul><li>type </li></ul></ul><ul><ul><li>rel </li></ul></ul><ul><ul><li>rev </li></ul></ul><ul><ul><li>accesskey </li></ul></ul><ul><ul><li>shape </li></ul></ul><ul><ul><li>coords </li></ul></ul>
  30. 30. Hyperlinks <ul><li>The visible part of the link may have 4 states </li></ul><ul><ul><li>Link – is not active and has not been visited </li></ul></ul><ul><ul><li>Active – target of the link is active in another browser window </li></ul></ul><ul><ul><li>Visited – target of the link has been previously visited </li></ul></ul><ul><ul><li>Hover – mouse pointer is over the link </li></ul></ul><ul><li>Redirect Example </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><meta http-equiv=&quot;Refresh&quot; content=&quot;5;url=; /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p>Sorry! We have moved! The new URL is: <a href=&quot;;></a></p> </li></ul><ul><li><p>You will be redirected to the new address in five seconds.</p> </li></ul><ul><li><p>If you see this message for more than 5 seconds, please click on the link above!</p> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  31. 31. Hyperlinks - anchors <ul><li>for “external” link </li></ul><ul><li><a href= http ://www. dit . ie target=“_blank” > This is the DIT web site</a> </li></ul><ul><li>… for “internal” link </li></ul><ul><li><a href=“#Section1”> jump to Section 1</a> </li></ul><ul><li>. </li></ul><ul><li><a name=“Section1”>Section 1</a> </li></ul><ul><li>… for “mail to” link </li></ul><ul><li><a href=&quot;;>email [email_address] . ie </a > </li></ul>
  32. 32. Lists <ul><li>XHTML supports 3 types of lists: </li></ul><ul><ul><li>Ordered – <ol> </li></ul></ul><ul><ul><li>Unordered – <ul> </li></ul></ul><ul><ul><li>Definition – <dl> </li></ul></ul><ul><li>Lists may be nested to obtain multiple hierarchy levels </li></ul>
  33. 33. Ordered List - <ol> <ul><li>Lists whose elements must appear in a certain order </li></ul><ul><li>Such lists usually have their items prefixed with a number or letter </li></ul><ol> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> <ul><li>Apples </li></ul><ul><li>Bananas </li></ul><ul><li>Coconuts </li></ul>
  34. 34. Ordered List - <ol> <ul><li>How can the numbering style be changed?? </li></ul><ul><li>Some other style options: </li></ul><ul><ul><li>decimal </li></ul></ul><ul><ul><li>lower-roman </li></ul></ul><ul><ul><li>upper-roman </li></ul></ul><ul><ul><li>upper-alpha </li></ul></ul><ol style=“list-style-type: lower-alpha” > <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> a. Apples b. Bananas c. Coconuts
  35. 35. Unordered List - <ul> <ul><li>Lists whose elements do not have to appear in a numbered order </li></ul><ul> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ul> <ul><li>Apples </li></ul><ul><li>Bananas </li></ul><ul><li>Coconuts </li></ul>
  36. 36. Unordered List - <ul> <ul><li>How can the list item marker be changed?? </li></ul><ul><li>Some other style options: </li></ul><ul><ul><li>disc </li></ul></ul><ul><ul><li>circle </li></ul></ul><ul><ul><li>none </li></ul></ul><ul style=“list-style-type: square” > <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ul> Apples Bananas Coconuts
  37. 37. Definition List - <dl> <ul><li>More complex than the other 2 lists due to their having 2 elements per list item </li></ul><dl> <dt>Internet Explorer</dt> <dd>Developed by Microsoft</dd> <dt>Netscape</dt> <dd>Developed by Netscape</dd> </dl> Internet Explorer Developed by Microsoft Netscape Developed by Netscape
  38. 38. Nesting Lists <ul><li>Lists can be nested of the same or different types </li></ul><ul> <li>Send us a letter, including:</li> <ol> <li>Your full name</li> <li>Your order number</li> <li>Your contact information</li> </ol> <li> Use the web form to send an email </li> </ul> <ul><li>Send us a letter, including: </li></ul><ul><ul><li>Your full name </li></ul></ul><ul><ul><li>Your order number </li></ul></ul><ul><ul><li>You contact information </li></ul></ul><ul><li>Use the web form to send an email </li></ul>
  39. 39. Colours <ul><li>Colour is an essential element and greatly improves visualisation </li></ul><ul><li>A web author can set colours for background and text </li></ul><ul><li>Tags have a color attribute that enables web authors to set colours for different XHTML elements </li></ul><ul><li>Colours can be specified using hexadecimal codes for multi-browser consistency </li></ul><ul><ul><li>Black -> #000000 </li></ul></ul><ul><ul><li>Red -> #FF0000 </li></ul></ul><ul><ul><li>Blue -> #0000FF </li></ul></ul><ul><li>Colours can be set globally or locally </li></ul>
  40. 40. Audio & Video <ul><li>XHTML allows authors to incorporate digital audio and videos in a web page </li></ul><ul><ul><li>Audio formats – AU, WAV, MIDI, AIFF and MP3 </li></ul></ul><ul><ul><li>Video formats – AVI, QuickTime, MPEG and MJPEG </li></ul></ul><ul><li>A surfer must have the right hardware and software to be able to play multimedia content of the web page </li></ul><ul><li><embed> tag causes a control panel to be displayed for audio and video files in a web page </li></ul><ul><li>Attributes used are src , width and height , volume , autostart , loop and hidden </li></ul>
  41. 41. Audio & Video <ul><li>< embed src=&quot;music.mp3&quot; width=&quot;145&quot; height=&quot;60&quot; volume=&quot;70&quot;> </ embed > </li></ul>
  42. 42. Reference <ul><li>Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference , Hungry Minds Inc,U.S. </li></ul><ul><li>Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS , New Riders. </li></ul><ul><li>Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript </li></ul>