SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
HTML 5

  ●   Background
          ○ Replacement for HTML 4 and XHTML
                 ■ Several forks divided over XML
                 ■ Finally gave up and chose to do a revised version of HTML
                 ■ Compatibility was key
          ○ Timeline
                 ■ Work started in 2004
                 ■ First Draft in January 2008
                 ■ Finalizing will take years
                 ■ Features are being solidified though
          ○ Being worked on jointly W3C and Web Hypertext Application Technology
             Working Group (WHATWG)
                 ■ Currently still in draft format
                 ■ Several browsers are implementing parts of HTML5: Safari, Chrome,
                    Opera and Firefox
  ●   Philosophy
          ○ WHATWG studied how browsers actually handle HTML
          ○ Worked with browser makers
          ○ Presentation elements further removed
                 ■ Poor accessability
                 ■ High cost of maintaince
                 ■ High document sizes
  ●   Syntax
          ○ Double quotes, single quotes and no quotes is okay
          ○ Trailing Slashes Not Required (e.g. the br, img and input elements)


Walking through a page
Start at the Beginning or Technical Mumbo Jumbo
  ●   doctype
         ○ simple: <!DOCTYPE html>
               ■ Previous: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
                   Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
                   transitional.dtd">
         ○ forces standards mode
  ●   <html>
         ○ Simplified: <html lang=”en”>
               ■ Previous: <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/
                   xhtml">
         ○ Implies xhtml namespace
  ●   <head>
         ○ Same as always
  ●   <meta>
○   Simplified: <meta charset=”utf-8″ />
                ■ Previous: <meta http-equiv="Content-Type" content="text/html;
                     charset=utf-8" />
          ○  Assumes HTML MIME
  ●   <link>
          ○ rel=”stylesheets”
                ■ Simplified: <link rel="stylesheet" href="style-original.css" />
                        ● Previous: <link href="/style/structure.css" rel="stylesheet"
                            type="text/css" />
                ■ No need for type since the only type of stylesheet on the web is CSS
          ○ Others: rel=” “
                ■ icon
                ■ author
                ■ archives
                ■ license
                ■ prefetch
                ■ search

New Elements
  ●   <section>
          ○ a thematic grouping of content, typically with a heading
          ○ A Web site's home page could be split into sections for an introduction, news
              items, contact information.
  ●   <nav>
          ○ Contains core navigation items for a site or page
  ●   <article>
          ○ self-contained composition in a document, page, application, or site and that is
              intended to be independently distributable or reusable, e.g. in syndication
          ○ This could be a forum post, a magazine or newspaper article, a Web log entry,
              a user-submitted comment, an interactive widget or gadget, or any other
              independent item of content
  ●   <aside>
          ○ A sidebar
          ○ Contend that is related to but not essential to it’s parent content
  ●   <hgroup>
          ○ Grouping of h1-h6 elements
          ○ Used to hide sub headers from outline
  ●   <header>
          ○ Just what it sounds like
          ○ Can be used for the page over all and inside sections
  ●   <footer>
          ○ Just what it sounds like
          ○ Can be used for the page over all and inside sections
  ●   <time>
          ○ Indicates a date/time
  ●   <mark>
○   Used for emphasis or highlighting

Finally Content or Bye, Bye divs
   ●   Moving towards separation of markup and content. Want our markup to have meaning.
   ●   Divs and ids don’t have inherent meaning
   ●   Use new elements to help weave meaning into the webpage
   ●   Better search results better reuse of content



Before
<div class="entry">
  <p class="post-date">October 22, 2009</p>
  <h2>
    <a href="#"
        rel="bookmark"
        title="link to this post">
        Travel day</a>
  </h2>
  <p>Lorem ipsum dolor sit amet…</p>
</div>




