SlideShare a Scribd company logo
1 of 26
Introduction to HTML5
INTRODUCTION
   HTML5 is the new standard for HTML.
   HTML5 is still a work in progress
   HTML5 is a cooperation between the World Wide Web Consortium (W3C)
    and the Web Hypertext Application Technology Working Group
    (WHATWG).
   New features of HTML5 are based on HTML, CSS, DOM, and JavaScript.
   Reduce the need for external plugins (like Flash)
HTML5 New Input Types
   color
         Your favorite color: <input type="color" name="favcolor" />
   date
   datetime
   datetime-local
   Email
          E-mail: <input type="email" name="usremail" />
   month
   number
   range
   search
   Tel
        Telephone: <input type="tel" name="usrtel" />
   time
   url
HTML5 New Form Elements

<datalist>
   The list is created with <option> elements inside the <datalist>.
   The <datalist> element specifies a list of options for an input field.
<form action="demoform.html" method="get">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
      <option label="W3Schools" value="http://www.w3schools.com" />
      <option label="Google" value="http://www.google.com" />
      <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
2) <keygen>
<form action="demokeygen.html" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
3)<output>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" name="a" value="50" />100
   +<input type="number" name="b" value="50" />
   =<output name="x" for="a b"></output>
   </form>
HTML5 New Form Attributes
    Autocomplete
    Novalidate


1) Autocomplete
    <form action="demo_form.html" method="get" autocomplete="on">
 First name:<input type="text" name="fname" /><br />
 E-mail: <input type="email" name="email" /><br />
 <input type="submit" />
</form>


2) Novalidate
<form action="demo_form.html" novalidate="novalidate">
    E-mail: <input type="email" name="user_email" />
    <input type="submit" />
    </form>
New input attributes:
   Autocomplete
   Autofocus
   form
   form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
   height and width
   list
   min, max and step
<input type="number" name="points" min="0" max="10" step="3" />
   multiple
   Placeholder
<input type="search" name="user_search" placeholder="Search W3Schools" />
   required
HTML5 Global Attributes
    Contenteditable
    <p contenteditable="true">This is a paragraph. It is editable.</p>
    Contextmenu
     <element contextmenu="menu_id">
    Draggable(true)
    Dropzone
    <element dropzone="copy|move|link">
    Hidden
    Spellcheck
First name: <input type="text" name="fname" spellcheck="true" />
HTML5 Tags
<fieldset>

    <form>
      <fieldset disabled=“disabled”>
       <legend>Personalia:</legend>
       Name: <input type="text" /><br />
       Email: <input type="text" /><br />
       Date of birth: <input type="text" />
      </fieldset>
     </form>

    New Attributes
1)    Disabled
2)    Form
3)    Name
<video>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
</video>


    New Attributes
1)    Autoplay
2)    Controls (play,pause.seeking,volume,caption,track)
3)    Height
4)    Loop
5)    Muted
6)    Poster
7)    Preload    <video controls="controls" preload="none">
8)    Width
9)    src
<details>
   The open attribute is a boolean attribute.
   When present, it specifies that the details should be visible (open) to the
    user.

<details open="open">
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<area>
<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

     <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
      <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
      </map>
New Attributes:-
1)     Hreflang
2)     Media
     <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

       <map name="planetmap">
       <area shape="rect" coords="0,0,82,126" alt="Sun"
       href="sun.htm" media="screen and (min-color-index:256)" />
       </map>
3) Rel
<select>
     New Attributes
1)      Autofocus: It specifies that the drop-down list should automatically get focus
        when the page loads.
2)      Form:
     <form action="demo_form.asp" id="carform">
         Firstname:<input type="text" name="fname" /><br />
         <input type="submit" />
        </form>

        <select name="carlist" form="carform">
         <option value="volvo">Volvo</option>
         <option value="saab">Saab</option>
         </select>
<button><button type="button">Click Me!</button>

    New Attributes:-
1)     Autofocus
2)     Disabled
3)     Form
4)     Formaction
5)     Formenctype
6)     Formmethod
7)     Formnovalidate
8)     formtarget
<nav>: It defines a section of navigation links.
<nav>
    <a href="/html/">HTML</a> |
    <a href="/html5/">HTML5</a> |
    <a href="/css/">CSS</a> |
    <a href="/css3/">CSS3</a> |
    <a href="/js/">JavaScript</a>
</nav>
<html> manifest Attribute
Advatages:
1)     Offline browsing
2)     Increased Speed
3)     Reduced server load


<!DOCTYPE HTML>
   <html manifest=" demo_html.manifest ">
   <head>
   <title>Title of the document</title>
   </head>

     <body>
     The content of the document......
     </body>
     </html>
Example of manifest file
CACHE MANIFEST
  index.html
  theme.css
  images/logo.png
  scripts/main.js

  NETWORK:
  server.cgi

  FALLBACK:
  /offline.htm
