HTML5 Essential Training
•Descargar como PPTX, PDF•
4 recomendaciones•2,146 vistas
HTML5 Essential Training | Software Engineering and Management Master Class at Varna Free University
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a HTML5 Essential Training
Similar a HTML5 Essential Training (20)
Último
Último (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