Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 Basic Structure


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html5 Basic Structure

  1. 1. HTML5 is a markup language for structuring andpresenting content for the World Wide Web.NEW MARKUPsJAVA SCRIPTAPI’s HTML 5
  2. 2. hgroupRT AsideSection CanvasHeaderTimeCommand MarkDetails NavSummaryRubyArticle FooterAudioDatalistKeygen SourceMeterOutputFigcaptionProgressVideo Embed
  3. 3. Main contents of the article orPrimary contents.It contains the primaryInformation of the WEB PAGE.In your page there must be onearticle, it shows the reader thebasic information about the page.It is the Main content of the page.ArticleARTICLE
  4. 4. It contain the little bitinformation aboutsomething, may be it’s yourproduct, page, Blog info. ,Person info. , etc.Mostly use see it into amagazines.AsideAside
  5. 5. The Audio and Videosupport in the Browser.The Source Tag is use toshow the path of your Audioand video file.Audio and VideoAudioSourceVideoSource
  6. 6. Use to embed the ThirdParty Object like FlashPlayer, SilverlightPlayer.EmbedEmbed
  7. 7. Work Side By Side.We can attach a figure inany image format (.jpeg,.png, .bmp) by the use ofthe source.We can also put the littlebit info about the image.Figure and Fig captionFigureFigcaptionSource
  8. 8. It basically Contain theInformation of the Copywrite information (©), andthe upper and lower links,Branding taglines,Sponsors, ..etc.In every standard webpagethere is a header andfooter.Header and FooterFooterHeader
  9. 9. Keygen Contain theCryptography information tothe webpage and back to theserver.Canvas is the powerful tool useto put the SAVE button and allsuch things.Button coding is done in XAML.Canvas and KeygenCanvas
  10. 10. It shows the date andtime into yourwebpage.It’ll show the timespend by the user, orthe last date and timewhen webpage getupdated.Time and DateTime and Date
  11. 11. Server 2dContextXML HTTPRequest Level2MessagingGeolocationServer EventsHTML MicrodataSelectionContactsIndexedDatabaseWebWorkersFormsOfflineAppsWebStorageWebSocketsMedia CaptureAPI’s Web SQL DB
  12. 12. 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 offlinemode 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 withyou browser or in the background.API’s Details
  13. 13. Messaging : Use to communicate the web workers with theBrowserWeb Storage : a) Session storage : page to pageb) 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..)
  14. 14. 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>
  15. 15. Working With HTML5…The basic HELLO World Web Page….
  16. 16. FramingClick on the click mebutton, there we findthe notepad file havingsome written text….Now we have to modifythat note file into somegood looking webpage..<meta charset="utf-8"><hgroup><h1>abc</h1><h2>abc</h2><p> xyz <br> </p><b><u>ABC</u></b></hgroup>
  17. 17. 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>
  18. 18. Add a Image and Caption<figure><img src=“XYZ” alt=“ABC”><figcaption>DETAIL OF THE GIVENIMAGE</figcaption></figure>
  19. 19. 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>
  20. 20. What is CSS3 ?(CSS) is a style sheet language used for describingthe presentation semantics (the look and formatting)of a document written in a markup language.(CSS) is designed primarily to enable the separationof document content (written in HTML or a similarmarkup language) from document presentation,including elements such as the layout, colors, andfonts.
  21. 21. How to Attach the CSS file.Link rel :- It represent that you like to relate your page with someother 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>
  22. 22. Working with..BodyH1H2HgroupPSectionImageAsideNavFooterfont-familyfont-size:width:background-color:Color:margin-right:margin-leftpaddingOverflowFloat:Height:BorderShadow:
  23. 23. How To Validate your HTML5Code.In place of Address,Choose TEXT FIEDL.Copy your main pageCode there.And Click VALIDATENote :- Your Device (PC, Laptop, other) must connected to internet network.
  24. 24. To Know More…1.Channel 92.W3 School3.W3Org4.Tutorial Point5.Html Goodies :-