html5 essential training
DESCRIPTION
HTML5 Essential Training | Software Engineering and Management Master Class at Varna Free UniversityTRANSCRIPT
Essential Training.HTML5
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
HTML5 | Front-end
Front-end TechnologiesGeneral Overview.
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...
HTML5 | Evolution.
1991 – HTML first mentioned,Tim Berners-Lee – HTML tags
1993 – HTML (first public version, published at IETF)1995 – HTML 2 – W3C1997 – HTML 3.2 – “Wilbur”1997 – HTML 4 – ”Cougar” – CSS 1999 – HTML 4.01 (final)2001 – XHTML (final)2008 – HTML5 / XHTML5 draft2011 – feature complete HTML52022 – HTML5 – final specification
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>
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="description" content="Webpage Short Description" />
<meta name="keywords" content="my, webpage, keywords" />
<meta name="author" content="Kaloyan Kosev" /></head>
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>
HTML5 | Common Elements
Live Demo.
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>
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="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div>
</body></html>
HTML5 | Using HTML5
<html><head> … </head><body>
<header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer>
</body></html>
HTML5 | Semantic Elements.
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>
HTML5 | Beyond Basics
Additional topics, related to HTML5 and other technologies:
<canvas> Local Storage Data Attributes Geolocation
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-css-techniques/25-html5-features-tips-and-techniques-you-must-know/
Time for Questions.HTML5
Facebook Group:Software Engineering andManagement - Master Class
http://www.facebook.com/groups/1425392611009770/
Homework: Code the HTML layout of your wireframes
Output + Feedback