Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    HTML 5

    Uploaded by

    dropbynet

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    HTML 5

    Uploaded by

    dropbynet
    7 views10 pages

    Original Title

    html 5

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    7 views10 pages

    HTML 5

    Uploaded by

    dropbynet

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 10

    HTML5 Basics: Tutorials and Examples

    Introduction

    HTML5 is the latest standard for HTML, providing new elements and APIs for building
    modern, interactive web applications. It offers improved support for multimedia,
    better semantic elements, and enhanced form controls.

    Basic HTML5 Structure

    A basic HTML5 document includes the <!DOCTYPE html> declaration and a few
    fundamental elements.

    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Basics</title>

    </head>

    <body>

    <h1>Hello, HTML5!</h1>

    <p>This is a basic HTML5 document.</p>

    </body>

    </html>

    Explanation:

    • <!DOCTYPE html>: Declares the document type and HTML version.

    • <html>: Root element of the HTML document.

    • <head>: Contains meta-information about the document, such as character set


    and viewport settings.
    • <body>: Contains the content of the document.

    New HTML5 Elements

    1. Semantic Elements

    HTML5 introduces semantic elements to improve the structure and readability of web
    pages.

    Examples:

    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Semantic Elements</title>

    </head>

    <body>

    <header>

    <h1>Welcome to My Website</h1>

    <nav>

    <ul>

    <li><a href="#home">Home</a></li>

    <li><a href="#about">About</a></li>

    <li><a href="#contact">Contact</a></li>

    </ul>

    </nav>

    </header>
    <main>

    <section id="home">

    <h2>Home</h2>

    <p>This is the home section.</p>

    </section>

    <section id="about">

    <h2>About</h2>

    <p>This is the about section.</p>

    </section>

    <section id="contact">

    <h2>Contact</h2>

    <p>This is the contact section.</p>

    </section>

    </main>

    <footer>

    <p>&copy; 2024 My Website</p>

    </footer>

    </body>

    </html>

    2. Form Enhancements

    HTML5 adds new input types and attributes for forms.

    Examples:
    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Forms</title>

    </head>

    <body>

    <h1>HTML5 Forms</h1>

    <form action="/submit" method="post">

    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required>

    <br>

    <label for="date">Date:</label>

    <input type="date" id="date" name="date">

    <br>

    <label for="number">Number:</label>

    <input type="number" id="number" name="number" min="1" max="10">

    <br>

    <label for="range">Range:</label>
    <input type="range" id="range" name="range" min="0" max="100">

    <br>

    <label for="color">Color:</label>

    <input type="color" id="color" name="color">

    <br>

    <input type="submit" value="Submit">

    </form>

    </body>

    </html>

    3. Multimedia Elements

    HTML5 provides native support for audio and video.

    Examples:

    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Multimedia</title>

    </head>

    <body>

    <h1>HTML5 Multimedia</h1>
    <h2>Audio</h2>

    <audio controls>

    <source src="audio.mp3" type="audio/mpeg">

    Your browser does not support the audio element.

    </audio>

    <h2>Video</h2>

    <video width="320" height="240" controls>

    <source src="video.mp4" type="video/mp4">

    Your browser does not support the video tag.

    </video>

    </body>

    </html>

    4. Canvas Element

    The <canvas> element allows for drawing graphics via JavaScript.

    Examples:

    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Canvas</title>

    </head>

    <body>
    <h1>HTML5 Canvas</h1>

    <canvas id="myCanvas" width="500" height="300" style="border:1px solid


    #000000;">

    Your browser does not support the canvas element.

    </canvas>

    <script>

    var canvas = document.getElementById('myCanvas');

    var ctx = canvas.getContext('2d');

    // Draw a rectangle

    ctx.fillStyle = '#FF0000';

    ctx.fillRect(10, 10, 150, 100);

    // Draw a circle

    ctx.beginPath();

    ctx.arc(240, 150, 50, 0, 2 * Math.PI);

    ctx.stroke();

    </script>

    </body>

    </html>

    5. Geolocation

    HTML5 allows web applications to access the user's location.

    Examples:

    html

    Copy code
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Geolocation</title>

    </head>

    <body>

    <h1>HTML5 Geolocation</h1>

    <button onclick="getLocation()">Get Location</button>

    <p id="result"></p>

    <script>

    function getLocation() {

    if (navigator.geolocation) {

    navigator.geolocation.getCurrentPosition(showPosition);

    } else {

    document.getElementById('result').innerHTML = "Geolocation is not supported by


    this browser.";

    function showPosition(position) {

    var latitude = position.coords.latitude;

    var longitude = position.coords.longitude;

    document.getElementById('result').innerHTML = "Latitude: " + latitude +


    "<br>Longitude: " + longitude;
    }

    </script>

    </body>

    </html>

    6. Local Storage

    HTML5 introduces local storage to save data on the client-side.

    Examples:

    html

    Copy code

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML5 Local Storage</title>

    </head>

    <body>

    <h1>HTML5 Local Storage</h1>

    <input type="text" id="dataInput" placeholder="Enter some text">

    <button onclick="saveData()">Save Data</button>

    <button onclick="loadData()">Load Data</button>

    <p id="storedData"></p>

    <script>

    function saveData() {

    var data = document.getElementById('dataInput').value;


    localStorage.setItem('myData', data);

    function loadData() {

    var data = localStorage.getItem('myData');

    document.getElementById('storedData').innerHTML = data ? data : 'No data found.';

    </script>

    </body>

    </html>

    You might also like