meganadha reddy k. webinar_net… · •html history –5 mins •tag, element, attribute –5 mins...
TRANSCRIPT
![Page 1: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/1.jpg)
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Meganadha Reddy K.Technical Trainer | NetCom Learning
www.NetComLearning.com
![Page 2: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/2.jpg)
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
![Page 3: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/3.jpg)
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/
![Page 4: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/4.jpg)
What is HTML
H- Hyper
T - Text
M - Markup
L - Language
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
![Page 5: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/5.jpg)
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/
![Page 6: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/6.jpg)
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/
![Page 7: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/7.jpg)
Will my browser support HTML5?
• We can check using: www.html5test.com
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
![Page 8: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/8.jpg)
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/
![Page 9: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/9.jpg)
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/
![Page 10: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/10.jpg)
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/
![Page 11: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/11.jpg)
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/
![Page 12: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/12.jpg)
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/
![Page 13: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/13.jpg)
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/
![Page 14: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/14.jpg)
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/
![Page 15: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/15.jpg)
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/
![Page 16: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/16.jpg)
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
Reference:
http://en.wikipedia.org/wiki/HTML5
Html5 – Big picture
![Page 17: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/17.jpg)
Q & A
?
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/
![Page 18: Meganadha Reddy K. Webinar_Net… · •HTML History –5 Mins •Tag, Element, Attribute –5 Mins •HTML5 –30 Mins](https://reader035.vdocument.in/reader035/viewer/2022080720/5f79de64762b9a7f78695a51/html5/thumbnails/18.jpg)
Thank you
© Meganadha Reddy K., 2015 http://www.netcomlearning.com/