Embed Size (px)
Citation preview
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Meganadha Reddy K.Technical Trainer | NetCom Learning
www.NetComLearning.com
Agenda
• Introduction to Internet – 5 Mins
• What is HTML – 10 Mins
• HTML History – 5 Mins
• Tag, Element, Attribute – 5 Mins
• HTML5 – 30 Mins
• Q&A – 5 Mins
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
This is L100 Webinar on HTML5
Introduction to Internet
• Internet : International Network of networks
Points to Note:
All computers in internet will have unique IP Address
Each domain name (eg.: google.com, yahoo.com etc.,
will be associated with an IP Address.
When user enters any URL., the request goes to the server
based on its IP Address and response comes back to user.
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
What is HTML
H- Hyper
T - Text
M - Markup
L - Language
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
How web applications work?
Application
Server
Database
HTML, CSS etc., for UI
Java / C# / VB or any programming
language for Business Logic
Oracle / SQL Server etc.,
for Database
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML History
HTML
HTML2
HTML4
HTML5
1991
1994
1997
2009
HTML Creator.. Guess the name?
developed by
W3C Consortium
www.w3.org
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Will my browser support HTML5?
• We can check using: www.html5test.com
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – New Tags (1 of 3)
• Lot of new Tags were introduced in HTML5
• Examples:
<input type=date>
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – New Tags (2 of 3)
• Lot of new Tags were introduced in HTML5
• Examples:
<input id="email" name="email" type="email" />
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – New Tags (3 of 3)
• Lot of new Tags were introduced in HTML5
• Examples:
<input type="range" value="20" min="0" max="100" step="20" id="megRange" />
<progress value="35" max="100"></progress>
<input type="text" id="myName" name="myName" value="Name Here" required>
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – Video Support
• You might no longer need below as browser plugins:
Thanks to HTML5 Video Support
<h1>HTML5-Video Example</h1>
<video width="390" id="clip" controls="">
<source src="chrome_japan.webm" type="video/webm;">
</video>
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – Content editable
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> 1.00 PM : Take HTML5 Demo with NetComLearning </li>
<li> 2.15 PM : Attend team meeting in office
<li> 3.30 PM : Take technical interview </li>
</ul>
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – SVG Example
<html>
<svg>
<circle id="myCircle" class="important" cx="50%" cy="50%" r="50" fill="red"
onmousedown="alert('hello');"/>
</svg>
</html>
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
HTML5 – Canvas Example
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Reference:
w3schools
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
localStorage and sessionStorage
localStorage.hits = 1; sessionStorage.hitcount = 1
Value will persist even if we close and open
the browser
Value will be initialized every time when we
start new session.
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Reference:
http://en.wikipedia.org/wiki/HTML5
Html5 – Big picture
Q & A
?
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Thank you
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
