Download - HTML5
![Page 1: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/1.jpg)
HTML5By:Ahmed AbdElzaher
![Page 2: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/2.jpg)
Agenda
• HTML• HTML versions• HTML5• How Did HTML5 Get Started?• Rules For HTML5• HTML5 Less Header Code• No need for type attribute• More Semantic HTML Tags• Media Tags• Canvas• Web storage
![Page 3: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/3.jpg)
HTML
• Hyper Text Markup Language is the language for specifying the static content of Web pages.
• Hyper Text refers to the fact that Web pages are more than just text.
• can contain multimedia, provide links for jumping within & without.
![Page 4: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/4.jpg)
HTML
• Markup refers to the fact that it works by augmenting text with special symbols (tags) that identify structure and content type.
• There are many versions of HTML
![Page 5: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/5.jpg)
HTML Versions
• HTML 2.0 November 24, 1995 • HTML 3.2 January 1997
• HTML 4.0 December 1997
• HTML 4.0 April 1998 was reissued with minor edits without incrementing the version number.
![Page 6: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/6.jpg)
HTML Versions
• HTML 4.01 December 1999
• HTML5 January 2008 was published
![Page 7: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/7.jpg)
HTML5
• HTML5 will be the new standard for HTML, XHTML
• The previous version of HTML came in 1999. The web has changed a lot since then.
![Page 8: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/8.jpg)
HTML5
• HTML5 is still a work in progress.
• However, most modern browsers have some HTML5 support.
![Page 9: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/9.jpg)
How Did HTML5 Get Started?
• HTML5 is the cooperation between the
World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
![Page 10: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/10.jpg)
How Did HTML5 Get Started?
• WHATWG was working with web forms
and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML
![Page 11: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/11.jpg)
Rules For HTML5
• New features should be based on HTML,
CSS and JavaScript.
• Reduce the need for external plugins (like Flash)
![Page 12: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/12.jpg)
Rules For HTML5
• Better error handling.
• More markup to replace scripting.
• HTML5 should be device independent.
![Page 13: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/13.jpg)
HTML5
![Page 14: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/14.jpg)
Less Header Code
• With HTML5 <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>MSP</title> </head>
![Page 15: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/15.jpg)
Less Header Code
• Pre HTML5 <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>MSP</title> </head>
![Page 16: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/16.jpg)
No need for type attribute
• With HTML5
<script src=”MSP.js”></script>
<link href=”MSP.css”></link>
![Page 17: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/17.jpg)
No need for type attribute
• Pre HTML5
<script type=”text/javascript” src=”script.js”> </script>
<link type=”text/css” href=”style.css”></link>
![Page 18: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/18.jpg)
More Semantic HTML Tags
• Output <output name="result"></output>
Attributeso Name o For
![Page 19: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/19.jpg)
More Semantic HTML Tags
• progress<progress id="p" max=100><span>0</span>%</progress> Attributeso Valueo Max
![Page 20: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/20.jpg)
More Semantic HTML Tags
• Meter <meter min="0“ max="100“ value="75"></meter>• Attributeso Value o Maxo Min o Higho Low o Form
![Page 21: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/21.jpg)
More Semantic HTML Tags
• Details and Summary
The content of a <details> element should not be visible unless the open attribute is set.
User can show the content
![Page 22: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/22.jpg)
More Semantic HTML Tags
<details> <summary>coping 1999-2010</summary><p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p></details> Attributeso Open
![Page 23: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/23.jpg)
More Semantic HTML Tags
• Address• The <address> tag defines the contact
information for the author/owner of a document or an article.
• If the <address> element is inside the <body> element, it represents contact information for the document.
![Page 24: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/24.jpg)
More Semantic HTML Tags
• Address• If the <address> element is inside an
<article> element, it represents contact information for that article.
• The text in the <address> element usually renders in italic. Most browsers will add a line break before and after the address element.
![Page 25: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/25.jpg)
More Semantic HTML Tags
• Ex :<address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br /> Visit us at:<br /> Example.com<br /> Box 564, Disneyland<br /> USA</address>
![Page 26: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/26.jpg)
More Semantic HTML Tags
• Figure<figure><img src=“MSP.jpg" alt=“MSP"><figcaption>Microsoft student partner</figcaption></figure>
![Page 27: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/27.jpg)
More Semantic HTML Tags
• Hgroup<!DOCTYPE html><html><body><hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2></hgroup></body></html>
![Page 28: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/28.jpg)
More Semantic HTML Tags
• Article
Examples of possible articles:forum postnewspaper articleblog entryuser comment
![Page 29: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/29.jpg)
More Semantic HTML Tags
• Section
• The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.
![Page 30: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/30.jpg)
More Semantic HTML Tags• <article>• <hgroup>• <h1>Mobile Phones</h1>• <h2>Different Smart Phones</h2>• </hgroup>• <p>Some of the more popular mobile smart phones</p>• <section>• <h1>Apple iPhone</h1>• <p>A popular smart phone from Apple.</p>• </section>• <section>• <h1>Android-based Phones</h1>• <p>A series of smart phones that use the Google Android operating
system.</p>• </section>• </article>
![Page 31: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/31.jpg)
More Semantic HTML Tags
• There are a lot of new tags at HTML5 which we used them a lot.
![Page 32: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/32.jpg)
Media Tags
• Video
• Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins.
• HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page
![Page 33: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/33.jpg)
Media Tags
• <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag.</video>
• The control attribute adds video controls, like play, pause, and volume.
![Page 34: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/34.jpg)
Media Tags
Browser MP4 WebM OggInternet Explorer 9
YES NO NO
Firefox 4.0 NO YES YESGoogle Chrome 6
YES YES YES
Apple Safari 5 YES NO NOOpera 10.6 NO YES YES
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
•MP4 = MPEG 4 files with H264 video codec and AAC audio codec•WebM = WebM files with VP8 video codec and Vorbis audio codec•Ogg = Ogg files with Theora video codec and Vorbis audio codec
![Page 35: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/35.jpg)
Media Tags
• Video/Dom• The HTML5 <video> element also has
methods, properties, and events.
• There are methods for playing, pausing, and loading, for example. There are properties (e.g. duration, volume, seeking) that you can read or set. There are also DOM events that can notify you, for example, when the <video> element begins to play, is paused, is ended, etc
![Page 36: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/36.jpg)
Media TagsMethods Properties Eventsplay() currentSrc playpause() currentTime pauseload() videoWidth progresscanPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width
![Page 37: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/37.jpg)
Media Tags
• There is an Example for video/Dom
![Page 38: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/38.jpg)
Media Tags
• Audio
• Today, most audio files are played through a plug-in (like flash). However, different browsers may have different plug-ins.
• HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element
![Page 39: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/39.jpg)
Media Tags
• <audio controls="controls">• <source src="song.ogg" type="audio/ogg" />• <source src="song.mp3" type="audio/mpeg" />• Your browser does not support the audio element.• </audio>
• The control attribute adds audio controls, like play, pause, and volume.
![Page 40: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/40.jpg)
Media Tags
Browser MP3 Wav OggInternet Explorer 9
YES NO NO
Firefox 4.0 NO YES YESGoogle Chrome 6
YES YES YES
Apple Safari 5 YES YES NOOpera 10.6 NO YES YES
Currently, there are 3 supported file formats for
the <audio> element: MP3, Wav, and Ogg:
![Page 41: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/41.jpg)
Canvas
• What is Canvas?
• The HTML5 canvas element uses JavaScript to draw graphics on a web page.
![Page 42: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/42.jpg)
Canvas
• A canvas is a rectangular area, and you control every pixel of it.
• The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.
![Page 43: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/43.jpg)
Canvas
• Create a Canvas Element
• <canvas id="myCanvas" width="200" height="100"></canvas>
![Page 44: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/44.jpg)
Canvas
• Draw With JavaScript
• <script type="text/javascript">var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
![Page 45: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/45.jpg)
Web Storage
• HTML5 offers two new objects for storing data on the client:
localStorage - stores data with no time limit
sessionStorage - stores data for one session
![Page 46: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/46.jpg)
Web Storage
• Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.
![Page 47: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/47.jpg)
Web Storage
• In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website's performance.
![Page 48: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/48.jpg)
Web Storage
• The data is stored in different areas for different websites, and a website can only access data stored by itself.
• HTML5 uses JavaScript to store and access the data
![Page 49: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/49.jpg)
The localStorage Object
• The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.
![Page 50: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/50.jpg)
The localStorage Object
• How to create and access a localStorage:
<script type="text/javascript">localStorage.lastname="Smith";document.write("Last name: " + localStorage.lastname);</script></body>
![Page 51: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/51.jpg)
The sessionStorage Object
• The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.
![Page 52: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/52.jpg)
The sessionStorage Object
• How to create and access a sessionStorage:
<script type="text/javascript">sessionStorage.lastname="Smith";document.write(sessionStorage.lastname);</script>
![Page 53: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/53.jpg)
Review
• HTML• HTML5• How Did HTML5 Get Started?• Rules For HTML5• HTML5 Less Header Code• No need for type attribute• More Semantic HTML Tags• Media Tags• Canvas• Web storage
![Page 54: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/54.jpg)
Questions?Questions?
Questions?
![Page 55: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/55.jpg)
My contact
![Page 56: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/56.jpg)
Thank you
Ahmed Abdelzaher
![Page 57: HTML5](https://reader035.vdocument.in/reader035/viewer/2022062703/554f8cdab4c905435d8b4e4c/html5/thumbnails/57.jpg)