HTML5 Lectures;
Java Spring MVC Framework with AngularJS by Google and HTML5
Learn how to develop commercial web applications using Java Spring MVC Framework 4 wtih AngularJS by Google and HTML5
https://www.udemy.com/java-spring-mvc-framework-with-angularjs-by-google-and-html5/
Understand the usage of new HTML5 tags for arranging the structure (template) of a HTML page such as using <header />, <main />, <nav />, <section />, <article />, <aside /> and <footer />
Learn new <input /> attributes and types such as autofocus, required, placeholder, email, datetime, pattern (Regular Expressions), number, min and max and datalist
Integrating audio and video contents to HTML5 pages
Learn how to use HTML5 LocalStorage and SessionStorage API in order to store data in browsers
Debug and test HTML5 applications using Google Developer Tools.
2. Enroll now to my udemy course
Tuna Tore
https://www.udemy.com/java-spring-mvc-framework-with-angularjs-by-google-and-html5/
3.
There are new tags for the structure of
HTML5 documents
New type attributes for HTML5 tags
New validation attributes and regular
expressions for HTML5 tags
Browser storage (local and session)
Audio and Video support
Tuna Tore
HTML5 New Features
4. ●
New <!DOCTYPE> declaration
Lets the browser knows how to render
response (<!DOCTYPE html> means HTML5)
OLD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
NEW
<!DOCTYPE html>
Tuna Tore
HTML5 New Features
5. ●
Default type for script tag is text/javascript
<script src="${jqueryjs}" ></script>
●
No need to define type for link tag is
text/css
<link href="${bootstrap}" rel="stylesheet" />
Tuna Tore
HTML5 New Features
7. ●
New structural elements for page
layout(eliminates <div> tags) such as;
<header>
<main>
<nav>
<section>
<article>
<aside>
<footer>
Tuna Tore
HTML5 New Features, Tags and Attributes
8. ●
Audio
<audio controls>
<source src="/audio/testaudio.m4a" type="audio/mp4">
</audio>
●
Video
<video width="640px" height="450px">
<source src="/video/testvideo.mp4" type="video/mp4">
</video>
Tuna Tore
HTML5 Audio and Video Content Support
9. § You can edit HTML content with new feature
<article>
<h1>Editable Content</h1> <div
id="editHere" contenteditable="true">You can
edit this text</div>
</article>
Tuna Tore
HTML5 Editable Content
10. § Using pattern in input elements
<input name="phone"
pattern="[(][0-9]{3}[)][0-9]{7}"
title="(123)4567890"
style="width: 250px"/>
Tuna Tore
HTML5 Regular Expressions
11. § Using pattern in input elements
<input name="phone"
pattern="[(][0-9]{3}[)][0-9]{7}"
title="(123)4567890"
style="width: 250px"/>
* match the previous element zero or more time
+ match the previous element one or more time
? match the previous element zero or one time
[A-Z] range
[charactergroup]
{exact match}
pattern="[s][a-z]{4}[g]"
Tuna Tore
HTML5 Regular Expressions
14. § localStorage object can be accessed via JavaScript
data written into localStorage will be stay there even if
the users close browsers
§ sessionStorage object is used to store data during browser
session and the data will be removed if the users close
browser
examples;
localStorage.setItem('username','springweb');
localStorage.getItem('username');
Tuna Tore
HTML5 The usage of LocalStorage API
15. Enroll now to my udemy course
Tuna Tore
https://www.udemy.com/java-spring-mvc-framework-with-angularjs-by-google-and-html5/