Html5 Basic Structure
Download as PPTX, PDF•1 like•2,924 views
HTML5 is a markup language used to structure web page content. It introduces new elements such as <header>, <nav>, <video>, <audio>, and <canvas>. The document discusses these new elements and how to use them to add things like navigation menus, videos, images, and forms to a web page. It also covers how to add CSS styling to format the page layout and appearance. Developers can validate their HTML5 code using the W3C validation service to check for errors.
Html5 Basic Structure
- 2. HTML5 is a markup language for structuring and presenting content for the World Wide Web. NEW MARK UPs JAVA SCRIPT API’s HTML 5
- 3. hgroup RT Aside Section Canvas Header Time Command Mark Details Nav Summary Ruby Article Footer Audio Datalist Keygen Source Meter Output Fig caption ProgressVideo Embed
- 4. Main contents of the article or Primary contents. It contains the primary Information of the WEB PAGE. In your page there must be one article, it shows the reader the basic information about the page. It is the Main content of the page. Article ARTICLE
- 5. It contain the little bit information about something, may be it’s your product, page, Blog info. , Person info. , etc. Mostly use see it into a magazines. Aside Aside
- 6. The Audio and Video support in the Browser. The Source Tag is use to show the path of your Audio and video file. Audio and Video Audio Source Video Source
- 7. Use to embed the Third Party Object like Flash Player, Silverlight Player. Embed Embed
- 8. Work Side By Side. We can attach a figure in any image format (.jpeg, .png, .bmp) by the use of the source. We can also put the little bit info about the image. Figure and Fig caption Figure Figcaption Source
- 9. It basically Contain the Information of the Copy write information (©), and the upper and lower links, Branding taglines, Sponsors, ..etc. In every standard webpage there is a header and footer. Header and Footer Footer Header
- 10. Keygen Contain the Cryptography information to the webpage and back to the server. Canvas is the powerful tool use to put the SAVE button and all such things. Button coding is done in XAML. Canvas and Keygen Canvas
- 11. It shows the date and time into your webpage. It’ll show the time spend by the user, or the last date and time when webpage get updated. Time and Date Time and Date
- 12. Server 2d Context XML HTTP Request Level2 Messaging Geolocation Server Events HTML Micro data Selection Contacts Indexed Database Web Workers Forms Offline Apps Web Storage Web Sockets Media CaptureAPI’s Web SQL DB
- 13. Contact : You can directly attach your gmail, facebook, linkedin, slideshare contacts into your Browser. Selection : It Support the CSS and JQuery selection. Offline Apps : You can Mark some items which is used in offline mode by user. Indexed Database : It is a local database into you webpage. Web SQL DB : It works as the local database into your Browser. Web Workers : Helps to calculate major calculations parallel with you browser or in the background. API’s Details
- 14. Messaging : Use to communicate the web workers with the Browser Web Storage : a) Session storage : page to page b) Local Storage --> Cookies (client to server). Web Socket : Instant messaging (IM). Ajax : XML HTTPrequest Level2 : Cross domain request. Forms : Use to add datatype Like email. API’s Details (cont..)
- 15. Some startup Tags <!doctype html> <Head> <titile> XYZ </titlte> </Head> </body> <other tags> ABC </other tags> <other tags > ABC</other tags> <other tags >ABC</other tags> </Body> </html>
- 16. Working With HTML5… The basic HELLO World Web Page….
- 17. Framing Click on the click me button, there we find the notepad file having some written text…. Now we have to modify that note file into some good looking webpage.. <meta charset="utf-8"> <hgroup> <h1>abc</h1> <h2>abc</h2> <p> xyz <br> </p> <b><u>ABC</u></b> </hgroup>
- 18. Ordered and Unordered List <nav> <ol> <li> <a href”ABC”> XYZ</a></li> <li> <a href”ABC”> XYZ</a></li> </ol> <ul> <li> <a href”ABC”> XYZ</a></li> <li> <a href”ABC”> XYZ</a></li> </ul> </nav>
- 19. Add a Image and Caption <figure> <img src=“XYZ” alt=“ABC”> <figcaption>DETAIL OF THE GIVEN IMAGE </figcaption> </figure>
- 20. Header And Footer <footer> <small>Copyright © 2012-2014</small> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </footer>
- 21. What is CSS3 ? (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. (CSS) is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
- 22. How to Attach the CSS file. Link rel :- It represent that you like to relate your page with some other page, through which enhance the styling of your Page. Type :- It represent the format of the file. Href :- Source File of the file having the extension (.css). Media :- It is the tag which represent the output of the page. First we have to write a code before ending the head tag. <head> <link rel="stylesheet" type="text/css" href="styles.css" media="screen"> </head>
- 25. How To Validate your HTML5 Code. In place of Address, Choose TEXT FIEDL. Copy your main page Code there. And Click VALIDATE Note :- Your Device (PC, Laptop, other) must connected to internet network.
- 26. To Know More… 1.Channel 9 2.W3 School 3.W3Org 4.Tutorial Point 5.Html Goodies https://twitter.com/Niketch786 https://www.facebook.com/niket786 www.slideshare.net/niket7861 http://niket786.webs.com http://innovtechno.blogspot.com E-Mail :- [email protected]