Scribd Logo
Importer

Bienvenue sur Scribd !

  • HTML 5

    Transféré par

    Mayur Kashyap
    4 vues7 pages
    html fpr practice

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    html fpr practice

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    4 vues7 pages

    HTML 5

    Transféré par

    Mayur Kashyap
    html fpr practice

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    HTML 5

     Page Structure in HTML 5:-


    <header>
    <nav>
    <article>
    <section>
    <footer>
     The <header> Element:-
    <header> is used inside the body tag
    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <header>

    <h1>

    Most important thing

    </h1>

    <h3>

    Less important thing

    </h3>

    </header>

    </body>

    </html>

     The <nav> Element:-


    Section of page that links to other pages or to certain sections within the pages.
    (“#” is used to create clickable texts)
    <!DOCTYPE html>

    <html>

    <head>

    <title></title>
    </head>

    <body>

    <nav>

    <ul>

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

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

    </ul>

    </nav>

    </body>

    </html>

     The <section> Element:-


    Sections can be used to divide up content within an article.
    <!DOCTYPE html>

    <html>

    <head>

    <title></title>

    </head>

    <body>

    <article>

    <h1>

    heading

    </h1>

    <section>

    <p>contents or image</p>

    </section>

    </article>

    </body>

    </html>

     The <aside> Element:-


    This type of content is often represented in sidebars. When an <aside> tag is used within an <article>
    tag, the contents of the <aside> should be specifically related to that article.
    <body>

    <article>
    <h1>

    heading

    </h1>

    <section>

    <p>contents or image</p>

    </section>

    <aside>

    <p>

    gifts will be delivered within 24 hours.

    </p>

    </aside>

    </article>

    </body>

     Audio on the Web


    The HTML 5 <audio> element specifies a standard for embedding audio in a webpage. The Audio and
    your webpage should be in same folder.
    <body>

    <audio src="01-ImmigrantSong.mp3" controls>

    Audio Element not supported by your browser.

    </audio>

    </body>

     Attributes of <audio>
    Controls
    Specifies that audio controls should be displayed.
    Autoplay
    Audio starts playing automatically.
    Loop
    Used to have the audio replay every time it is finished.
     Attributes of <Video>
    Controls
    Specifies that Video controls should be displayed.
    Autoplay
    Video starts playing automatically.
    Loop
    Used to have the video replay every time it is finished.
    <body>

    <video src="Maroon 5 - Sugar.mp4" controls>

    Audio Element not supported by your browser.

    </video>

    </body>

     Progress Bar:-
    This creates progress bar on the web. The progress element can be used within heading, paragraphs,
    or anywhere else in the body.
    Attributes of Progress element
    Value:- specifies how much task is completed.
    Max:- specifies how much work the task requires in total.
    <body>

    Status:<progress value="35" max="100">

    </progress>

    </body>

     HTML 5 Web Storage:-


    With this, websites can store data on a user’s local computer.
     Types of Web Storage Objects:-
    There are two web storage objects:
    -sessionstorage()
    -localstorage()
    -Session Storage is destroyed once the user close the browser.
    -Local Storage stores the data with no expiration date.
     Working with Values:-
    The data is stored as key/value pairs.(All syntaxs are in javascript)
    -Storing a value:
    localStorage.setItem(“key1”,”value”);

    -Getting a value:
    alert(localStorage,getItem(“key1”));

    -Removing a Value:
    localStorage.removeItem(“key1”);

    -Removing all Values:


    localStorage.clear();

     Using HTML Geolocation:-


    The Geolocation API’s main method is getCurrentPostion, which retrieves the current geographic location
    of the user’s device.(syntax in javascript)
    Navigator.geolocation.getCurrentPosition();
    -Parameters:
    showLocation(mandatory):Defines the callback method that retreives location
    infomation.
     Presenting Data:-
    User location can be presented in two ways:
    Geodetic and Civic
    1. The geodetic way to describe position refers directly to latitute and longitude.
    2. The civic representation of location data is presented in a format that is more easily read and
    understood by the average person.
     Drawing shapes:-
    SVG Stands for Scalable Vector Graphics, and used to draw shapes with HTML style markup.
     Inserting SVG Images:-
    <img src=”image.svg” alt=”” height=”300”>

     Drawing a Circle:-
    <svg width="1000" height="1000">

    <circle cx="80" cy="80" r="50" fill="green">

    </svg>

    -cx pushes center of the circle to right.


    -cy pushes the center of the circle down.
    -r defines the radius.
    -fill determines the color of the circle.
    -stroke adds an outline to the circle
     Shape Animations:-
    SVG animation can be created using <animate> element.
    <body>

    <svg width="1000" height="1000">

    <rect width="150" height="150" fill="blue">


    <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatcount="2">

    </rect>

    </body>

    -attributeName: specifies which attribute will be affected by the animation.


    -from: starting value of attribute.
    -to: ending value of attribute.
    -dur: how long the animation runs
    -fill: Specifies whether or not the attribute’s value should return to its initial value when the animation
    is finished(Values: “remove” resets the value,”freeze” keeps the “to value”)
    -repeatcount: Specifies the repeat count of the animation.
     HTML 5 Forms:-
    <form>

    <label>Your name</label>

    <input type="text" name="Username">

    </form>

    Placeholder:-
    <form>

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

    <input type="text" name="email" placeholder="email@example.com">

    </form>

    Autofocus:- This attribute makes the desired input focus when the form loads
     Forms with Required Fields:-
    <form autocomplete="off">

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

    <input type="text" name="email" placeholder="email@example.com" required>

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

    </form>

     Creating a Search Box:-


    <input id="mysearch" name="searchitem" type="search">

     Search Options:-
    <input id=”car” type=”text” list=”colors”>

    <datalist id=”colors”>

    <option value=”red”>

    <option value=”green”>
    <option value=”blue”>

    </datalist>

    Vous aimerez peut-être aussi