Scribd Logo
Upload

Welcome to Scribd!

  • Lab 10: HTML5, Form & Media

    Uploaded by

    Tayyab
    57 views8 pages
    The document discusses HTML5, forms, and multimedia elements. It introduces new HTML5 elements like <header>, <footer>, <article>, <section>, <audio>, and <video>. It describes new form elements and attributes. It provides examples of using different form elements like text fields, radio buttons, drop-down menus, text areas, buttons, checkboxes, and passwords. It also discusses multimedia formats and provides an example of embedding a video in HTML5.

    Original Description:

    Original Title

    Lab_10_ICT

    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
    The document discusses HTML5, forms, and multimedia elements. It introduces new HTML5 elements like <header>, <footer>, <article>, <section>, <audio>, and <video>. It describes new form elements and attributes. It provides examples of using different form elements like text fields, radio buttons, drop-down menus, text areas, buttons, checkboxes, and passwords. It also discusses multimedia formats and provides an example of embedding a video in HTML5.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    57 views8 pages

    Lab 10: HTML5, Form & Media

    Uploaded by

    Tayyab
    The document discusses HTML5, forms, and multimedia elements. It introduces new HTML5 elements like <header>, <footer>, <article>, <section>, <audio>, and <video>. It describes new form elements and attributes. It provides examples of using different form elements like text fields, radio buttons, drop-down menus, text areas, buttons, checkboxes, and passwords. It also discusses multimedia formats and provides an example of embedding a video in HTML5.

    Copyright:

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

    Student Name: __________________________Roll No: ______________ Section: ______________

    Lab 10: HTML5, Form & Media

    HTML5
    Html5 is advance version of HTML and some new tags were added which are discussed bellow:

    New HTML5 Elements


    The most interesting new HTML5 elements are:
     New semantic elements like <header>, <footer>, <article>, and <section>.
     New attributes of form elements like number, date, time, calendar, and range.
     New graphic elements: <svg> and <canvas>.
     New multimedia elements: <audio> and <video>.
    New HTML5 API's (Application Programming Interfaces)

    The most interesting new API's in HTML5 are:

     HTML Geolocation
     HTML Drag and Drop
     HTML Local Storage
     HTML Application Cache
     HTML Web Workers
     HTML SSE

    Removed Elements in HTML5


    Removed Element Use Instead
    <acronym> <abbr>
    <applet> <object>
    <basefont> CSS
    <big> CSS
    <center> CSS
    <dir> <ul>
    <font> CSS
    <frame>
    <frameset>
    <noframes>
    <strike> CSS, <s>, or <del>
    <tt> CSS

    New Semantic/Structural Elements


    Tag Description
    <article> Defines an article in the document
    <figcaption> Defines a caption for a <figure> element
    <footer> Defines a footer for the document or a
    section

    CS 111| Introduction to ICT 1


    Student Name: __________________________Roll No: ______________ Section: ______________

    <header> Defines a header for the document or a


    section
    <main> Defines the main content of a document
    <nav> Defines navigation links in the document
    <section> Defines a section in the document
    <progress> Defines the progress of a task

    HTML5 Semantic Elements


    Semantics is the study of the meanings of words and phrases in a language.
    Semantic elements = elements with a meaning.
    A semantic element clearly describes its meaning to both the browser and the developer.
    Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
    Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
    New Semantic Elements in HTML5

    Many web sites contain HTML code like: <div id="nav"><div class="header"><div
    id="footer">
    to indicate navigation, header, and footer.

    HTML5 offers new semantic elements to define different parts


    of a web page:

     <article>
    o The <article> element specifies independent,
    self-contained content.
     <aside>
     <details>
     <figcaption>
    o The purpose of a figure caption is to add a
    visual explanation to an image.
     <figure>
     <footer>
    o The <footer> element specifies a footer for a
    document or section.
     <header>
    o The <header> element specifies a header for a document or section.
     <main>
     <mark>
     <nav>
    o The <nav> element defines a set of navigation links.
     <section>
    o The <section> element defines a section in a document.
     <summary>
     <time>

    CS 111| Introduction to ICT 2


    Student Name: __________________________Roll No: ______________ Section: ______________

    Lab10e1.html
    <!DOCTYPE html>
    <html>
    <body>
    <section>
    <h1>Advance Computing Lab</h1>
    <p>The purpose of this lab is to allow students to develop and test electronic
    circuits to implement hardware. </p>
    </section>
    <section>
    <h1>Ubiquitous Lab</h1>
    <p>The Computer Science department of DSU has constructed specialized
    labs that support Mobile Computing, Game Development, and Graphics</p>
    </section>
    </body>
    </html>

    Lab10e2.html
    <!DOCTYPE html>
    <html>
    <body>
    <nav>
    <a href="/html/">Home</a> |
    <a href="/css/">About Us</a> |
    <a href="/js/">Education</a> |
    <a href="/jquery/">Gallery</a>
    <a href="/jquery/">Contact Us</a>
    </nav>
    </body>
    </html>

    Lab10e3.html
    <!DOCTYPE html>
    <html>
    <body>
    <p> The Department of Computer Science aims to produce world class IT entrepreneurs and
    researchers. </p>
    <figure>
    <imgsrc="CS-01.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.1 - Department of Computer Science.</figcaption>
    </figure>
    </body>
    </html>

    Migration from HTML4 to HTML5


    Typical HTML4 Typical HTML5
    <div id="header"> <header>
    <div id="menu"> <nav>
    <div id="content"> <section>
    CS 111| Introduction to ICT 3
    Student Name: __________________________Roll No: ______________ Section: ______________

    <div class="article"> <article>


    <div id="footer"> <footer>

    Text Field Input


    Lab10e4.html
    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    First name:<br>
    <input type="text" name="firstname" >
    <br>
    Last name:<br>
    <input type="text" name="lastname" >
    <br><br>
    <input type="submit" value="Submit">
    </form>
    <p>If you click the "Submit" button, the form-data will be sent to a page called
    "/action_page.php".</p>
    </body>
    </html>
    Radio Input
    Lab10e5.html
    <!DOCTYPE html>
    <html>
    <body>
    <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
    </form>
    </body>
    </html>

    The Submit Button


    <input type="submit"> defines a button for submitting the form data to a form-handler.
    The form-handler is typically a server page with a script for processing input data.
    The form-handler is specified in the form's action attribute:
    Lab10e6.html
    <!DOCTYPE HTML>
    <html>
    <body>
    <form action="welcome.php" method="post">
    Name: <input type="text" name="name"><br>
    E-mail: <input type="text" name="email"><br>
    <input type="submit">
    </form>
    </body>
    </html>

    CS 111| Introduction to ICT 4


    Student Name: __________________________Roll No: ______________ Section: ______________

    Lab10e7.html

    The <select> Element


    Lab5e8.html
    <!DOCTYPE html>
    <html>
    <body>
    <form>
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    <br><br>
    <input type="submit">
    </form>
    </body>
    </html>

    Lab10e8.html

    The <textarea> Element


    The <textarea>element defines a multi-line input field (a text area):
    Lab5e9.html
    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <textarea name="message" rows="10" cols="30"> The purpose of this lab is to allow students
    to develop and test electronic circuits to implement hardware.</textarea>
    <br>
    <input type="submit">
    </form>
    </body>
    </html>

    Lab10e9.html
    The <button> Element
    Lab5e10.html
    <!DOCTYPE html>
    <html>
    <body>
    <button type="button" onclick="alert('Hello World!')">Click Me!</button>
    </body>
    </html>

    CS 111| Introduction to ICT 5


    Student Name: __________________________Roll No: ______________ Section: ______________

    Input Type Password


    <input type="password"> defines a password field:
    Lab10e10.html
    <!DOCTYPE html>
    <html>
    <body>
    <form action="">
    User name:<br>
    <input type="text" name="userid">
    <br>
    User password:<br>
    <input type="password" name="psw">
    </form>
    <p>The characters in a password field are masked (shown as asterisks or circles).</p>
    </body>
    </html>

    Input Type Checkbox


    <input type="checkbox"> defines a checkbox.
    Checkboxes let a user select ZERO or MORE options of a limited number of choices.
    Lab10e11.html
    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <input type="checkbox" name="vehicle1" value="Bike">I have a bike
    <br>
    <input type="checkbox" name="vehicle2" value="Car">I have a car
    <br><br>
    <input type="submit">
    </form>
    </body>
    </html>

    What is Multimedia?
    Multimedia comes in many different formats. It can be almost anything you can hear or see.
    Examples: Images, music, sound, videos, records, films, animations, and more.
    Web pages often contain multimedia elements of different types and formats.

    Multimedia Formats
    Multimedia elements (like audio or video) are stored in media files.
    The most common way to discover the type of a file, is to look at the file extension.
    Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg,
    .wmv, and .avi.
    HTML5 Video
    Lab10e12.html
    <!DOCTYPE html>
    <html>
    <body>

    CS 111| Introduction to ICT 6


    Student Name: __________________________Roll No: ______________ Section: ______________

    <video width="400" controls>


    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
    </video>
    <p>
    Video courtesy of
    <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
    </p>
    </body>
    </html>

    The HTML <audio> Element


    To play an audio file in HTML, use the <audio> element:
    Lab10e13.html
    <!DOCTYPE html>
    <html>
    <body>
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>
    </body>
    </html>

    CS 111| Introduction to ICT 7


    Student Name: __________________________Roll No: ______________ Section: ______________

    Lab 10 Tasks
    Question No. 01: Create your own page Contact Us for should be like
    this:

    Question No. 02: Create a web pages E-Learning


    You are require to create a web page named as E-Learning Lecture Tutorials web page should
    contain Video tag and audio tag (at least 3 videos and audio)

    CS 111| Introduction to ICT 8

    You might also like