HTML5
Essential Training.
HTML5 | Agenda












Front-end Technologies
HTML Basics & Evolution
Terminology: Tags, Attributes and Ele...
HTML5 | Front-end
Front-end Technologies
General Overview.
HTML5 | Basics.
.html or .htm extention
 HTML files can be created with text
editors:
Notepad++, Sublime, Komodo…
 HTML ...
HTML5 | Evolution.
1991 – HTML first mentioned,
Tim Berners-Lee – HTML tags
1993 – HTML (first public version, published a...
HTML5 | Terminology.
Tags: Opening tag and closing tag
<p>, </p>, <div>, </div>
Attributes: Properties of the tag
<img src...
HTML5 | Common Attributes.

 common: id, class, name, style
 specific: src, href, target
HTML5 | Document Structure.
HTML5 | Meta Tags
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />

<meta name="descr...
HTML5 | Link Tags
<head>
<link rel="author"
href="https://plus.google.com/110428200924089786332" />
<link rel="shortcut ic...
HTML5 | Common Elements

Live Demo.
HTML5 | Section Elements

<div> - creates logical divisions within a page.
Example:
<div>
<p>Some small text here.</p>
<p>...
HTML5 | <div> Usage

Live Demo.
HTML5 | Generic Page
HTML5 | Using HTML4
<html>
<head> … </head>
<body>
<div id="header"> … </div>
<div id="navigation"> … </div>
<div id="side...
HTML5 | Using HTML5
<html>
<head> … </head>
<body>
<header> … </header>
<nav> … </nav>
<aside> … </aside>
<section> … </se...
HTML5 | Semantic Elements.
HTML5 | Beyond Basics
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="mov...
HTML5 | Beyond Basics
Additional topics, related to HTML5 and
other technologies:





<canvas>
Local Storage
Data Att...
HTML5 | Useful Resources
HTML Validator: http://validator.w3.org/
World Wide Web Consortium: http://www.w3.org/
Drive Into...
Kaloyan Kosev,
Web Developer
superkalo@devlabs.bg
LinkedIn/superKalo
Facebook/superKalo
HTML5

Time for Questions.
Output + Feedback
Facebook Group:
Software Engineering and
Management - Master Class
http://www.facebook.com/groups/142539...
Upcoming SlideShare
Loading in …5
×

HTML5 Essential Training

1,423 views

Published on

HTML5 Essential Training | Software Engineering and Management Master Class at Varna Free University

Published in: Education, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,423
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 Essential Training

  1. 1. HTML5 Essential Training.
  2. 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. 3. HTML5 | Front-end Front-end Technologies General Overview.
  4. 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. 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. 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. 7. HTML5 | Common Attributes.  common: id, class, name, style  specific: src, href, target
  8. 8. HTML5 | Document Structure.
  9. 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. 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. 11. HTML5 | Common Elements Live Demo.
  12. 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. 13. HTML5 | <div> Usage Live Demo.
  14. 14. HTML5 | Generic Page
  15. 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. 16. HTML5 | Using HTML5 <html> <head> … </head> <body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer> </body> </html>
  17. 17. HTML5 | Semantic Elements.
  18. 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. 19. HTML5 | Beyond Basics Additional topics, related to HTML5 and other technologies:     <canvas> Local Storage Data Attributes Geolocation
  20. 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/
  21. 21. Kaloyan Kosev, Web Developer superkalo@devlabs.bg LinkedIn/superKalo Facebook/superKalo
  22. 22. HTML5 Time for Questions.
  23. 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

×