HTML & XHTML Basics

2,160 views

Published on

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

No Downloads
Views
Total views
2,160
On SlideShare
0
From Embeds
0
Number of Embeds
514
Actions
Shares
0
Downloads
76
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML & XHTML Basics

  1. 1. HTML & XHTML 1 HOSSEIN ZAHED AMIR KABIR UNIVERSITY OF TECHNOLOGY HTTP://WWW.HZAHED.COM HOSSEIN.ASPX@GMAIL.COM © 2013 Hossein Zahed - www.hzahed.com
  2. 2. Using HTML/XHTML 2  XHTML is relatively simple. You do most of your work with about twenty tags.  XHTML is orderly and structured  Good references and tutorial sites are available  Follow the standards and your work will be much simpler, more consistent, and your results more reliable  Plus your co-workers will like you more © 2013 Hossein Zahed - www.hzahed.com
  3. 3. Device Independence 3 Your audience may view your site with many different devices and browser types. © 2013 Hossein Zahed - www.hzahed.com
  4. 4. The Browser 4 The browser is not print! © 2013 Hossein Zahed - www.hzahed.com
  5. 5. The Browser Is Not Print 5  No fixed page size  No fixed page length  User can change the font size  User can link to her/his own local style sheet  Screen size can be tiny or huge © 2013 Hossein Zahed - www.hzahed.com
  6. 6. The Adjustable Document 6 © 2013 Hossein Zahed - www.hzahed.com
  7. 7. The Birth of HTML 7  Created by Tim Berners-Lee at CERN  Open standard developed under supervision of the World Wide Web Consortium (www.w3.org) © 2013 Hossein Zahed - www.hzahed.com
  8. 8. The History of HTML/XHTML 8          1992 – HTML first defined 1994 – HTML 2.0 1995 – Netscape specific non-standard HTML 1996 – HTML 3.2, compromise version 1997 – HTML 4.0, separates content from presentation 1998 – XML standard for writing Web languages 2000 – XHTML 1.0, XML compliant HTML 2002 – XHTML 2.0 2008 – HTML 5.0 © 2013 Hossein Zahed - www.hzahed.com
  9. 9. Problems With HTML 9  In Large Scale Websites (Large number of HTML     pages) changing anything is very hard Lack of Visual Effects in presentation Lack of Programming features, only Static Pages allowed. No database can be used Cross Browser Problems (Chrome, IE, Firefox) Lack of Multimedia support (Videos, Music, Flash Animation) © 2013 Hossein Zahed - www.hzahed.com
  10. 10. XHTML 10  XHTML is a version of HTML modified to conform to the XML standard  Designed to separate content from presentation   Content in XHTML Presentation controlled by Cascading Style Sheets (CSS)  Extensible – Additional elements can be defined  XML Compatible – Other XML based languages can be embedded in XHTML documents  Like a programming language   Specific syntax to use Validators help you get it right © 2013 Hossein Zahed - www.hzahed.com
  11. 11. XHTML Differences 11  Case is significant  All elements must have begin tags and end tags <p>Hello</p>  Empty elements contain their own end tag <br /> , <hr/>  Attribute values must be enclosed in quotation marks  More specifics available at http://www.w3.org/TR/xhtml1/#diffs © 2013 Hossein Zahed - www.hzahed.com
  12. 12. A Simple XHTML File 12 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> My Home Page </title> </head> <body> <h1>My Home Page </h1> <p> Welcome to my home page </p> </body> </html> © 2013 Hossein Zahed - www.hzahed.com
  13. 13. Hierarchical Structure 13 Well formed xhtml forms a hierarchy © 2013 Hossein Zahed - www.hzahed.com
  14. 14. Content Types 14 Documents are made up of logical types of content. © 2013 Hossein Zahed - www.hzahed.com
  15. 15. Semantic Structure 15 Content of the same type usually is formatted to look the same. © 2013 Hossein Zahed - www.hzahed.com
  16. 16. Semantic Markup 16 HTML markup is based on logical content types © 2013 Hossein Zahed - www.hzahed.com
  17. 17. Hierarchy 17 The resulting hierarchy © 2013 Hossein Zahed - www.hzahed.com
  18. 18. The DOCTYPE Statement 18  Declares the specific version of HTML or XHTML being used on the page  Used by the browser to decide how to process the page  Three types Transitional - Forgiving  Strict – Requires adherence to standards  Frameset – Use if page has frames   Always first in file © 2013 Hossein Zahed - www.hzahed.com
  19. 19. Strict DOCTYPE 19  Enter exactly as below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN― "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  Using Strict encourages standards based coding   Validators will flag logical errors in your methods Your CSS will work better and more predictably © 2013 Hossein Zahed - www.hzahed.com
  20. 20. Elements 20  Consist of three parts  Begin tag, which can contain attributes  Contents  End tag  Example: <p id=―intro‖>Welcome</p>  W3schools specifications for <p> http://www.w3schools.com/tags/tag_p.asp © 2013 Hossein Zahed - www.hzahed.com
  21. 21. Attributes 21  Always only used in the element begin tag  Three types  Optional attributes: Varies with element type  Standard attributes: id, class, title, style, dir, lang, xml:lang  Event attributes: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup  Used in scripting © 2013 Hossein Zahed - www.hzahed.com
  22. 22. Empty Elements 22  Some elements have no content and therefore also have no end tag <img src=―photo.jpg‖ />  <br />  <hr />  <link rel="stylesheet" type="text/css" href=―main.css" />   In XHTML, which requires end tags on all elements, a single tag represents both the begin and end tag © 2013 Hossein Zahed - www.hzahed.com
  23. 23. Heading 23  <h1>, <h2>, … , <h6>  Headings on the page  Represent the main topic, subtopics, subsubtopics, etc. of the page  Important to use they in a logical manner, which greatly helps assistive technology like voice browsers present the page content intelligibly © 2013 Hossein Zahed - www.hzahed.com
  24. 24. Paragraph 24  <p>  Paragraph  Important for presentation control to put text in an element. When in doubt, put text in a paragraph  Blockquotes (<blockquote>) except they have wider left and right margins © 2013 Hossein Zahed - www.hzahed.com
  25. 25. List 25  Unordered lists (bulleted lists) <ul> <li>One</li> <li>Two</li> </ul>  Ordered lists (numbered lists) <ol> <li>One</li> <li>Two</li> </ol> © 2013 Hossein Zahed - www.hzahed.com
  26. 26. Text Markup 26  Bolding  <b>text</b>  <strong>text</strong>  Italics  <i>text</i>  <em>text</em>  Other  <sub>text</sub> subscript  <sup>text</sup> superscript  <del>text</del> deleted text © 2013 Hossein Zahed - www.hzahed.com
  27. 27. Table 27 <table border="1" cellspacing="5" cellpadding="10"> <caption>People on the team</caption> <tr> <th>Name</th> <th>Position</th> </tr> <tr> <td>Mary</td> <td>Analyst</td> </tr> <tr> <td>John</td> <td>Technician</td> </tr> </table> © 2013 Hossein Zahed - www.hzahed.com
  28. 28. Graphic (Image) 28  Graphics are placed by using an img element  The alt attribute provides alternative text describing the graphic in case the graphic itself cannot be shown or the user cannot see the graphic <img src="picture.gif" alt="Suzzallo― /> © 2013 Hossein Zahed - www.hzahed.com
  29. 29. Anchor (Link) 29  Anchors can link your page to any file, page, URL on the Web OR to a section on the same page <a href="http://www.washington.edu/"> University of Washington </a> © 2013 Hossein Zahed - www.hzahed.com
  30. 30. Div 30  <div>  Divs enclose a set of elements <div style=―text-align: center;‖> <h2> News</h2> <p><a href=―budget.html‖>Budget</a></p> <p><a href=―invest.html‖>Investment</a></p> </div> © 2013 Hossein Zahed - www.hzahed.com
  31. 31. Span 31  <span>  Spans enclose objects (text, graphics) within an element <p>Call me Ishmael. Some years ago — <span style=―fontstyle: italic;‖>never mind how long precisely</span> — having little or no money in my purse, and nothing particular to interest me on shore, © 2013 Hossein Zahed - www.hzahed.com
  32. 32. Form 32  HTML forms are used to pass data to a server  An HTML form can contain input elements like  Text Fields  Checkboxes  Radio-Buttons  Submit Buttons and more  Textarea  Fieldset  Legend  Label © 2013 Hossein Zahed - www.hzahed.com
  33. 33. Form Tags 33  <input type="text"> Defines a one-line input field     that a user can enter text into <input type="password"> Defines a password field <input type="radio"> Defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices <input type="checkbox"> Defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices <input type="submit"> Defines a submit button © 2013 Hossein Zahed - www.hzahed.com
  34. 34. Form Tags 34  <fieldset> Draws a box around the related elements  <legend> Defines a caption for the <fieldset> element  <select> Is used to create a drop-down list  <option> Inside the <select> element define the available options in the list © 2013 Hossein Zahed - www.hzahed.com
  35. 35. Other HTML Tags 35  <style> Defines style information for an HTML      document <meta> Provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine pars able. <script> Contains scripting statements, or it points to an external script file through the src attribute. (Like JavaScript, VB Script) <embed> Defines a container for an external application or interactive content (a plug-in like Flash, YouTube). <iframe> An inline frame is used to embed another document within the current HTML document. <hidden> Defines a hidden input field © 2013 Hossein Zahed - www.hzahed.com
  36. 36. HTML5 New Tags 36 <canvas> Draws Graphics on the fly <video> Defines a video or movie <audio> Defines sound content <source> Defines multiple media resources <article> Defines an article <dialog> Defines a dialog box or window <header> Defines a header for a document or section <footer> Defines a footer for a document or section <mark> Defines marked / highlighted text <meter> Defines a scalar measurement within a known range  <time> Defines a date/time           © 2013 Hossein Zahed - www.hzahed.com
  37. 37. Resources 37  W3schools  http://www.w3schools.com/  RADCOM (Farsi Language)  http://www.html.ir © 2013 Hossein Zahed - www.hzahed.com

×