Scribd Logo
Upload

Welcome to Scribd!

  • CL 10 - Part2

    Uploaded by

    Vijani Rajapathirana
    9 views29 pages

    Original Title

    cl 10- part2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views29 pages

    CL 10 - Part2

    Uploaded by

    Vijani Rajapathirana

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 29

    C.L 10.

    HTML 5

    Anuradha Dissanyake
    MSc (IT), BSc (IT), SCJP, MIEE
    Learning Outcomes
    HTML5 new semantic /structural elements
    Audio/ Video
    Forms
    Get/ Post
    HTML5 new semantic /structural elements
    • <section> − This tag defines a section in a document. A section is a thematic grouping of
    content, typically with a headings.
    • <article> − This tag represents an independent piece of content of a document, such as a
    forum post, blog entry or newspaper article.
    • <aside> − This tag represents a piece of content that is only slightly related to the rest of
    the page. This defines some content aside from the content it is placed in (like a sidebar)
    • <header> − This tag represents the header of a section/ article.
    • <footer> − This tag represents a footer for a section and can contain information about
    the author, copyright information, links to terms of use, etc
    • <nav> − This tag represents a section of the document intended for navigation.
    • <dialog> − This tag can be used to mark up a conversation.
    • <figcaption> - The purpose of a figure caption is to add a visual explanation to an image.
    • <figure> − This tag can be used to associate a caption together with some embedded
    content, such as a graphic or video.
    • nav
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/php/">PHP</a>
    </nav>

    • figure and figcaption


    <figure>
    <img src="pic.jpg" width=25% height=25%>
    <figcaption> Fig1. – comlab </figcaption>
    < /figure>
    <!DOCTYPE html>
    <html>
    <body>
    <header>...</header>
    <nav>...</nav>
    <article>
    <section> ... </section>
    </article>
    <aside>...</aside>
    <footer>...</footer>
    </body>
    </html>
    Embedding Audio and Video

    • The HTML5 <audio> and <video> tags make it simple to add media to a
    website.
    • The <source> element allows you to specify media along with media type and
    many other attributes.
    • Set src attribute to identify the media source and include a controls attribute
    to add play, pause and volume buttons to the media.
    Video with single source

    <video src = "foo.mp4" width = "300" height = "200" controls>


    Your browser does not support the video element.
    </video>

    • Video format
    mp4, WebM, Ogg
    Video element with multiple source

    <!DOCTYPE HTML>
    <html>
    <body>
    <video width = "300" height = "200" controls autoplay>
    <source src = "/html5/foo.ogg" type ="video/ogg" />
    <source src = "/html5/foo.mp4" type = "video/mp4" />
    Your browser does not support the video element.
    </video>
    </body>
    </html>
    Attribute & Description
    This Boolean attribute if specified, the video will automatically begin to play
    autoplay
    back as soon as it can do so without stopping to finish loading the data.
    controls If this attribute is present, it will allow the user to control video playback,
    including volume, seeking, and pause/resume playback.
    height This attribute specifies the height of the video's display area, in CSS pixels.
    loop This Boolean attribute if specified, will allow video automatically seek back to
    the start after reaching at the end.
    preload This attribute specifies that the video will be loaded at page load, and ready to
    run. Ignored if autoplay is present.
    src The URL of the video to embed. This is optional; instead, use the <source>
    element within the video block to specify the video to embed.
    width
    This attribute specifies the width of the video's display area, in CSS pixels.
    Audio
    <audio src = "foo.wav" controls autoplay>
    Your browser does not support the audio element.
    </audio>

    most commonly used audio formats are ogg, mp3 and wav.
    <!DOCTYPE HTML>
    <html>
    <body>
    <audio controls autoplay>
    <source src = "/html5/audio.ogg" type = "audio/ogg" />
    <source src = "/html5/audio.wav" type = "audio/wav" />
    Your browser does not support the audio element.
    </audio>
    </body>
    </html>
    Attribute & Description

    This Boolean attribute if specified, the audio will automatically begin to play
    autoplay
    back as soon as it can do so without stopping to finish loading the data.
    controls If this attribute is present, it will allow the user to control audio playback,
    including volume, seeking, and pause/resume playback.
    loop This Boolean attribute if specified, will allow audio automatically seek back to
    the start after reaching at the end.
    preload This attribute specifies that the audio will be loaded at page load, and ready to
    run. Ignored if autoplay is present.
    src The URL of the audio to embed. This is optional. Instead, use the <source>
    element within the audio block to specify the audio to embed.
    Forms
    • A form is basically a container for controls such as text fields, password fields,
    checkboxes, radio buttons, submit button, etc.
    • Each control in a form is supposed to collect information input by users and those
    data can submit to the server for the processing.
    • Basic structure
    <form>
    [Set of controls]
    </form>
    Form attributes

    <form action="../form-result.php" method= “get” target="_blank">


    [Set of controls]
    </form>

    • Action - Specifies the URL of the program or script on the web server that
    will be used for processing the information submitted via form.
    • Method - Specifies the HTTP method used for sending the data to the web
    server by the browser. The value can be either get (the default) and post.
    • Target -Specifies where to display the response that is received after
    submitting the form. Possible values are _blank, _self, _parent and _top.
    Get
    • Since the data sent by the GET method are displayed in the URL, data
    is visible to everyone and it is possible to bookmark the page with
    specific query string values.
    • The GET method is not suitable for passing sensitive information such
    as the username and password, because these are fully visible in the
    URL query string as well as parameters remain in browser history
    • When sending data, the GET method adds the data to the URL and
    the length of a URL is limited (maximum URL length is 2048 characters)
    Post

    • It is more secure than GET because user-entered information is never visible


    in the URL query string or in the server logs and parameters are not saved in
    browser history
    • There is a much larger limit on the amount of data that can be passed and one
    can send text data as well as binary data (uploading a file) using POST.
    • Since the data sent by the POST method is not visible in the URL, so it is not
    possible to bookmark the page with specific query.
    Text Control-Single line

    <form>
    Username: <input type="text" name="user" >
    < /form>

    <form>
    Password: <input type="password" name="password" >
    < /form>

    Other attributes: value, placeholder, required, maxlength, minlength,


    readonly, size, autofocus, autocomplete, disabled
    Text Control- Multi line

    <form>
    <textarea name="message"></textarea>
    </form>

    Other attributes: rows, cols, autofocus, disabled, placeholder, readonly, required,


    Input type- Submit & Reset

    • A submit button is used to send the form data to a web server. When
    submit button is clicked the form data is sent to the file specified in
    the form's action attribute to process the submitted data.
    • A reset button resets all the forms control to default values. Try out
    the following example by typing your name in the text field, and click
    on submit button to see it in action.
    <form>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    </form>
    Input type- Radio

    • Radio buttons let a user select ONLY ONE of a limited number of choices

    <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female
    </form>
    Input Type - Checkbox

    • Checkboxes let a user select ZERO or MORE options of a limited number of


    choices

    <form>
    <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
    < input type="checkbox" name="vehicle2" value="Car"> I have a car
    </form>

    Other attributes: checked


    Grouping & labeling form controls
    <form>
    <fieldset>
    <legend>Contact Details</legend>
    <label>Email Address:
    <input type="email" name="email">
    </label> <br>
    <label>Phone Number:
    <input type="text" name="phone">
    </label>
    </fieldset>
    </form>
    Input Type - Button

    <input type="button" onclick="alert('Hello World!')" value="Click Me!">


    Select option (drop-down list)
    The HTML <option> element is used to define an item contained in a <select>,
    an <optgroup>, or a <datalist> element.

    <label>Pet:</label>
    <select name="pets" id="pet">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="parrot">Parrot</option>
    </select>

    Other attributes: disabled, autofocus, multiple, required


    Select option (Scrolling list)

    <select name="pets" id="pet“ multiple>

    • Multiple options can be selected in the list.


    • If it is not specified, then only one option can be selected at a time.
    • When multiple is specified, it will show a scrolling list box instead of a
    single line dropdown.
    Input Type Email

    <form>
    E-mail:
    <input type="email" name="email">
    </form>

    Input Type Number


    <form>
    Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">
    </form>
    Input Type - File

    • This defines a file-select field and a "Browse" button for file uploads.

    <form>
    Select a file: <input type="file" name="myFile">
    </form>
    Input Type – Date & Datetime-local

    <form>
    Birthday:
    <input type="date" name="bday">
    </form>

    <form>
    <input type="datetime-local" name="bdaytime">
    </form>
    Other Input types

    Type Description
    color Color selector, which could be represented by a wheel or swatch picker
    Full date and time display, including a time zone. (year, month, day, hour, minute,
    datetime
    second, fractions of a second)
    month Selector for a month within a given year (year and a month)
    range Numeric selector within a range of values, typically visualized as a slider
    search Term to supply to a search engine. For example, the search bar atop a browser.
    tel Input type should be telephone number.
    Time indicator and selector, with no time zone information(hour, minute, seconds,
    time
    fractional seconds)
    Input type should be URL type.( http://www.example.com format or in
    url
    http://example.com)
    week Selector for a week within a given year(year and a week number)

    You might also like