Your SlideShare is downloading. ×
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Introduction – Features and Resources for HTML5

794

Published on

HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can …

HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
794
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 Introduction – Features and Resources for HTML5 What is HTML5? HTML5 is the fifth revision and newest version of the HTML standard. It offers new features that provide not only rich media support, but also enhance support for creating web applications that can interact with the user, his/her local data, and servers, more easily and effectively than was possible previously. Because HTML5 is still being developed, changes to the specifications are inevitable. Therefore, not all of its features are supported by all browsers yet. However, Gecko, and by extension, Firefox, has very good initial support for HTML5, and work continues toward supporting more of its features. Gecko began supporting some HTML5 features in version 1.8.1. You can find a list of all of the HTML5 features that Gecko currently supports on the main HTML5 page. HTML5 is the successor of HTML 4.01, released for the first time in 1999. The internet has changed significantly since 1999 and it seemed like the creation of HTML5 was necessary. The new markup language was developed based on pre-set standards:       New features should be based on HTML, CSS, DOM, and JavaScript. The need for external plugins (like Flash) needs to be reduced. Error handling should be easier than in previous versions. Scripting has to be replaced by more markup. HTML5 should be device-independent. The development process should be visible to the public. A Brief History of HTML In addition to this official work on HTML, the browsers have been making their own additions to HTML. Some changes were eventually adopted into W3C HTML Recommendations; others remain proprietary coding aspects that only the individual browsers recognize. The browsers' versions of HTML changed, too, in a game of marketing and programming one-upmanship, hoping to lock Web developers into using one browser or the other exclusively. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 2. Timelines:                       Creation of language in conjunction with Berners-Lee's WWW program - Oct.->Dec. 1990 Specification for HTML released on the Internet - Summer, 1991 Draft defining HTML released (Internet draft later expired) - June, 1993 Initial document for 'HTML 2.0' released - April, 1994 Draft for HTML 2.0 cleaned up and released - July, 1994 HTML 2.0 draft further refined with plans to release as an RFC - February, 1995 HTML 2.0 (RFC 1866) approved as a proposed standard - September, 1995 HTML 3.0 draft released (later expired) - March, 1995 HTML 3.2 draft released - May, 1996 HTML experimental DTD 'Cougar' released - July, 1996 W3C recommendation for HTML 3.2 (Wilbur) - January, 1997 HTML 4.0 draft (evolved from Cougar) released - July, 1997 HTML 4.0 becomes W3C proposed recommendation - November, 1997 HTML 4.0 becomes W3C recommendation - December, 1997 HTML 4.0 revised and certified W3C recommendation - April, 1998 Draft released for 'Reformulating HTML in XML' (codename Voyager) - December, 1998 XHTML 1.0 first working draft released - January, 1999 XHTML 1.0 becomes W3C Proposed Recommendation - August, December 1999 XHTML 1.1 first working draft released - September, 1999 XHTML 1.0 becomes W3C Recommendation - January, 2000 XHTML 1.1 becomes W3C Proposed Recommendation - April, 2001 XHTML 1.1 becomes W3C Recommendation - May, 2001 What HTML is today The standards for HTML are currently being developed by a worldwide industry consortium known as the W3C. This work was carried out previously by the IETF. The W3C places several requirements on HTML: "The document format should be, as far as practical, backwards compatible with existing HTML documents. It should support both paged and scrolling layout models...A simple, scaleable document format that can be used for information exchange on virtually any platform." The W3C goes on to list the proposed range of these platforms, which include:     Graphical User Interfaces, such as Windows, Macs and X11/Unix Text only systems, such as VT-100 terminals Text to Speech devices Rendering to Braille Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 3. The Success of HTML In hindsight, the following quote by Berners-Lee from the original CERN proposal shows how far things have progressed in less than a decade: "In 10 years, there may be many commercial solutions to the problems above, while today we need something to allow us to continue." The WWW and HTML solutions that Berners-Lee created have evolved into that solution. HTML is now becoming the primary document format of choice not only on the Web, but also elsewhere in both personal and commercial uses. Despite its current limitations, HTML has become the most popular and widely used rich text format ever. What’s new? HTML5 was created to make the coding process easier and more logical. You will see a bit later that many syntaxes are now deprecated and soon to be kicked out through the back door. The unique and impressive features HTML5 comes with are in the multimedia department. Many of the features it comes with have been created with the consideration that users should be able to run heavy content on low-powered devices. The syntactic features include the new <video>, <audio> and <canvas> elements, but also integration of vector graphics content (what we knew before as being the <object> tags). This means that multimedia and graphic content on the web will be handled and executed easier and faster, without the need of plugins or APIs. There are a bunchload of new syntaxes added, but below I will name and describe the most important. The rest of them can always be found in W3C’s HTML5 section.         <article> – this tag defines an article, a user comment or a post, so an independent item of content <aside> – the aside tag marks content aside from the page content, which for example could be a lateral sidebar <header>, <footer> – you won’t need to manually name IDs for headers and footers, as now you have a pre-defined tag for them <nav> – the navigation can now be placed in the markup in between the nav tags, which will automatically make your lists act like navigation <section> – this is another important new syntax, as it can define any kind of sections in your document. It works pretty much like a div which separates different sections. <audio>, <video> – these two obviously mark sound or video content, which will now be easier to run by devices. <embed> – this new tag defines a container for interactive content (plugin) or external application <canvas> – the canvas tag is quite exciting, as it allows drawing graphics via scripting (mostly JavaScript, but some others can be employed as well) Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 4. What is important to remember is that the new HTML5 tags do not always work as the ones before. For example, the header and footer tags will not only mark the start and the end of a page, but also the start and the end of each section you have. This means that these two tags are likely to be used more than once in the whole page. In the illustration below can you see what I mean. The following tags from HTML 4.01 are now removed from HTML5, therefore browsers do not offer support for them anymore. This means that it is a good idea to go back to your HTML pages and check for them, as they might disrupt the design in the latest browsers. <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> Things to know about HTML5 It is crucial to remember that HTML5 is built on the success of its previous version, HTML 4.01, which is undoubtedly the best version ever. In order to be better at using HTML5 you do not need to forget everything about the previous version. You are not learning a totally new language here. Keep your beloved syntaxes and keep the way you used to format your code, only remember that now you need to build upon the coding skills you already have. In case you have absolutely no knowledge of HTML and you want to start now, I advise you to start with HTML 4.01 and only when you master it move onto HTML5. Starting with the latest version is like learning to run before learning to walk – which is impossible as far as I know. HTML 4.01 still contains the basics of HTML5, therefore in my opinion you should have strong knowledge of former HTML versions in order to be able to master HTML5. The upside of learning HTML5 now is that the new markup language works right away. You can basically do whatever you want with it today – and it is supported in all major browsers. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 5. From video to geolocation, local storage and microdata annotations, HTML5 is something we need to start using. If you are in the design business, sticking with HTML 4.01 is a mistake, because everybody will move on while you will remain behind. HTML5 is definitely here to stay. It is created to sustain today’s necessities and especially because it is in continuous development, it will be able to sustain the changes that will happen in the industry for quite some time. One of the reasons behind HTML5 taking so much time to develop is because the W3C had to analyze lots of factors and think of the future. They took their time and finally delivered something that can easily be labelled as a high-quality product. Best and Trendy HTML5 Website in 2014  Heart of the Arctic A 72,000px wide site where users go on an expedition through 4 detailed environments and gather 56 animated collectables to restore balance to Arctic life. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 6.  Wanda Print Nested in the art network of WANDA-PRODUCTIONS, Our talents are creatively driven to perform fresh and striking digital images. We integrates art buying support, production coordination, casting, location scouting, booking, to post production delivery.  Soyuz Coffee Roasting Soyuz Coffee truly believes that coffee is much more than a brewed beverage as we know it, it’s a way of living! And exactly this coffee experience is something Skybox created via the re-invented... Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 7.  Parrot - Flower Power Discover Parrot Flower Power, the first intelligent wireless sensor fitted with Bluetooth Smart Technology which, through a dedicated application, helps you look after your plants.  STAINSBEAUPAYS STAINSBEAUPAYS™ is an infinite interactive movie made by 15 year old teenagers from Paris suburb. Jump on the wheel and enjoy the trip ! Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 8.  Melanie F Melanie.F is a French brand that manufactures slippers for children. She introduces you her new collection 2013/2014.  Suffolk's bold new tourism site The website, and its Take me to Suffolk campaign and Facebook app, tear up the rule book for British tourism websites. Site visitors explore, play and discover the joy of a break in this... Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 9.  Love Carmen Rose Love Carmen Rose is a photography studio in Fort Worth, Texas  Merry Christmallax Christmas greeting one pager that takes you from wire-framing stage to polish as you scroll down the page. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 10.  Alee Foroughi - Portfolio My name is Alee Foroughi. I'm CEO & Designer at Swan Design Studio. I love design and it shows in my works.  Mehdi Benyounes, CEO Rscollab Site official de Mehdi Benyounes : CEO Rscollab / Lead developer / Web designer Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 11. 10 Top HTML5 Resources Want to learn HTML? Or hone your skills in the computer language? Then check out these top resources. The web is a wonderful thing, brimming with resources and tutorials for people wanting to learn HTML5. But, sometimes, too much choice can be confusing, so we've picked 10 top resources that will really help you get to grips with it. 01. HTML5 Rocks HTML5 Rocks is an awesome resource for for developers looking to put HTML5 to use today, including information on specific features and when to use them in your apps. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 12. 02. HTML5 & Friends HTML5 & Friends on the Mozilla Developer Network offers a great selection of information, demonstrations, tools and resources on the programming language. The web page is clean and extremely easy to navigate, using symbols, lists and a simple grid to lead to you the desired information. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 13. 03. HTML5 Cheat Sheet The guys over at Smashing Magazine released this handy, printable HTML5 cheat sheet, which lists all currently supported tags, their descriptions, attributes and their support in HTML 4. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 14. 04. 55 amazing examples of HTML5 We couldn't make a list of awesome HTML5 resources without including this compliation we put together. If you want to see exactly what this programming language is capable of, look no further. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 15. 05. Introduction to HTML5 from Mozilla The Mozilla Developer Network is a fantastic resource for web developers. Organized by topics, it provides documentation about extensions, themes, applications, frameworks and technologies - including an excellent in-depth section on HTML5. Not only does it discuss the fundamentals of HTML5, there's also a section which points you in the direction of other online resources on the subject. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 16. 06. HTML5 Doctor For everything HTML, head over to HTML5 Doctor where you will find articles on everything you might need as well as an awesome 'Ask the Doctor' Q&A section, in which top advocates of the technology, including Bruce Lawson, Remy Sharp, and Rick Clark, answer on a regular basis. A brilliant resource. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 17. 07. HTML5 for Web Designers Web developer Jeremy Keith has taken the 900-page, hard-to-read HTML5 spec and created a much more user-friendly 85-page version with HTML5 for Web Designers. Among the pages, Keith cuts to the chase, explaining what accessible, content-focused standards-based web designers and front-end developers need to know clearly and with easy to understand, practical examples. You have to pay for it, but the e-version is a steal at just $9. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 18. 08. Dive into HTML5 Dive into HTML5 by Mark Pilgrim is a fantastic resource to help you really get to grips with the basics of HTML5. In depth and detailed, this online book will help you get to grips with the semantics of new elements, playing video without Flash, local storage, offline apps, manipulating browser history and much more. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 19. 09. HTML5 Please HTML5 Please is an awesome HTML5 tool, giving users the power to "use the new and shiny responsibly". This great resource helps you choose and look up features of HTML5 you can use and provides advice in making decisions about how to implement the computer language into your projects. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.
  • 20. 10. net If you're looking for HTML5 news, advice and tips, our print and tablet publication net magazine is a fantastic place to start. Here you'll find articles written by experts in the field as well as lots of awesome examples of HTML5 in action. Copyright © 2014 Team Mango Media Private Limited. All rights reserved.

×