Scribd Logo
Upload

Welcome to Scribd!

  • Html5: Iamandi Veronica

    Uploaded by

    Corina Serbușca
    29 views34 pages
    HTML5 is the latest version of HTML that allows building webpages, handling presentation, adding functionality and APIs. It combines HTML, CSS, and JavaScript to provide animation, offline storage, audio/video playback and more. Some key HTML5 features include new semantic elements, canvas for drawings, geolocation, and web storage.

    Original Description:

    ..

    Original Title

    HTML

    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
    HTML5 is the latest version of HTML that allows building webpages, handling presentation, adding functionality and APIs. It combines HTML, CSS, and JavaScript to provide animation, offline storage, audio/video playback and more. Some key HTML5 features include new semantic elements, canvas for drawings, geolocation, and web storage.

    Copyright:

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

    Html5: Iamandi Veronica

    Uploaded by

    Corina Serbușca
    HTML5 is the latest version of HTML that allows building webpages, handling presentation, adding functionality and APIs. It combines HTML, CSS, and JavaScript to provide animation, offline storage, audio/video playback and more. Some key HTML5 features include new semantic elements, canvas for drawings, geolocation, and web storage.

    Copyright:

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

    HTML5

    Iamandi Veronica
    HTML5
    • HTML5 is the latest version of HTML, the markup
    language used to build content on World Wide Web.
    • HTML5 is the latest web standard by W3C. Earlier HTML
    was used only to build webpage structure, but HTML5 is a
    full on package to build websites, handle presentation,
    add functionality and Web APIs.
    • HTML5 is the latest, lightest and fastest version
    of Hypertext Mark up Language, the code that describes
    web pages.
    • HTML5 was formed in 2011.
    HTML5 Stack
    • Html5 is the combination of three web technologies:→

    HTML → to build webpage structure,


    CSS → to enhance look and feel( presentation layer), and
    Javascript → to add functionality to HTML elements.
    HTML5 Stack
    • The term HTML5 means not only HTML, it is a combination
    of HTML, CSS and Javascript with APIs.
    • For example, drawing and animation using canvas, offline
    storage, microdata, audio and video, drag and
    drop, geolocation,embedded fonts etc.
    • HTML5 includes new semantic tags and some old
    tags( with redefinition ).
    HTML + CSS + JAVASCRIPT = HTML5
    Why HTML5
    • HTML5 has been designed to deliver almost everything
    you'd want to do online without requiring additional
    software such as browser plugins. It does everything
    from animation to apps, music to movies, and can also
    be used to build complicated web applications that run in
    your browser.
    • HTML5 isn't proprietary, so you don't need to pay royalties
    to use it. It's also cross-platform, which means it doesn't
    care whether you're using a tablet or a smart phone,
    a net-book, notebook, ultra-book or a Smart TV if your
    browser supports HTML5, it should work flawlessly.
    HTML Versions
    Year Achievement
    1991 HTML Formed
    1995 HTML 2
    1995 CSS
    1995 JAVASCRIPT
    1997 HTML 4
    1998 CSS 2
    2000 XHTML 1
    2001 XHTML 1.1
    2009 HTML5
    HTML5 Features
    HTML5 Features Use
    New Semantic Tags <header>, <nav>, <section>, <article>, <footer>
    etc.

    Audio and Video <audio> & <video>

    New Form Controls New attributes, New input types, progress bar
    etc.
    SVG <svg> Tag for vector based drawings, shapes,
    pie and bar graphs, maps etc.
    Canvas <canvas> tag for 2-d
    drawings using javascript.
    CSS3 New Selectors & properties for better styling,
    transition, transformation, animations,
    embedded fonts, filters, multi-column layouts
    and responsive web design.
    Geolocation To Detect user physical location.

    Web Storage To store upto 5mb data on front end either as


    local or session storage.

    Microdata To tell search engines our page structure.


    Drag n drop New Events in javascript.
    HTML5 Doctype
    • HTML5 Doctype is short, and easy to remember. Unlike,
    HTML4 and XHTML, there is no DTD. As per W3C, same
    doctype will be used in later versions of HTML.

    <!DOCTYPE HTML> // New and shorter Doctype, no DTD Required


    HTML5 Template
    • Default Template for HTML5 based websites.

    <!doctype html>
    <html lang="en"> //lang embedded in html
    <head> <title>HTML5 Page</title>
    <meta charset="utf-8"> //Short charset meta tag
    <link href="style.css" rel="stylesheet"> //No Type attribute
    <script src="file.js"></script> //No Type attribute required </head>
    <body> <h1>My First HTML5 page.</h1> </body>
    </html>
    HTML5 Semantic Elements

    • HTML5 includeds 20+ new tags or new elements.


    • These tags or elements includes new media tags, new
    semantic tags, svg, canvas etc.
    • HTML5 is now more semantic than html4.
    Here is a list of new tags in html5, with their meaning,
    use and example.
    Article
    • Article defines an Self Contained composition in a
    webpage. An Article could be a Blog
    post, forum, newspaper article, an independent
    content, user comment.
    • An article must have an heading h2-h6

    <article> <h2>Heading for Article</h2> </article>


    Section
    • A Section represents an generic section of a
    document. Section could be various sections of an article
    with heading.
    • An section must have an heading h2-h6

    <section> <h2>Heading for Section</h2> </section>


    Aside
    • Aside is the sidebar of a container. The content
    inside aside is related to content around. Aside could be
    sibling of div, section or article. But the content
    inside aside is relevant to adjacent sibling.
    <aside> <p>Aside</p> </aside>
    Details
    • Defines additional details that the user can view or hide.
    Content inside <details> is hidden. Only <summary> is
    visible to user. User can click on summary to
    view details .
    • Summary
    • Summary is the visible part of details. Except summary,
    everything details is hidden.
    • Details Example
    <details> <summary>Click To See</summary>
    <p>Hello</p>
    </details>
    Details
    • Details Example with open
    • An additional open attribute can open details on page
    load..
    <details open> <summary>Click To
    See</summary> <p>Hello</p> </details>
    Time
    • Time tag is an inline level element, used to represents a
    time or exact date in Gregorian calender.
    • Time Tag Example
    <p> New Batch Timings are <time>10:00</time> AM.</p>

    • An additional datetime attribute can


    write datetime in ISO String.

    <p> New Batch Timings are <time datetime="2020-12-


    08T10:00">10:00</time> AM.</p>
    Figure
    • Figure tag Specifies self-contained content, like
    images, illustrations, diagrams, code listings, etc. Figure
    can have figcaption child to explain what figure is
    showing.
    • Figcaption is the caption of figure element.
    <figure> <img src="img/path" alt="..."> <figcaption> caption
    for image</figcaption> </figure>
    Picture
    • HTML5 picture tag is used to show either high or low
    resolution image for Desktop and Mobile view. We can set
    two or more different images for different screens, and
    browser will load a single image, which match criteria.

    <picture> <source srcset="img/logo.png"


    media="(max-width: 460px)">
    <img src="img/logo.png" alt="Logo">
    </picture>
    Header
    • Defines a header for a document, section or an
    article. Header can be used more than once on a single
    webpage.
    • But try to use single header in a section, or an article.
    <section> <header>
    <h2>Header for Section<h2> </header> <p>Section
    Content Goes Here...</p> </section>
    Footer
    • Footer tag defines footer of an document, section or an
    article. A webpage can have multiple footers, but in
    separate sections.

    • <footer> <p>Content for footer<p> </footer>


    Mark
    • Mark is and inline level element used as an highlighter for
    text. Default background-color of mark tag is yellow, and
    default font color is black.

    <p>This text is <mark>marked<>/mark</p>


    Nav
    • Nav Tag is used to group navigational links. Nav can be
    used twice or more in a single webpage.
    • <nav> <ul> <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li> </ul> </nav>
    HTML5 Removed Tags or Elements
    <acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <marquee>
    <noframes>
    <strike>
    <tt>
    Html4 vs Html5
    • HTML5 is more semantic than HTML4.
    • HTML5 includes sementic elements, like header, nav,
    article, aside, section, figure, footer, but in HTML4,
    only div tag was there to do all these.
    Lets have a comparison of HTML4 with HTML5.
    Html4 vs Html5
    HTML5 Audio and Video
    • HTML5 Audio and Video are two new media elements used to
    add media content like, a song, a movie etc.
    • Both of these elements are used to add media content on a
    webpage. Chrome 3+, Firefox 3.5+, safari 4+ and IE 9+
    supports both Audio and Video tags.
    • Now we don't need any third party plugin, like flash to play
    audio or video in our website.
    • Earlier <embed> tags was used to include a flash file. Also a
    plugin ( Adobe Flash Player ) is required to run flash file.
    Chrome browser comes with build in flash player, but for IE,
    and Mozila, we need to install Adobe Flash Player to run that
    video or audio. Youtube was also used by maximum sites to
    play video using <iframe> tag.
    HTML5 Audio
    • HTML5 Audio tag is used to play audio files,
    like mp3, ogg and AAC. All browsers supporting audio
    tag are having build in player.
    • The easiest way to include Audio Tag in a webpage is to
    use audio tag. src is compulsory attribute in audio
    tag. controls attribute can show control bar to user. User
    can play/pause, change time line, mute, and increase
    volume of audio playing using controls.
    HTML5 Audio Example
    Attributes in Audio
    Attribute Values Use
    src song.mp3 to link Audio file with
    player Compulsory
    controls To
    show play/pause button
    s, timeline and volume
    controller of the player.
    autoplay "on" or "off". To play audio
    automatically.
    loop To play audio
    continuously even after it
    ends.
    muted boolean attribute to mute
    audio.
    controlsList nodownload To disable download
    button in chrome 55
    onwards
    JavaScript functions for audio tag
    HTML5 Video
    • HTML5 Video tag or <video> is used to add videos on a
    webpage. Video tag
    supports mp4, ogg, mov and H.264 files.
    • To embed a video, create a video tag. src is compulsory
    attribute for video tag. controls attribute can add
    play/pause button, video timeline, mute button, volume
    controller, full screen, subtitles options on player
    HTML5 Video
    Attributes in Video Tag
    Attributes Values Use
    src file.mp4 to link Video file with
    player Compulsory
    controls To
    show play /pause buttons, tim
    eline, volume
    controller and full
    screen buttons on video player.
    autoplay "on" or "off" To play video on page load.
    loop To play video continuously even
    after it ends.
    muted To mute video.
    width Defines width of video player.

    height Defines height of video player.

    controlsList nodownload To disable download button in


    chrome 55 onwards
    poster image.jpg shows an image( jpg or png) on
    page loading. Will not work if
    autoplay is on
    audio muted audio="muted" attribute will
    mute audio of video.
    JavaScript functions for video tag

    You might also like