Creating an Outline
   ●   <header>
           ○ Enclosing logos and h1 tags
           ○ Problem of subheads
   ●   <article>
           ○ Great for blog post
           ○ Problem with assembled content
                 ■ HTML 4 only had h1-6 to create outline
                 ■ Makes it difficult with WCMS
                 ■ HTML5 allows you to start over for each section
           ○ Add a header with h1 tag
           ○ Could add footer
   ●   <time>
           ○ <time datetime="2009-10-22" pubdate>October 22, 2009</time>
           ○ datetime attribute is machine readable
           ○ between the tags can be anything
           ○ pubdate
                 ■ Within article it references just that article
                 ■ Outside article means entire document

After
<article>
 <header>
    <time datetime="2009-10-22" pubdate> October 22, 2009</time>
<h1>
       <a href="#"
          rel="bookmark"
          title="link to this post">
          Travel day</a>
    </h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>



Navigation
   ●   <nav>
          ○ defines navigation area
          ○ important for screen readers

Before
<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>


After
<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>


Footer
   ●   Can include “fat footers” like on the SMU homepage

After
<footer>
  <p>&#167;</p>
  <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
</footer>
Forms
  ●   placeholder
          ○ <input name="q" placeholder="Search Bookmarks and History">
  ●   AutoFocus
          ○ <input name="q" autofocus>

New Input Types
  ●   Email
         ○ “email”
         ○ Older browsers treat as text
         ○ iPhone uses special keyboard
  ●   Web Address
         ○ “url”
         ○ iPhone custom keyboard
  ●   Number
         ○ spinbox
         ○ iPhone custom keyboard
  ●   Range
  ●   Date, Month, Week, datetime, datetime-local
  ●   Search
  ●   Color picker
         ○ No support yet

Auto Validation
  ●   Works for Opera
  ●   No other browser, yet



Specialized Elements
Canvas
  ●   Use javascript to draw things in a box
  ●   Importance
         ○ Can dynamically create graphics on the client side
         ○ Reduces dependence on flash

Video and Audio
  ●   With HTML5 video is baked into browser
  ●   No plugins, like flash, needed
  ●   Problem is formats, they must be built into browsers, creates licensing issues
         ○ Google announced WebM format on Tuesday. Will likely be the standard
○   h.264 is also supported by most browsers, not Firefox

<video width="320" height="240" controls preload>
  <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>



Location
   ●   Supported mainly by iPhone and Android
   ●   Firefox supports
   ●   Opt-in

Offline
   ●   In html tag you provide a link to a “cache.manifest” file that lists files needed
   ●


When Can I start using it?
   ●   In general, when IE9 comes out. Maybe late 2010 or early 2011
   ●   Maybe now, if you are developing for mobile devices
   ●   There are work arounds for older browsers


The Appendix
   ●   Elements Thrown Away
          ○ <acronym>
          ○ <applet>
          ○ <basefont>
          ○ <big>
          ○ <center>
          ○ <dir>
          ○ <font>
          ○ <frame>
          ○ <frameset>
          ○ <noframes>
          ○ <s>
          ○ <strike>
          ○ <tt>
          ○ <u>
          ○ <xmp>
   ●   New Tags
          ○ article
          ○ section
○   aside
      ○   hgroup
      ○   header
      ○   footer
      ○   nav
      ○   time
      ○   mark
      ○   figure
      ○   figcaption


Websites for reference
  ●

Más contenido relacionado

La actualidad más candente

Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTMLabidibo Contini
 
IN LIVING CODING
IN LIVING CODINGIN LIVING CODING
IN LIVING CODINGkdhicks2
 
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>tutorialsruby
 
What is HTML- d3brand.com
What is HTML- d3brand.comWhat is HTML- d3brand.com
What is HTML- d3brand.comDremy Riyad
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Joseph Lewis
 
Drupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.xDrupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.xWong Hoi Sing Edison
 

La actualidad más candente (12)

Light introduction to HTML
Light introduction to HTMLLight introduction to HTML
Light introduction to HTML
 
Intro to web dev
Intro to web devIntro to web dev
Intro to web dev
 