<progress>
   The <progress> tag represents the progress of a task.
   The <progress> tag is currently supported in Firefox, Opera, and Chrome.
<progress value="22" max="100"></progress>


Attributes:-
1) max:- Specifies how much work the task requires in total.
2) value:- Specifies how much of the task has been completed.
<iframe>
    The <iframe> tag specifies an inline frame.
    An inline frame is used to embed another document within the current HTML
     document.


<iframe src="http://www.w3schools.com"></iframe>


New attributes:-
1)    Sandbox
2)    Seamless
3)    srcdoc
HTML5 Web Storage
=>HTML5 offers two new objects for storing data on the client:


    localStorage - stores data with no time limit
    SessionStorage - stores data for one session



    HTML5 uses JavaScript to store and access the data.
The local Storage Object
   The localStorage object stores the data with no time limit.
   Included in MySQL binary distributions (except on Windows), invoke
    configure with the --with-csv-storage-engine option to enable it.
<script type="text/javascript">
   localStorage.lastname="Smith";
   document.write(localStorage.lastname);
   </script>
The sessionStorage Object
   The sessionStorage object stores the data for one session. The data is
    deleted when the user closes the browser window.
How to create and access a sessionStorage:
    <script type="text/javascript">
     sessionStorage.lastname="Smith";
     document.write(sessionStorage.lastname);
     </script>
Tags Not Supported In HTML5
   <acronym>
   <applet>
   <basefont>
   <big>
   <center>
   <dir>
   <font>
   <frame>
   <frameset>
   <noframes>
   <strike>
   <tt>
   <u>
Contact us

 Information: info@netgains.org
 Sales: sales@netgains.org
 Partners: partners@netgains.org
 Careers: jobs@netgains.org


INDIA (Chandigarh)                 USA (New York)
Mobile: +91 9876597755             NETGAINS AMERICA LLC
Office: +91 (172) 2700428          87 Wolfs Lane, 2nd Floor
Fax: +91 (172) 2700428             Pelham, New York - 10803
                                   Office: + 1 (917) 779-0480
                                   Toll Free: +1 (866) 693-5132
Introduction to Html5

More Related Content

What's hot (20)

html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
Css backgrounds
Css   backgroundsCss   backgrounds
Css backgrounds
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
Html coding
Html codingHtml coding
Html coding
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
HTML Semantic Elements
HTML Semantic ElementsHTML Semantic Elements
HTML Semantic Elements
 
WEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web DevelopmentWEB I - 01 - Introduction to Web Development
WEB I - 01 - Introduction to Web Development
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Basic html
Basic htmlBasic html
Basic html
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
jQuery
jQueryjQuery
jQuery
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 

Similar to Introduction to Html5

HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesDoris Chen
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webPablo Garaizar
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular UJoonas Lehtinen
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Mandakini Kumari
 
Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3masahiroookubo
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...IT Event
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortalJennifer Bourey
 

Similar to Introduction to Html5 (20)

HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
HTML5
HTML5HTML5
HTML5
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
HTML5
HTML5 HTML5
HTML5
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
前端概述
前端概述前端概述
前端概述
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3
 
Client Web
Client WebClient Web
Client Web
 
smoke1272528461
smoke1272528461smoke1272528461
smoke1272528461
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 

More from www.netgains.org

More from www.netgains.org (8)

Exploring iTools
Exploring iToolsExploring iTools
Exploring iTools
 
What is a Responsive Website
What is a Responsive WebsiteWhat is a Responsive Website
What is a Responsive Website
 
Twitter bootstrap1
Twitter bootstrap1Twitter bootstrap1
Twitter bootstrap1
 
Magento
MagentoMagento
Magento
 
Dream weaver
Dream weaverDream weaver
Dream weaver
 
Introduction to wordpress & theme implementation
Introduction to wordpress & theme implementationIntroduction to wordpress & theme implementation
Introduction to wordpress & theme implementation
 
Web application security
Web application securityWeb application security
Web application security
 
Sessions and cookies
Sessions and cookiesSessions and cookies
Sessions and cookies
 

Recently uploaded

Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementDianaGray10
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 

Recently uploaded (20)

Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
Automation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions managementAutomation Ops Series: Session 3 - Solutions management
Automation Ops Series: Session 3 - Solutions management
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 

