Html5
Download as PPTX, PDF2 likes3,063 views
The document provides a comprehensive overview of HTML, XHTML, and HTML5, detailing their structures, tags, and attributes. It explains the evolution of HTML, the necessity of XHTML for cross-browser compatibility, and the new features introduced in HTML5 such as built-in audio and video support. Additionally, it compares the differences between XHTML and HTML5, highlighting the advantages of using HTML5 for modern web development.
Html5
- 1. Presented by: Shiva Ram Dam MScISE, GCES 1
- 2. Agenda: • HTML • XHTML • HTML5 2
- 4. HTML • HyperText Markup Language • Set of Text commands that can be used to format how a web is displayed. 4
- 5. Tags: • Keywords surrounded by angular brackets. • Not case sensitive • No space allowed in between Eg: <h e a d> • Eg: <head></head> <p> • Two types of tags: • Container tags: <title></title> • Empty tags: <br><hr> • Comments are put inside <!--………..--> 5
- 6. Some major Tags: 6 Tags Description <!DOCTYPE...> defines the document type and HTML version. <html> encloses the complete HTML document and mainly comprises of the <head>..</head> and <body>….</body> <head> represents the document's header which can keep other HTML tags like <title>, <link> etc. <title> used inside the <head> tag to mention the document title. <body> represents the document's body which keeps other HTML tags like <h1>, <div>, <p> etc. <br> Used to break the line <p> Used to create a paragraph in the webpage <hr> Used to draw horizontal line across the page
- 7. Some Basic Tags: 7 Tags Description <h1>…<h6> Heading tags: used to set different headings on the document. <b> Used to set the text in boldface. <i> Used to set the text in italic format. <u> Used to underline the text <sup> Used to convert the text in superscript like a2, b2 <sub> Used to convert the text in subscript like a2, b2 <img> Used to insert images <table> Used to create table
- 8. Attributes: • Provide additional information to describe the content of tags. • Always in the start tag. • Eg: <body bgcolor =“green”> 8
- 9. Basic structure of HTML document: 9
- 10. Sample: 10
- 12. The Paragraph and Break tags: 12 <p>…</p> <br>
- 13. The Horizontal line tag: 13 <hr>
- 14. HTML elements: • An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>..content goes here...</tagname> • The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p> • Empty elements: have no content, do not have an end tag, Eg: <br> 14
- 15. The Table tag: • <table> …..</table> • Used for making table • <th> table used for table heading • <tr> tag used for table row • <td> tag used for cell of a table 15
- 17. The listing tags: • HTML supports three types of Lists: 1. Ordered or Numbered List <OL> tag 2. Unordered List <UL> tag 3. Definition List <DL> tag The item of the list are inserted using <LI> tag 17
- 19. Form Element • A form is container that holds multiple controls. • Forms collect data from site visitor and post it back to back-end application. 19
- 20. Input Elements: Input type Syntax Description Text <input type="text"> defines a one-line text input field Password <input type="password"> defines a password field Submit <input type="submit"> defines a button for submitting form data to a form-handler. Reset <input type="reset"> defines a reset button that will reset all form values to their default values. Radio <input type="radio"> defines a radio button. Radio buttons lets user select ONLY ONE of a limited number of choices. Checkbox <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. Button <input type="button"> defines a button. 20
- 21. Input Attributes: Attributes Description Example value the initial value for an input field. <input type="text" name="firstname" value=“Hari" name Used to give a name to the control which is sent to the server to be recognized and get the value. <input type="text" name="firstname" value=“Hari" size specifies the size (in characters) for the input field: <input type="text" name="firstname" value="John" size="40"> maxlength specifies the maximum allowed length for the input field <input type="text" name="firstname" maxlength="10"> readonly specifies that the input field is read only (cannot be changed) <input type="text" name="firstname" value=“Hari" readonly> disabled specifies that the input field is disabled. Its value will not be sent when submitting the form: <input type="text" name="firstname" value=“Hari" disabled> 21
- 22. A simple login form 22
- 23. XHTML • XHTML: EXtensible HyperText Markup Language • almost identical to HTML • stricter than HTML • XHTML is HTML defined as an XML application • XHTML is supported by all major browsers • was developed by combining the strengths of HTML and XML. 23
- 24. Why XHTML ? • The reason for XHTML to be developed was convoluted browser specific tags. Pages coded in HTML appeared different in different browsers. • To solve some cross-browser compatibility issues 24
- 25. The Most Important Differences from HTML: 1. Document Structure – XHTML DOCTYPE is mandatory – The xmlns attribute in <html> is mandatory – <html>, <head>, <title>, and <body> are mandatory 25
- 26. The Most Important Differences from HTML: 2. XHTML Elements – XHTML elements must be properly nested – XHTML elements must always be closed – XHTML elements must be in lowercase – XHTML documents must have one root element 26
- 27. The Most Important Differences from HTML: 27 Restriction Valid in HTML Valid in XHTML XHTML Elements Must Be Properly Nested <b><i>This text is bold and italic</b></i> <b><i>This text is bold and italic</i></b> XHTML Elements Must Always Be Closed <p>This is a paragraph <p>This is another paragraph <p>This is a paragraph</p> <p>This is another paragraph</p> XHTML Elements Must Be In Lower Case <BODY> <P>This is a paragraph</P> </BODY> <body> <p>This is a paragraph</p> </body> Empty Elements Must Also Be Closed A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt=" Happy face"> A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" />
- 28. The Most Important Differences from HTML: 3. XHTML Attributes – Attribute names must be in lower case – Attribute values must be quoted – Attribute minimization is forbidden 28
- 29. The Most Important Differences from HTML: 29 Restriction Valid in HTML Valid in XHTML XHTML Elements Must Be In Lower Case <BODY> <P>This is a paragraph</P> </BODY> <body> <p>This is a paragraph</p> </body> XHTML Attribute Names Must Be In Lower Case <table WIDTH="100%"> <table width="100%"> Attribute Values Must Be Quoted <table width=100%> <table width="100%">
- 30. HTML 5 • The newest version of HTML, only recently gaining partial support by the makers of web browsers. • Incorporates all features from earlier versions of HTML, including the stricter XHTML. • Adds a diverse set of new tools for the web developer to use. • It is still a work in progress. No browsers have full HTML5 support. 30
- 31. Goals of HTML5 • Support all existing web pages. • Reduce the need for external plugins and scripts to show website content. • Improve the semantic definition (i.e. meaning and purpose) of page elements. • Make the rendering of web content universal and independent of the device being used. • Handle web documents errors in a better and more consistent fashion 31
- 32. Some New Elements in HTML5 32 Tag Description <article> Defines an article in a document <aside> Defines content aside from the page content <dialog> Defines a dialog box or window <figcaption> Defines a caption for a <figure> element <figure> Defines self-contained content <footer> Defines a footer for a document or section <header> Defines a header for a document or section <main> Defines the main content of a document <mark> Defines marked/highlighted text <meter> Defines a scalar measurement within a known range (a gauge) <nav> Defines navigation links <progress> Represents the progress of a task <section> Defines a section in a document <summary> Defines a visible heading for a <details> element <time> Defines a date/time <wbr> Defines a possible line-break
- 33. New features in HTML 5 • Built-in audio and video support (without plugins) • Vector graphics and animation • Enhanced form controls and attributes • The Canvas (a way to draw directly on a web page) • Drag and Drop functionality • Support for CSS3 (the newer and more powerful version of CSS) • More advanced features for web developers, such as data storage and offline applications. 33
- 34. Advantages of HTML 5 1) Cleaner markup/ Improved code: enable web designers to use cleaner, neater code. We can remove div tags and replace them with semantic HTML5 elements. 2) Elegant forms: enables designer to use fancier forms. There will be different type of inputs, search and different fields for different purpose. 3) Consistency: As websites will adopt the new HTML5 elements for consistency. This will make it much easier for designers and developers to immediately understand how a web page is created. 4) Supports rich media elements: HTML5 has an inbuilt capability to play audio and video eliminating the plugin tags. 5) Offline Application Cache: HTML5 offers an offline application cache facility which will load the page the user has visited even if the user is temporarily offline. This feature will help the files to load much faster and reduces load on server 34
- 35. XHTML vs HTML5 XHTML HTML5 35 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> The DOCTYPE declaration It tells the browser which type and version of document to expect.
- 36. XHTML vs HTML5 XHTML HTML5 36 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> The DOCTYPE declaration It tells the browser which type and version of document to expect.
- 37. XHTML vs HTML5 XHTML HTML5 37 <head> section <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>My First XHTML Page</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head>
- 39. Add-Subtract Calculator (JavaScript & CSS): 39
- 41. A Simple Website using HTML5 41
- 42. A Simple Website using HTML5 42
- 43. A Simple Website using HTML5 43
- 44. A Simple Website using HTML5 44