CollegeDiveIn presentation
CollegeDiveIn presentationCollegeDiveIn presentation
CollegeDiveIn presentation
 
IN LIVING CODING
IN LIVING CODINGIN LIVING CODING
IN LIVING CODING
 
Html 5 and css 3
Html 5 and css 3Html 5 and css 3
Html 5 and css 3
 
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
Essential Javascript -- A Javascript &lt;b>Tutorial&lt;/b>
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
What is HTML- d3brand.com
What is HTML- d3brand.comWhat is HTML- d3brand.com
What is HTML- d3brand.com
 
Html5
Html5Html5
Html5
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Drupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.xDrupal in 5mins + Previewing Drupal 8.x
Drupal in 5mins + Previewing Drupal 8.x
 

Destacado

HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basicsJames VanDyke
 
Drawing for interior design part 3
Drawing for interior design   part 3Drawing for interior design   part 3
Drawing for interior design part 3Melissa Betancourt
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Websdireland
 
Regular Expressions 101
Regular Expressions 101Regular Expressions 101
Regular Expressions 101Raj Rajandran
 
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can MakeFFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can MakeSaffire
 
5 Steps To A Smart Compensation Plan
5 Steps To A Smart Compensation Plan5 Steps To A Smart Compensation Plan
5 Steps To A Smart Compensation PlanBambooHR
 
10 Tips for WeChat
10 Tips for WeChat10 Tips for WeChat
10 Tips for WeChatChris Baker
 
Benefits of drinking water
Benefits of drinking waterBenefits of drinking water
Benefits of drinking waterEason Chan
 
20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage ContentBarry Feldman
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 

Destacado (12)

Live streaming
Live streamingLive streaming
Live streaming
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
 
Drawing for interior design part 3
Drawing for interior design   part 3Drawing for interior design   part 3
Drawing for interior design part 3
 
Preparing images for the Web
Preparing images for the WebPreparing images for the Web
Preparing images for the Web
 
Regular Expressions 101
Regular Expressions 101Regular Expressions 101
Regular Expressions 101
 
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can MakeFFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
FFEA 2016 -10 Website Mistakes Even Great Marketers Can Make
 
5 Steps To A Smart Compensation Plan
5 Steps To A Smart Compensation Plan5 Steps To A Smart Compensation Plan
5 Steps To A Smart Compensation Plan
 
Stay Up To Date on the Latest Happenings in the Boardroom: Recommended Summer...
Stay Up To Date on the Latest Happenings in the Boardroom: Recommended Summer...Stay Up To Date on the Latest Happenings in the Boardroom: Recommended Summer...
Stay Up To Date on the Latest Happenings in the Boardroom: Recommended Summer...
 
10 Tips for WeChat
10 Tips for WeChat10 Tips for WeChat
10 Tips for WeChat
 
Benefits of drinking water
Benefits of drinking waterBenefits of drinking water
Benefits of drinking water
 
20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content20 Ideas for your Website Homepage Content
20 Ideas for your Website Homepage Content
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 

Similar a Html5 training

Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Mario García
 
FED-HTML (2).pdf
FED-HTML (2).pdfFED-HTML (2).pdf
FED-HTML (2).pdfSamuelozor
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Ontico
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)François Massart
 
Introduction to TeacherPress
Introduction to TeacherPressIntroduction to TeacherPress
Introduction to TeacherPressNick Purdue
 
T430-01-Introduction to HTML.pptx
T430-01-Introduction to HTML.pptxT430-01-Introduction to HTML.pptx
T430-01-Introduction to HTML.pptxawadalsabbah
 
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"Brian Hay
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...Horacio Gonzalez
 
Extending WordPress' TinyMCE
Extending WordPress' TinyMCEExtending WordPress' TinyMCE
Extending WordPress' TinyMCEHristo Chakarov
 
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...Brian O'Gorman
 
Static Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownStatic Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownNic Raboy
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausWomen in Technology Poland
 
