HTML5 Essential Training
•Download as PPTX, PDF•
4 likes•2,146 views
HTML5 Essential Training | Software Engineering and Management Master Class at Varna Free University
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5 Essential Training
Similar to HTML5 Essential Training (20)
Recently uploaded
Recently uploaded (20)
HTML5 Essential Training
- 2. HTML5 | Agenda Front-end Technologies HTML Basics & Evolution Terminology: Tags, Attributes and Elements Basic Document Structure Common Elements Live Demo Section Elements <div> Usage Live Demo HTML5 Semantic Elements Beyond Basics Useful Resources Time for Questions
- 3. HTML5 | Front-end Front-end Technologies General Overview.
- 4. HTML5 | Basics. .html or .htm extention HTML files can be created with text editors: Notepad++, Sublime, Komodo… HTML editors (WYSIWYG Editors): Adobe Dreamweaver, WebPage Maker...
- 5. HTML5 | Evolution. 1991 – HTML first mentioned, Tim Berners-Lee – HTML tags 1993 – HTML (first public version, published at IETF) 1995 – HTML 2 – W3C 1997 – HTML 3.2 – “Wilbur” 1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final) 2001 – XHTML (final) 2008 – HTML5 / XHTML5 draft 2011 – feature complete HTML5 2022 – HTML5 – final specification
- 6. HTML5 | Terminology. Tags: Opening tag and closing tag <p>, </p>, <div>, </div> Attributes: Properties of the tag <img src="myPic.jpg" width="300" height="300" /> Elements: Combination of opening, closing tag and attributes <p class="myClass">This is my first paragraph</p>
- 7. HTML5 | Common Attributes. common: id, class, name, style specific: src, href, target
- 8. HTML5 | Document Structure.
- 9. HTML5 | Meta Tags <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <meta name="description" content="Webpage Short Description" /> <meta name="keywords" content="my, webpage, keywords" /> <meta name="author" content="Kaloyan Kosev" /> </head>
- 10. HTML5 | Link Tags <head> <link rel="author" href="https://plus.google.com/110428200924089786332" /> <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
- 11. HTML5 | Common Elements Live Demo.
- 12. HTML5 | Section Elements <div> - creates logical divisions within a page. Example: <div> <p>Some small text here.</p> <p>Something <strong>else.</strong></p> </div>
- 13. HTML5 | <div> Usage Live Demo.
- 14. HTML5 | Generic Page
- 15. HTML5 | Using HTML4 <html> <head> … </head> <body> <div id="header"> … </div> <div id="navigation"> … </div> <div id="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div> </body> </html>
- 16. HTML5 | Using HTML5 <html> <head> … </head> <body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer> </body> </html>
- 17. HTML5 | Semantic Elements.
- 18. HTML5 | Beyond Basics <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> </video> <audio controls> <source src= "sound.ogg" type="audio/ogg"> <source src=“sound.mp3" type="audio/mpeg"> </audio>
- 19. HTML5 | Beyond Basics Additional topics, related to HTML5 and other technologies: <canvas> Local Storage Data Attributes Geolocation
- 20. HTML5 | Useful Resources HTML Validator: http://validator.w3.org/ World Wide Web Consortium: http://www.w3.org/ Drive Into HTML5: http://diveintohtml5.info/ 28 HTML5 Features, Tips, and Techniques you Must Know: http://net.tutsplus.com/tutorials/html-csstechniques/25-html5-features-tips-and-techniquesyou-must-know/
- 23. Output + Feedback Facebook Group: Software Engineering and Management - Master Class http://www.facebook.com/groups/1425392611009770/ Homework: Code the HTML layout of your wireframes