Introduction to Html5

  • 2. INTRODUCTION  HTML5 is the new standard for HTML.  HTML5 is still a work in progress  HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).  New features of HTML5 are based on HTML, CSS, DOM, and JavaScript.  Reduce the need for external plugins (like Flash)
  • 3. HTML5 New Input Types  color Your favorite color: <input type="color" name="favcolor" />  date  datetime  datetime-local  Email E-mail: <input type="email" name="usremail" />  month  number  range  search  Tel Telephone: <input type="tel" name="usrtel" />  time  url
  • 4. HTML5 New Form Elements <datalist>  The list is created with <option> elements inside the <datalist>.  The <datalist> element specifies a list of options for an input field. <form action="demoform.html" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3schools.com" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form>
  • 5. 2) <keygen> <form action="demokeygen.html" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
  • 6. 3)<output> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" name="a" value="50" />100 +<input type="number" name="b" value="50" /> =<output name="x" for="a b"></output> </form>
  • 7. HTML5 New Form Attributes  Autocomplete  Novalidate 1) Autocomplete <form action="demo_form.html" method="get" autocomplete="on"> First name:<input type="text" name="fname" /><br /> E-mail: <input type="email" name="email" /><br /> <input type="submit" /> </form> 2) Novalidate <form action="demo_form.html" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
  • 8. New input attributes:  Autocomplete  Autofocus  form  form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)  height and width  list  min, max and step <input type="number" name="points" min="0" max="10" step="3" />  multiple  Placeholder <input type="search" name="user_search" placeholder="Search W3Schools" />  required
  • 9. HTML5 Global Attributes  Contenteditable <p contenteditable="true">This is a paragraph. It is editable.</p>  Contextmenu <element contextmenu="menu_id">  Draggable(true)  Dropzone <element dropzone="copy|move|link">  Hidden  Spellcheck First name: <input type="text" name="fname" spellcheck="true" />
  • 10. HTML5 Tags <fieldset>  <form> <fieldset disabled=“disabled”> <legend>Personalia:</legend> Name: <input type="text" /><br /> Email: <input type="text" /><br /> Date of birth: <input type="text" /> </fieldset> </form>  New Attributes 1) Disabled 2) Form 3) Name
  • 11. <video> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video>  New Attributes 1) Autoplay 2) Controls (play,pause.seeking,volume,caption,track) 3) Height 4) Loop 5) Muted 6) Poster 7) Preload <video controls="controls" preload="none"> 8) Width 9) src
  • 12. <details>  The open attribute is a boolean attribute.  When present, it specifies that the details should be visible (open) to the user. <details open="open"> <summary>Copyright 1999-2011.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>
  • 13. <area> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /> </map> New Attributes:- 1) Hreflang 2) Media <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)" /> </map> 3) Rel
  • 14. <select>  New Attributes 1) Autofocus: It specifies that the drop-down list should automatically get focus when the page loads. 2) Form: <form action="demo_form.asp" id="carform"> Firstname:<input type="text" name="fname" /><br /> <input type="submit" /> </form> <select name="carlist" form="carform"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </select>
  • 15. <button><button type="button">Click Me!</button>  New Attributes:- 1) Autofocus 2) Disabled 3) Form 4) Formaction 5) Formenctype 6) Formmethod 7) Formnovalidate 8) formtarget
  • 16. <nav>: It defines a section of navigation links. <nav> <a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a> </nav>
  • 17. <html> manifest Attribute Advatages: 1) Offline browsing 2) Increased Speed 3) Reduced server load <!DOCTYPE HTML> <html manifest=" demo_html.manifest "> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
  • 18. Example of manifest file CACHE MANIFEST index.html theme.css images/logo.png scripts/main.js NETWORK: server.cgi FALLBACK: /offline.htm
  • 19. <progress>  The <progress> tag represents the progress of a task.  The <progress> tag is currently supported in Firefox, Opera, and Chrome. <progress value="22" max="100"></progress> Attributes:- 1) max:- Specifies how much work the task requires in total. 2) value:- Specifies how much of the task has been completed.
  • 20. <iframe>  The <iframe> tag specifies an inline frame.  An inline frame is used to embed another document within the current HTML document. <iframe src="http://www.w3schools.com"></iframe> New attributes:- 1) Sandbox 2) Seamless 3) srcdoc
  • 21. HTML5 Web Storage =>HTML5 offers two new objects for storing data on the client:  localStorage - stores data with no time limit  SessionStorage - stores data for one session HTML5 uses JavaScript to store and access the data.
  • 22. The local Storage Object  The localStorage object stores the data with no time limit.  Included in MySQL binary distributions (except on Windows), invoke configure with the --with-csv-storage-engine option to enable it. <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
  • 23. The sessionStorage Object  The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window. How to create and access a sessionStorage: <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
  • 24. Tags Not Supported In HTML5  <acronym>  <applet>  <basefont>  <big>  <center>  <dir>  <font>  <frame>  <frameset>  <noframes>  <strike>  <tt>  <u>
  • 25. Contact us Information: info@netgains.org Sales: sales@netgains.org Partners: partners@netgains.org Careers: jobs@netgains.org INDIA (Chandigarh) USA (New York) Mobile: +91 9876597755 NETGAINS AMERICA LLC Office: +91 (172) 2700428 87 Wolfs Lane, 2nd Floor Fax: +91 (172) 2700428 Pelham, New York - 10803 Office: + 1 (917) 779-0480 Toll Free: +1 (866) 693-5132