How QCLean Works? Introduction to Browser Extensions
How QCLean Works? Introduction to Browser ExtensionsHow QCLean Works? Introduction to Browser Extensions
How QCLean Works? Introduction to Browser ExtensionsQing-Cheng Li
 
Onpage optimization standards january 2012
Onpage optimization standards january 2012Onpage optimization standards january 2012
Onpage optimization standards january 2012Bitsytask
 
New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)Luc Perkins
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxParallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxGuy Bary
 

Similar a Html5 training (20)

Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)Jbake workshop (Greach 2019)
Jbake workshop (Greach 2019)
 
FED-HTML (2).pdf
FED-HTML (2).pdfFED-HTML (2).pdf
FED-HTML (2).pdf
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)
 
HTML5, just another presentation :)
HTML5, just another presentation :)HTML5, just another presentation :)
HTML5, just another presentation :)
 
Introduction to TeacherPress
Introduction to TeacherPressIntroduction to TeacherPress
Introduction to TeacherPress
 
T430-01-Introduction to HTML.pptx
T430-01-Introduction to HTML.pptxT430-01-Introduction to HTML.pptx
T430-01-Introduction to HTML.pptx
 
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
Taming Drupal Blocks for Content Editors a.k.a. "Snippets"
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
Extending WordPress' TinyMCE
Extending WordPress' TinyMCEExtending WordPress' TinyMCE
Extending WordPress' TinyMCE
 
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
SHOW202: How to customize Lotus Quickr Templates Using HTML, Javascript and C...
 
Static Site Generation with Hugo and Markdown
Static Site Generation with Hugo and MarkdownStatic Site Generation with Hugo and Markdown
Static Site Generation with Hugo and Markdown
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
How QCLean Works? Introduction to Browser Extensions
How QCLean Works? Introduction to Browser ExtensionsHow QCLean Works? Introduction to Browser Extensions
How QCLean Works? Introduction to Browser Extensions
 
Onpage optimization standards january 2012
Onpage optimization standards january 2012Onpage optimization standards january 2012
Onpage optimization standards january 2012
 
New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)New(ish) Horizons in CSS (PDX Web & Design presentation)
New(ish) Horizons in CSS (PDX Web & Design presentation)
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Tango with django
Tango with djangoTango with django
Tango with django
 
Parallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptxParallel programing in web applications - public.pptx
Parallel programing in web applications - public.pptx
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
 

Último

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 

