Report file on Web technology(html5 and css3)


Published on

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Report file on Web technology(html5 and css3)

  1. 1. A Seminar Report On “ Web Technology(HTML5 and CSS3)” By Sachin Kumar(1023910021) Submitted to the Department of Computer Science And Engineering in partial fulfillment of the requirements for the degree of Bachelor of Technology in Computer Science And Engineering ISWARCHAND VIDYA SAGAR INSTITUTE OF TECHNOLOGY AKBARPUR, MATHURA (AFFILIATED TO G.B. TECHNICAL UNIVERSITY, LUCKNOW) April, 2013
  2. 2. DECLARATION I hereby declare that this submission is my own work and that to the best of our knowledge and belief, it contains no material previously published or written by another person nor material which to a substantial extent has been accepted for the award of any other degree or diploma of the university or other institute of higher learning, except where due acknowledgement has been made in the text. Signature: Name : Sachin Kumar Roll No. : 1023910021 Date : 2
  3. 3. CERTIFICATE This is to be certify that seminar Report entitled “Web Technology(HTML5 and CSS3)” which is submitted by Sachin Kumar in partial fulfillment of the requirement for the reward of degree of B.Tech in Stream Of Computer Science & engineering of U.P. Technical University, is a record of the candidate‘s own work carried out by then under my supervision. The matter embodied in this thesis is original and has not been submitted for the reward of any other degree. Date: Supervisor: Signature: Mr . Abhishek Agrawal Computer Science(CSE) 3
  4. 4. ACKNOWLEDGEMENT It gives us a great sense of pleasure to present the report of the B. Tech Seminar undertaken during B. Tech. Third Year. i owe special debt of gratitude to Mr. Abhishek Agrawal, Department of Computer Science & Engineering, Ishwarchand Vidya Sagar Institute of Technology, Mathura for his constant support and guidance throughout the course of our work. His sincerity, thoroughness and perseverance have been a constant source of inspiration for us. It is only his cognizant efforts that our endeavors have seen light of the day. I also do not like to miss the opportunity to acknowledge the contribution of all faculty members of the department for their kind assistance and cooperation during the development of our project. Last but not the least, we acknowledge our friends for their contribution in the completion of the project. Signature: Name : Sachin Kumar Roll No.:1023910021 Date : 4
  5. 5. Abstract Today‘s rich Web applications use a mix of Java Script and asynchronous communication with the application server.This mechanism is also known as Ajax: Asynchronous JavaScript and XML. The intent of Ajax is to exchange small pieces of data between the browser and the application server, and in doing so, use partial page refresh instead of reloading the entire Web page. AJAX (Asynchronous JavaScript and XML) is a powerful Web development model for browser-based Web applications. Technologies that form the AJAX model, such as XML, JavaScript, HTTP, and XHTML, are individually widely used and well known. However, AJAX combines these technologies to let Web pages retrieve small amounts of data from the server without having to reload the entire page. This capability makes Web pages more interactive and lets them behave like local applications. Web 2.0 enabled by the Ajax architecture has given rise to a new level of user interactivity through web browsers. Many new and extremely popular Web applications have been introduced such as Google Maps, Google Docs, Flickr, and so on. Ajax Toolkits such as Dojo allow web developers to build Web 2.0 applications quickly and with little effort. Unfortunately, the accessibility support in most toolkits and Ajax applications overall is lacking. WAI-ARIA markup for live regions presents a solution to making these applications accessible. A popular application that uses Ajax technology is Google Maps. The goal of this project is to develop an extension of Google Maps which includes viewing 360-degree ground-based panorama images. The project includes development of a client-side Ajax engine and user interface in JavaScript, and development of a back-end java servlet that serves panorama data and images. 5
  6. 6. Index Contents Page No. 1. Web Technology 06 2. Markup Languages And Style Sheets 10 3. HTML5 15 4. CSS3 21 References 6
  7. 7. Chapter 1 Web Technology Introduction Web servers and web browsers are communicating client-server computer programs for distributing documents and information, generally called web data, over the Internet. Web data are marked up in the HTML language for presentation and interaction with people in web browsers. Each web server uses an IP address or domain name as well as a port number for its identification. People use web browsers to send data requests to web servers with the HTTP protocol, and the web servers running on server computers either retrieve the requested data from local disks or generate the data on-the-fly, mark up the data in HTML, and send the resulting HTML files back to the web browsers to render. Apache, Tomcat and IIS are popular web server programs, and IE and Firefox are popular web browsers. The term Web 2.0 was coined in 1999 to describe web sites that use technology beyond the static pages of earlier web sites. It is closely associated with Tim O'Reilly because of the O'Reilly Media Web 2.0 conference which was held in late 2004. Although Web 2.0 suggests a new version of the World Wide Web, it does not refer to an update to any technical specification, but rather to cumulative changes in the ways software developers and endusers use the Web. The word technology refers to the making, modification, usage, and knowledge of tools, machines, techniques, crafts, systems, and methods of organization, in order to solve a problem, improve a preexisting solution to a problem, achieve a goal, handle an applied input/output relation or perform a specific function. It can also refer to the collection of such tools, including machinery, modifications, arrangements and procedures. Technologies significantly affect human as well as other animal species' ability to control and adapt to their natural environments. The term can either be applied generally or to specific areas: examples include construction technology, medical technology, and information technology. 7
  8. 8. History Of Web        The term "Web 2.0" was first used in January 1999 by Darcy DiNucci, a consultant on electronic information design (information architecture). In her article, "Fragmented Future", DiNucci writes: The Web we know now, which loads into a browser window in essentially static screenfuls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to appear, and we are just starting to see how that embryo might develop. The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will appear on your computer screen, on your TV set your car dashboard your cell phone hand-held game machines maybe even your microwave oven. Writing when Palm Inc. was introducing its first web-capable personal digital assistant, supporting web access with WAP, DiNucci saw the web "fragmenting" into a future that extended far beyond the browser/PC combination it was identified with. Her vision of the web's future focused on how the basic information structure and hyperlinking mechanism introduced by HTTP would be used by a variety of devices and platforms. As such, her use of the "2.0" designation refers to a next version of the web that does not directly relate to the term's current use. The term Web 2.0 did not resurface until 2002. These authors focus on the concepts currently associated with the term where, as Scott Dietzen puts it, "the Web becomes a universal, standards-based integration platform". John Robb wrote: "What is Web 2.0? It is a system that breaks with the old model of centralized Web sites and moves the power of the Web/Internet to the desktop." In 2004, the term began its rise in popularity when O'Reilly Media and MediaLive hosted the first Web 2.0 conference. In their opening remarks, John Battelle and Tim O'Reilly outlined their definition of the "Web as Platform", where software applications are built upon the Web as opposed to upon the desktop. The unique aspect of this migration, they argued, is that "customers are building your business for you". They argued that the activities of users generating content (in the form of ideas, text, videos, or pictures) could be "harnessed" to create value. O'Reilly and Battelle contrasted Web 2.0 with what they called "Web 1.0". They associated Web 1.0 with the business models of Netscape and the Encyclopædia Britannica Online. For example, Netscape framed "the web as platform" in terms of the old software paradigm: their flagship product was the web browser, a desktop application, and their strategy was to use their dominance in the browser market to establish a market for high-priced server products. Control over standards for displaying content and applications in the browser would, in theory, give Netscape the kind of market power enjoyed by Microsoft in the PC market. Much like the "horseless carriage" framed the automobile as an extension of the familiar, Netscape promoted a "webtop" to replace the desktop, and planned to populate that webtop with information updates and applets pushed to the webtop by information providers who would purchase Netscape servers. In short, Netscape focused on creating software, updating it on occasion, and distributing it to the end users. O'Reilly contrasted this with Google, a company that did not at the time focus on producing software, such as a browser, but instead on providing a service based on data 8
  9. 9.   such as the links Web page authors make between sites. Google exploits this user-generated content to offer Web search based on reputation through its "PageRank" algorithm. Unlike software, which undergoes scheduled releases, such services are constantly updated, a process called "the perpetual beta". A similar difference can be seen between the Encyclopædia Britannica Online and Wikipedia: while the Britannica relies upon experts to create articles and releases them periodically in publications, Wikipedia relies on trust in anonymous users to constantly and quickly build content. Wikipedia is not based on expertise but rather an adaptation of the open source software adage "given enough eyeballs, all bugs are shallow", and it produces and updates articles constantly. O'Reilly's Web 2.0 conferences have been held every year since 2004, attracting entrepreneurs, large companies, and technology reporters. The term Web 2.0 was initially championed by bloggers and by technology journalists, culminating in the 2006 TIME magazine Person of The Year (You). That is, TIME selected the masses of users who were participating in content creation on social networks, blogs, wikis, and media sharing sites. In the cover story, Lev Grossman explains: It's a story about community and collaboration on a scale never seen before. It's about the cosmic compendium of knowledge Wikipedia and the million-channel people's network YouTube and the online metropolis MySpace. It's about the many wresting power from the few and helping one another for nothing and how that will not only change the world but also change the way the world changes. 9
  10. 10. Technology The word technology refers to the making, modification, usage, and knowledge of tools, machines, techniques, crafts, systems, and methods of organization, in order to solve a problem, improve a preexisting solution to a problem, achieve a goal, handle an applied input/output relation or perform a specific function. It can also refer to the collection of such tools, including machinery, modifications, arrangements and procedures. Technologies significantly affect human as well as other animal species' ability to control and adapt to their natural environments. The term can either be applied generally or to specific areas: examples include construction technology, medical technology, and information technology. Technology has affected society and its surroundings in a number of ways. In many societies, technology has helped develop more advanced economies (including today's global economy) and has allowed the rise of a leisure class. Many technological processes produce unwanted byproducts, known as pollution, and deplete natural resources, to the detriment of the Earth and its environment. Various implementations of technology influence the values of a society and new technology often raises new ethical questions. Examples include the rise of the notion of efficiency in terms of human productivity, a term originally applied only to machines, and the challenge of traditional norms. According to above information technology means the making of new things, modifications in things and something that changes human efforts in daily life that is known as technology. In upcoming chapters we will discuss about New technologies in web standards like Html and Css. 10
  11. 11. Chapter 2 Markup Languages And Style Sheets Introduction A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as those found in troff, TeX and LaTeX, or structural markers such as XML tags. Markup instructs the software displaying the text to carry out appropriate actions, but is omitted from the version of the text that is displayed to users. Some markup languages, such as HTML, have pre-defined presentation semantics, meaning that their specification prescribes how the structured data are to be presented; others, such as XML, do not. A widely used markup language is Hyper Text Markup Language (HTML), one of the document formats of the World Wide Web. HTML, which is an instance of SGML (though, strictly, it does not comply with all the rules of SGML), follows many of the markup conventions used in the publishing industry in the communication of printed work between authors, editors, and printers. A web style sheet is a form of separation of presentation and content for web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external style sheet file using a style sheet language such as CSS or XSLT. This design approach is identified as a "separation" because it largely supersedes the antecedent methodology in which a page's markup defined both style and structure. 11
  12. 12. HTML(Markup Language) Hyper Text Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML markup. History(HTML)      In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Berners-Lee in late 1991. Berners-Lee considered HTML to be an application of SGML. It was formally defined as such by the Internet Engineering Task Force (IETF) with the mid-1993 publication of the first proposal for an HTML specification: "Hypertext Markup Language (HTML)" InternetDraft by Berners-Lee and Dan Connolly, which included an SGML Document Type Definition to define the grammar. After the HTML and HTML+ drafts expired in early 1994, the IETF created an HTML Working Group, which in 1995 completed "HTML 2.0", the first HTML specification intended to be treated as a standard against which future implementations should be based.Further development under the auspices of the IETF was stalled by competing interests. Since 1996, the HTML specifications have been maintained, with input from commercial software vendors, by the World Wide Web Consortium (W3C).[12] However, in 2000, HTML also became an international standard (ISO/IEC 15445:2000). HTML 4.01 was published in late 1999, with further errata published through 2001. In 2004 development began on HTML5 in the Web Hypertext Application Technology Working Group (WHATWG), which became a joint deliverable with the W3C in 2008. 12
  13. 13. CSS(Cascading Style Sheet) Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speechbased browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). History(CSS)        Style sheets have existed in one form or another since the beginnings of SGML in the 1980s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. To improve web presentation capabilities, nine different style sheet languages were proposed to the World Wide Web Consortium's (W3C) www-style mailing list. Of the nine proposals, two were chosen as the foundation for what became CSS: Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP). CHSS, a language that has some resemblance to today's CSS, was proposed by Håkon Wium Lie in October 1994. Lie's proposal was presented at the "Mosaic and the Web" conference (later called WWW2) in Chicago, Illinois in 1994, and again with Bert Bos in 1995.Development of HTML, CSS, and the DOM had all been taking place in one group, the HTML Editorial Review Board (ERB). Early in 1997, the ERB was split into three working groups: HTML Working group, chaired by Dan Connolly of W3C; DOM Working group, chaired by Lauren Wood of SoftQuad; and CSS Working group, chaired by Chris Lilley of W3C. The CSS Working Group began tackling issues that had not been addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997. It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started in 1998, is still under development as of 2009. 13
  14. 14.  In 2005 the CSS Working Groups decided to enforce the requirements for standards more strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors and CSS 3 Text were pulled back from Candidate Recommendation to Working Draft level. 14
  15. 15. Chapter 3 (HTML5) Features         New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications Introduction HTML5 is a markup language for structuring and presenting content for the World Wide Web(Web Pages) and is a core technology of the Internet. It is the fifth version of the HTML(Hyper Text Markup Language) standard. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML. Following its immediate predecessors HTML 4.01 and XHTML 1.1, HTML5 is a response to the observation that the HTML and XHTML in common use on the World Wide Web are a mixture of features introduced by various specifications, along with those introduced by software products such as web browsers, those established by common practice, and the many syntax errors in existing web documents. It is also an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalises the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In December 2011, research firm Strategy Analytics forecast sales of HTML5 compatible phones will top 1 billion in 2013. In particular, HTML5 adds many new syntactic features. These include the new <video>, <audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content (that replaces the uses of generic <object> tags) and MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header> and <nav>, are designed to enrich the semantic content of documents. New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and Document Object Model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid 15
  16. 16. documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents. Why HTML?    In previous version HTML have some limitations. To cover them a new version of HTML was introduced that was known as HTML5. There are many features in HTML5 which will attract us in coming future. Now HTML5 have some benefits, some of them are:- 1. Accessibility HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them. ARIA is a W3C spec that is mainly used to assign specific ―roles‖ to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn‘t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can‘t be over-ridden making assigning roles a no brainer. For a more in depth discussion on HTML5 and ARIA please visit the WAI. 2. Video and Audio Support Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5′s video and audio tags basically treat them as images; <video src=‖url‖/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=‖url‖ width=‖640px‖ height=‖380px‖ autoplay/>. 3. Doctype <!DOCTYPE html> Yup that‘s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6. 4. Cleaner Code 16
  17. 17. If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. With HTML5 you can finally cure your ―divitis‖ and ―classitis‖ by using semantic and HTML headers to describe your content. Previously you would generally just use div‘s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier. 5. Smarter Storage One of the coolest things about HTML5 is the new local storage feature. It‘s a little bit of a cross between regular old cookies and a client-side database. It‘s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it‘s essentially a client side data base you don‘t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.Local storage is great for many things, but it‘s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user‘s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user‘s previous application state. 6. Better Intraction Awe, we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash. Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here‘s a quick list of native APIs:  Drag and Drop (DnD)  Offline storage database  Browser history management  document editing  Timed media playback 7. Game Development Yup, that is correct, you can develop games using HTML5′s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you‘ve built Flash games before, you‘ll love building HTML5 games. 17
  18. 18. 8. Cross Browser Support Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn‘t mean they can use all the new HTML5 tags and goodies. 9. Mobile, Mobile, Mobile Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:    Viewport: allows you to define viewport widths and zoom settings Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device 10. It’s The Future, GET WITH IT The number one reason why you should start using HTML5 today is this: it‘s the future, start using it now so you don‘t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it‘s not scary, it‘s not anything you really need to figure out or relearn — if you‘re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it‘s current capability? You really don‘t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I haven‘t even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too. 18
  19. 19. New Tags In HTML5 Tag Use 1 <article> Specifies an article 2 <aside> 3 <audio> Specifies content aside from the page content Specifies sound content 4 <bdi> 5 <canvas> 6 <command> 7 <data> 8 <datagrid> 9 <datalist> 10 <details> 11 <embedded> 12 <eventsource> 13 <figcaption> 14 <figure> 15 <footer> 16 <header> 17 <hgroup> 18 <keygen> 19 <mark> 20 <meter> 21 <nav> 22 <progress> 23 <ruby> 24 <rp> 25 <rt> 26 <section> For bi-directional text formatting Define graphics Specifies a command Allows for machine-readable data to be provided Allows for an interactive representation of tree, list, or tabular data Specifies an "autocomplete" dropdown list Specifies details of an element Specifies external application or interactive content Specifies a target for events sent by a server Specifies caption for the figure element. Specifies a group of media content, and their caption Specifies a footer for a section or page Specifies a group of introductory or navigational aids, including hgroup elements Specifies a header for a section or page Generates a key pair Specifies marked text Specifies measurement within a predefined range Specifies navigation links Specifies progress of a task of any kind Specifies a ruby annotation (used in East Asian typography) Used for the benefit of browsers that don't support ruby annotations Specifies the ruby text component of a ruby annotation. Specifies a section 19
  20. 20. 27 28 <summary> 29 <time> 30 <track> 31 <video> 32 Specifies media resources Specifies a summary / caption for the <details> element Specifies a date/time Specifies a text track for media such as video and audio Specifies a video Specifies a line break opportunity for very long words and strings of text with no spaces. <source> <wbr> 20
  21. 21. HTML5 VS. HTML4 HTML4 Developed in 1990. It has loose syntax. Like <p> etc. It used common structures. HTML5 Introduced in 2011 and Still developing. Has not loose syntax. HTML5 is developed keeping in mind the usage of modern websites. New tags have been added: ‗header‘ for headings; ‗nav‘ for website navigation block; ‗footer‘ for bottom lines in web page; ‗section‘, ‗article‘ or ‗aside‘ for particular sections such as blogs, etc. HTML5 is attempting to solve this, so that browser developers can standardize and save time and money. It is also more flexible to handle inaccurate syntax, and it specifies the rules related to the parsing and lexing. HTML4 supports what is called ‗tag soup‘, this is, the ability to write malformed code and have it corrected into a valid document. But the problem is that rules for doing this aren‘t written anywhere, so developers just have to test malformed documents in various browsers (especially Internet Explorer) to handle any errors. Also, HTML4 lacks rules for parsing, which makes it more difficult to handle errors. HTML4 is the markup language used for HTML5 is not yet an official standard, all writing websites worldwide, and it is supported major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) support most of its by all web browsers. features. HTML4 needed external software, like Flash, HTML5 can embed video on web-pages without using any special software. It is also to play videos and multimedia content. said to be capable of playing video games (8bit) on the browser itself. 21
  22. 22. HTML5 VS. FLASH While HTML5 is often compared to Flash, the two technologies are very different. Both include features for playing audio and video within web pages, and for using Scalable Vector Graphics. HTML5 on its own cannot be used for animation and interactivity - it must be supplemented with CSS3 or Javascript. There are many Flash capabilities that have no direct counterpart in HTML5. See Comparison of HTML5 and Flash. Although HTML5 has been well known among web developers for years, it became the topic of mainstream media around April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash" where he concludes that "[Adobe] Flash is no longer necessary to watch video or consume any kind of web content" and that "new open standards created in the mobile era, such as HTML5, will win". This sparked a debate in web development circles where some suggested that while HTML5 provides enhanced functionality, developers must consider the varying browser support of the different parts of the standard as well as other functionality differences between HTML5 and Flash.In early November 2011 Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML 5. HTML5 can be used as an alternative to Adobe Flash. Both include features for playing audio and video within web pages, and integrated vector graphics are possible with both. "HTML5" in this article sometimes refers not just to the HTML5 specification, which does not itself define ways to do animation and interactivity within web pages, but to HTML5 and related standards like JavaScript or CSS 3. Animation using JavaScript is also possible with HTML 4. Usage statistics(FLASH) Flash Player usage statistics according to Adobe:     85% of the most-visited web sites use Flash, 75% of web video is viewed using the Flash Player, 98% of enterprises rely on the Flash Player, and 70% of web games are made in Flash. 22
  23. 23. Usage statistics(HTML5) Now a days HTML5 slowly-slowly covers flash market. According to use of HTML5 in web projects day by day. This statement depend on the survey of which was started from july 2010 and still running onwards. 23
  24. 24. Advantages and Disadvantages of HTML5  Advantages Basically HTML5 has it‘s many new syntactical features, which include the <video>, <audio>, and <canvas> elements, as well as the integration of SVG content. Due to these new elements, it will be very easy to integrate multimedia and graphical content to web without using flash and third party plugins. Some of advantages are  Mutuality Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video, play music and Social Network sites like Facebook and Twitter into the websites. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programs as the functionality is built into the browser.  Consistency As websites adopt the new HTML5 elements we will see more greater consistency in terms of the HTML used to code a web page on one site compared to another. This will make it more easier for designers and developers to immediately understand how a web page is structured.  Client-Side Database While cookies have been used to track unique user data for years, they have serious disadvantages. The largest flaw is that all of your cookie data is added to every HTTP request header. This can end up having a measurable impact on response time. So a best practice is to reduce cookie size. With HTML5 we can do better by using sessionStorage and localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database, but enables you to store structured data, temporarily.  Geolocation With help of Geolocation any one can find out where you are in the world and sharing that information with people. There is different ways to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky. But The new HTML5 geolocation APIs make location, whether generated via GPS or other methods, directly available to any HTML5-compatible browser-based application. 24
  25. 25.  Disadvantages All we are using HTML5 today, but the reality is that there's a few problems that prevent the language from use in modern websites. Some of them are  Browser Support The main problem with HTML5's acceptance is that only modern browsers support it. By modern, I mean almost everything except for Internet Explorer. The new version...IE9 offers excellent support, but as of this writing it's not quite out of beta. Even if it were, the majority of people will still use older versions of IE for quite some time. There are things you can do to make the language play nice with older browsers, but none of them are perfect.  The Language is a Spec Another problem is that although parts of the language are very stable, the language itself is considered a work in progress, so technically, any of the elements could change at any time. The language is not expected to be completed for several years, which complicates things further. Thankfully, a lot of the language is considered stable and ready to use. I think it's such a great move forward, that you should develop a Graceful Degradation approach to writing your HTML. That simply means writing HTML that will work with older browsers, but will offer users with more modern browsers an enhanced experience.  Media Licensing Issue Another ugly fact about HTML5 is that because of licensing issues, rich media has to be compressed in multiple formats in order to be compatible with most browsers. So you'll probably use something like mp3 audio for webkit browsers (safari, chrome), and ogg for Mozilla (Firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be resolved soon. 25
  26. 26. Chapter4 (CSS3)     Latest Standard for Cascading Style Sheet. New ways for fantastic design. Added new modules. Completely backwards compatible. Introduction       Very briefly, CSS stands for ‗Cascading Style Sheets‘ and is a mark-up language for altering and giving style to a website or elements within a website. The 3 represents the next generation/version of style sheet language. It is very important to learn that while it is fun to learn and play with CSS3, it is still not yet fully supported in current browsers. This means that if you are to incorporate CSS3 in a live website, it would be a good idea to make sure there is fallback code for the browsers that are struggling to support it. CSS3 is short form for Cascading Style Sheet Version 3. Earlier there was version 2(CSS2). CSS3 added some new features. CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2. CSS3 offers a huge variety of new ways to create an impact with your designs, with quite a few important changes. Using CSS3 keyframe animations, developers can create smooth, maintainable animations that perform relatively well and that don‘t require reams of scripting. It‘s just another way that CSS3 is helping to solve a real-world problem in an elegant manner. CSS3 is a sprawling specification that attempts to modularize CSS and both extend and improve on previous CSS versions. Web professionals looking to make a determination of what to pay attention to in the future of CSS3 are likely put off by the list of various components found at 26
  27. 27. Why CSS3?    In previous version CSS have some limitations. To cover them a new version of CSS was introduced that was known as CSS3. There are many features in CSS3 which will attract us in coming future. Now CSS3 have some benefits, some of them are:- 1. CSS3 Borders CSS3 contain following border properties:    border-radius box-shadow border-image With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border without using a design program, like Photoshop. The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3. Since first being announced in 2005 the border-radius property has come to enjoy widespread browser support (although with some discrepancies) and, with relative ease of use, web developers have been quick to make the most of this emerging technology. 2. CSS3 Text Effects CSS3 contain following background properties:   background-size background-origin CSS3 contains several new background properties, which allow greater control of the background element. CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list. The property adds new functionality to CSS allowing designers to specify the size of background images using either lengths, percentages, or by using one of two keywords; contain or cover. 27
  28. 28. 3. CSS3 Text Effects CSS3 contain following Text Effect properties:  text-shadow  word-wrap The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that‘s quick and easy, yet visually impressive. To give a website a visually impressive look, designers put emphasis on neat and stylish typography. For years designers have depended on Photoshop, but CSS3 is a revolution with easy-to-create text effects. Almost all of the major browsers now support most of the CSS3 features so that‘s another reason for mastering the new techniques. 4. CSS3 Fonts Before CSS3, web designers had to use fonts that were already installed on the user's computer. With CSS3, web designers can use whatever font he/she likes. When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.  Your "own" fonts are defined in the CSS3 @font-face rule. 5. CSS3 2D Transforms A transform is an effect that lets an element change shape, size and position. CSS3 contain following 2D Transforms properties:  translate()  rotate()  scale()  skew()  matrix() 6. CSS3 3D Transforms CSS3 allows you to format your elements using 3D transforms. CSS3 contain following 3D transforms properties:   rotateX() rotateY() 7. CSS3 Transitions With CSS3, we can add an effect when changing from one style to another, without using Flash animations or Java Scripts. 28
  29. 29. 8. CSS3 Animations With CSS3, we can create animations, which can replace animated images, Flash animations, and Java Scripts in many web pages New Property and Rules in CSS3 S.No Property 1 border-radius 2 border-image 3 border-shadow 4 Background-size 5 Background-orizin 6 7 Text-shadow Word-wrap 8 @font-face 9 Translate( ) 10 Rotate( ) 11 Scale( ) 12 Skew( ) 13 Matrix( ) 14 rotateX( ) 15 RotateY( ) 16 Transition 17 @keyframes 18 Animation Use the border-radius property is used to create rounded corners. border-image property you can use an image to create a border. the box-shadow property is used to add shadow to boxes. The background-size property specifies the size of the background image. The background-origin property specifies the positioning area of the background images. the text-shadow property applies shadow to text. the word-wrap property allows you to force the text to wrap. Your "own" fonts are defined in the CSS3 @fontface rule. With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position. With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise. With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis). With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines. The matrix() method combines all of the 2D transform methods into one. With the rotateX() method, the element rotates around its X-axis at a given degree. With the rotateY() method, the element rotates around its Y-axis at a given degree. CSS3 transitions are effects that let an element gradually change from one style to another. The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style. animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect. 29
  30. 30. Browser Comptability CSS3 is not yet a W3C standard, but the major browsers support many of the new properties. The browser support for some properties are given below. Some Browsers which don’t compatible with css? For those browsers we fix bug. For some famous browsers which are given below Browser Name       Bug Fix/Hacks Mozilla FirefoxGoogle ChromeOpera MiniRockmaltInternet ExplorerSafari- -moz-webkit-0-k-ms-webkit- 30
  31. 31. Why and How To Use Fix Bugs? For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 because of the lack of full crossbrowser support for this technology. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. But on the other hand many features are there in css3 which forced us to use css3 now. But only one disadvantage (ie. Cross browser compatibility) stops us. But for only one disadvantage we don‘t stop using this. So for coming up on cross browser compatibility we use Fix Bugs. Those browser those don‘t have Accepted property then we use adding bug in front of property in css3 rules. For ex. If we want to use Border radius in any web page, or it‘s a property of CSS3 which is not still w3c standard. So if in case any browser like Mozilla firefox don‘t support this property then we use fix bugs in property. Simple syntax:{ Border-radius:10px; } Fix bugs syntax:- (for Mozilla Firefox) { -moz-radius:10px; } If in case Code first is not run in Mozilla firefox than we use second code that will surely execute.Css3 is a upcoming standard for the Cascading Style Sheet and covering lot of fun that‘s why we can not wait for w3c to launched fully version that‘s why we found many new tricks to use css3. Fix Bugs/Hacks is one of them. 31
  32. 32. CSS VS CSS3      We believe in the power, speed and ―update-ability‖ of CSS3. Not having to load background images as structural enhancements (such as PNGs for rounded corners and gradients) can save time in production (i.e. billable hours) and loading (i.e. page speed). At company, we‘ve happily been using CSS3 on client websites for over a year now, and we find that implementing many of these properties right now is the most sensible way to build websites. Which is better than CSS. CSS3 is an advanced version of CSS. It is still under development mode but many browsers have started supporting it long back. Newer versions of Mozilla, Chrome, Opera support CSS3 with some modifications in the code for each one of them. For using css3 in browsers we should use some modifications in code. While using CSS we don‘t have to use Modifications in code. In the mid- to late nineties and into the early part of this century, most web designers and developers were using a feature of HTML called tables to maintain the ―look‖ or their websites, and the result was that HTML files were often very large and hard to maintain. With CSS, however, developers could keep design and data separate, which made for clean, easy to maintain HTML and faster load times, since the file sizes were smaller. CSS3 promises similar results by offering features that could only be accomplished through the use of images by using traditional CSS. The border-radius property is an excellent example. While CSS allows developers to add a border to box elements, developers had to create an image that matched exactly the size and shape of the CSS box in order to get the look of rounded corners. The creation of these images increases development time, and calling these images from the server means slower load times for users and higher server strain. One drawback of using CSS3 is that while the latest releases for all the major browsers support CSS3, many users do not use the current release. Site owners opting for CSS3 design should take care to ensure that while adding flare, they do not create a ―broken‖ site for users without CSS3 support. 32
  33. 33. Advantages and Disadvantages of CSS3 ADVANTAGES Using style sheets Long before the development of the concept of Cascading Style Sheets to refer to CSS3 colors, fonts, backgrounds, borders, etc. the HTML-markup was used. But with the introduction of Cascading Style it became possible to ask in a separate style sheet, causing users to have easy and convenient tool. Related to this the another advantage of CSS3 – it is easier to make changes: You can modify individual modules, which after testing are integrated with the overall system. Differentiation and isolation The concept of CSS3 allows you to separate presentation from structure. For example, before heading to indicate the center of the page in Arial bold blue color the HTML-markup was used like this: <h2 align="center"> <font color="blue" size="+6" face="Arial"> <i> Usage of CSS </ i> </ Font> </ H2> Layout multiple columns Module is based on multiple columns (Multi-Column Module)/ It is an important function of CSS3, which allows to place text in multiple columns. The advantage for users is that while reading the text in multiple columns you do not need to scroll up and down and side to side, the text is easy to read, it is not too short lines and, above all, everything can be placed on the same page that layout makes a convenient and economical. Flexibility in use The concept of cascading style sheets allows you to attach information to CSS-style in a separate document or as an attachment within a HTML-document. You can also import multiple style sheets anywhere. Users can specify an alternative style sheets, choosing between them as needed. 33
  34. 34. DISADVANTAGES Browser Support Different browsers will render CSS3 layout differently as a result of browser bug or lack of support for CSS3 features if CSS3 "hacks" was not implemented in browser. It‘s the main disadvantage of css3. CSS3 still not providing the browser support. For covering over it we have use some modifications and some hacks, because w3c still not fully launched CSS3. It‘s sill developing that‘s the biggest disadvantages of it. 34
  35. 35. REFERENCES 35