Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Demo ISYS 350.

Similar presentations


Presentation on theme: "HTML5 Demo ISYS 350."— Presentation transcript:

1 HTML5 Demo ISYS 350

2 HTML 5

3 New INPUT types http://www. w3schools. com/html/html_form_input_types
INPUT type="number" INPUT type="range” Other types: , url, tel, etc Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3">

4 'required' attribute Example:
Your Name: <input type="text" name="name" required>

5 ‘placeholder’ Attribute
Placeholder attribute which lets us display a prompt or instructions inside the field. Example: Address: <input type=" " name=" " required placeholder="Enter a valid address">

6 HTML 5 Form Demo <form>
Your Name: <input type="text" name="name" required><br> Address: <input type=" " name=" " required placeholder="Enter a valid address"><br> Website: <input type="url" name="website" required pattern="https?://.+"><br> Age: <input type="number" size="6" name="age" min="18" max="99" value="21"><br> Satisfaction: <input type="range" size="2" name="satisfaction" min="1" max="5" value="3"><br><br> <input type="submit" value="Submit" name="btnSubmit" /> </form>

7 HTML 5 Form fieldset https://24ways
Like a GroupBox Try It Yourself

8 HTML5 Multimedia: Video,Audio,Youtube,Etc. http://www. w3schools

9 Adding New Elements to HTML http://www. w3schools
<head> <title>Creating an HTML Element</title> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style> </head> <body> <myHero>My First Hero</myHero> </body>

10 HTML5 Geolocation Demo: http://www. w3schools
The navigator.geolocation.getCurrentPosition() method returns an object with latitude, longitude and other properties. Latitude Logitude Static map

11 HTML5 Geolocation Demo <script> var x; function getLocation() {
x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; </script> </head> <body> <p>Click the button to get your coordinates.</p> <button onclick="getLocation()">Try It</button> <p id="demo"></p>

12 Displaying the Result in a Map Demo: https://www. w3schools

13 Google Maps https://www.w3schools.com/graphics/google_maps_intro.asp
Maps basic Maps overlays


Download ppt "HTML5 Demo ISYS 350."

Similar presentations


Ads by Google