Último (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 

Html5 training

  • 1. HTML 5 ● Background ○ Replacement for HTML 4 and XHTML ■ Several forks divided over XML ■ Finally gave up and chose to do a revised version of HTML ■ Compatibility was key ○ Timeline ■ Work started in 2004 ■ First Draft in January 2008 ■ Finalizing will take years ■ Features are being solidified though ○ Being worked on jointly W3C and Web Hypertext Application Technology Working Group (WHATWG) ■ Currently still in draft format ■ Several browsers are implementing parts of HTML5: Safari, Chrome, Opera and Firefox ● Philosophy ○ WHATWG studied how browsers actually handle HTML ○ Worked with browser makers ○ Presentation elements further removed ■ Poor accessability ■ High cost of maintaince ■ High document sizes ● Syntax ○ Double quotes, single quotes and no quotes is okay ○ Trailing Slashes Not Required (e.g. the br, img and input elements) Walking through a page Start at the Beginning or Technical Mumbo Jumbo ● doctype ○ simple: <!DOCTYPE html> ■ Previous: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> ○ forces standards mode ● <html> ○ Simplified: <html lang=”en”> ■ Previous: <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/ xhtml"> ○ Implies xhtml namespace ● <head> ○ Same as always ● <meta>
  • 2. Simplified: <meta charset=”utf-8″ /> ■ Previous: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ○ Assumes HTML MIME ● <link> ○ rel=”stylesheets” ■ Simplified: <link rel="stylesheet" href="style-original.css" /> ● Previous: <link href="/style/structure.css" rel="stylesheet" type="text/css" /> ■ No need for type since the only type of stylesheet on the web is CSS ○ Others: rel=” “ ■ icon ■ author ■ archives ■ license ■ prefetch ■ search New Elements ● <section> ○ a thematic grouping of content, typically with a heading ○ A Web site's home page could be split into sections for an introduction, news items, contact information. ● <nav> ○ Contains core navigation items for a site or page ● <article> ○ self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication ○ This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content ● <aside> ○ A sidebar ○ Contend that is related to but not essential to it’s parent content ● <hgroup> ○ Grouping of h1-h6 elements ○ Used to hide sub headers from outline ● <header> ○ Just what it sounds like ○ Can be used for the page over all and inside sections ● <footer> ○ Just what it sounds like ○ Can be used for the page over all and inside sections ● <time> ○ Indicates a date/time ● <mark>
  • 3. Used for emphasis or highlighting Finally Content or Bye, Bye divs ● Moving towards separation of markup and content. Want our markup to have meaning. ● Divs and ids don’t have inherent meaning ● Use new elements to help weave meaning into the webpage ● Better search results better reuse of content Before <div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day</a> </h2> <p>Lorem ipsum dolor sit amet…</p> </div> Creating an Outline ● <header> ○ Enclosing logos and h1 tags ○ Problem of subheads ● <article> ○ Great for blog post ○ Problem with assembled content ■ HTML 4 only had h1-6 to create outline ■ Makes it difficult with WCMS ■ HTML5 allows you to start over for each section ○ Add a header with h1 tag ○ Could add footer ● <time> ○ <time datetime="2009-10-22" pubdate>October 22, 2009</time> ○ datetime attribute is machine readable ○ between the tags can be anything ○ pubdate ■ Within article it references just that article ■ Outside article means entire document After <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009</time>
  • 4. <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day</a> </h1> </header> <p>Lorem ipsum dolor sit amet…</p> </article> Navigation ● <nav> ○ defines navigation area ○ important for screen readers Before <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> After <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav> Footer ● Can include “fat footers” like on the SMU homepage After <footer> <p>&#167;</p> <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p> </footer>
  • 5. Forms ● placeholder ○ <input name="q" placeholder="Search Bookmarks and History"> ● AutoFocus ○ <input name="q" autofocus> New Input Types ● Email ○ “email” ○ Older browsers treat as text ○ iPhone uses special keyboard ● Web Address ○ “url” ○ iPhone custom keyboard ● Number ○ spinbox ○ iPhone custom keyboard ● Range ● Date, Month, Week, datetime, datetime-local ● Search ● Color picker ○ No support yet Auto Validation ● Works for Opera ● No other browser, yet Specialized Elements Canvas ● Use javascript to draw things in a box ● Importance ○ Can dynamically create graphics on the client side ○ Reduces dependence on flash Video and Audio ● With HTML5 video is baked into browser ● No plugins, like flash, needed ● Problem is formats, they must be built into browsers, creates licensing issues ○ Google announced WebM format on Tuesday. Will likely be the standard
  • 6. h.264 is also supported by most browsers, not Firefox <video width="320" height="240" controls preload> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> Location ● Supported mainly by iPhone and Android ● Firefox supports ● Opt-in Offline ● In html tag you provide a link to a “cache.manifest” file that lists files needed ● When Can I start using it? ● In general, when IE9 comes out. Maybe late 2010 or early 2011 ● Maybe now, if you are developing for mobile devices ● There are work arounds for older browsers The Appendix ● Elements Thrown Away ○ <acronym> ○ <applet> ○ <basefont> ○ <big> ○ <center> ○ <dir> ○ <font> ○ <frame> ○ <frameset> ○ <noframes> ○ <s> ○ <strike> ○ <tt> ○ <u> ○ <xmp> ● New Tags ○ article ○ section
  • 7. aside ○ hgroup ○ header ○ footer ○ nav ○ time ○ mark ○ figure ○ figcaption Websites for reference ●