CSS is an acronym for Cascading Style Sheets, a language used to describe the formatting of a document written in a markup language. Speaking in more simple terms, CSS is used for adding style (fonts, colors, spacing.) to web documents.
There’s also the fact that by using HTML5 code right now your website gets stuck in some kind. July 2009 description: >- Sample layout for HTML5 and CSS3. Beginner’s Guide To: Building HTML5/CSS3. To construct full HTML5/CSS3 web pages you’ll begin to use some much more. Try googling for syntax examples if you.
It can be applied to a variety of XML documents, from HTML and XHTML to SVG. It offers exciting possibilities to create great visual impact with a design. The modular structure of CSS3 allows developers to build content-rich web pages with relatively lightweight code requirements. More striking visual effects, better user interfaces and cleaner pages that load faster, can be achieved more easily than ever before with CSS3. External Links:.
Before you start This tutorial assumes some basic experience with HTML, CSS, and JavaScript. It assumes that you are aware of what an HTML element or tag is, what an attribute means, the basic syntax of HTML markup, the general structure of a Web page, and so on.
In terms of CSS, you are expected to be familiar with element, class, and ID-based selectors, the syntax of a CSS property, and how to include CSS in your Web pages using inline or external stylesheets. Finally, it is assumed that you have some working knowledge of JavaScript, such as what a variable, function, if statement, and for loop is, as well as how to include JavaScript code in your Web pages. If you feel that you need to brush up on any of these technologies before you begin, skip ahead to the section for some useful tutorials and articles that will bring you up to speed on the basics of HTML, CSS, and JavaScript development. About this tutorial Over the past ten years or so, concepts such as Web 2.0, Rich Internet Applications (RIAs), and the Semantic Web have all pushed HTML, CSS, and JavaScript to and beyond their limits, often relying on plug-ins such as Adobe® Flash to power components such as video and audio, as well as highly graphical and interactive applications.
The Adobe Flex development framework, Microsoft®'s Silverlight platform, and JavaFX have all looked to provide support where HTML's weaknesses made developers' lives difficult. With HTML5, however, the markup language is striking back, with full multimedia support, local storage and offline application support, a native 2D drawing API, and a host of new application development APIs, all provided with the intent of proving that HTML, CSS, and JavaScript can provide a rich front end to your Web sites and applications. HTML5 is widely regarded as one of the most important new technologies scheduled to emerge in 2010, and there are already several books being written on the subject, some of which are due to be published as early as March of this year. For many years, the Web has relied on external plug-ins to deliver features that cannot be natively supported by the Web browser, particularly in terms of 2D drawing, animation, and multimedia. The latest versions of the HTML and CSS specification aim to remove the need for these additional browser components to facilitate such features, as well as reduce the amount of JavaScript required (or removing the need for JavaScript entirely, in some cases) for such trivial things as row drag and drop, row striping, and more. Follow along in this tutorial to learn how to take advantage of HTML5.
Prerequisites HTML5 is a relatively young specification, and as a result, browser support is quite limited (at the time of writing). The code presented in this tutorial is built to be as cross-browser compatible as possible, but some features will not work in all browsers. Any features that are currently browser-specific will be clearly identified in the tutorial. To ensure that you can experience all of these new features, it is recommended that you install the latest versions of the following Web browsers on your system when developing HTML5 and CSS3 applications:. You do not need any specific software to write HTML and CSS code; any basic text editor will do (such as Notepad, vi, emacs, and so on.) In this tutorial, it is assumed that the is stored in a directory on your local computer—you do not need to use a Web server or upload the files to a Web hosting service. New features in HTML5 In this section, you will discover some of the great new features that HTML5 has to offer. You will first learn about the new semantic elements that aim to give meaning to the various parts of a modern Web page: headers, footers, navigation bars, side bars, and so forth.
Next, you will learn about the important new element and the 2D drawing JavaScript APIs that you can use to create shapes, text, animations, transitions, and more. Following this, you will see how the new and elements intend on replacing the Web's current dependency on Flash as a multimedia delivery platform.
Next, you will be introduced to the local storage APIs and offline applications support that will further bring Web applications in line with their desktop counterparts in terms of functionality, even when not connected to a network or the Internet. This section is wrapped up with a brief overview of the other new elements, attributes, and APIs that are proposed in the current HTML5 specification. Develop skills on this topic This content is part of a progressive knowledge path for advancing your skills. See Semantic elements The HTML5 specification includes a series of new semantic elements that is used to give some meaning to the various sections or parts of a Web page, such as a header, footer, navigation, and so on.
In previous versions of HTML, you would typically use elements to create these parts, using ID or class attributes to differentiate them from each other. The problem with this is that this has no semantic meaning, as there are no strict rules defined that specify what class names or IDs are to be used, making it extremely difficult for software to determine what the particular area is doing. HTML5 should help alleviate these issues, making it easier for Web browsers to parse the semantic structure of a document.
It is worth pointing out that continuing to use elements in HTML5 is perfectly valid, but in order to future-proof your work, it is recommended that you use semantic elements where relevant. On the other side of the coin, it is also suggested that you avoid using these new elements for purposes other than their intended. For example, the element should not be used for just any group of links; it is intended to surround the main navigation block on the page. The main semantic elements that HTML5 introduces are: This element is used to define a header for some part of a Web page, be it the entire page, an element, or a element. Like the element, this new element defines a footer for some part of a page. A footer does not have to be included at the end of a page, article, or section, but it typically does.
This is a container for the primary navigation links on a Web page. This element is not intended for use with all groups of links and should be used for major navigation blocks only. If you have a element that contains navigation links, you do not need to wrap these links in a element, since the element will suffice on its own. The element is used to define an independent item on the page that can be distributed on its own, such as a news item, blog post, or comment. Such items are typically syndicated using RSS feeds. This element represents a section of a document or application, such as a chapter or a section of an article or tutorial.
For example, the section you are reading now could be surrounded by a element in HTML5. Elements typically have a header, although it is not strictly required.
The header for the section you are reading now would contain the text 'Semantic elements,' for example. This new element can be used to mark up a sidebar or some other content that is considered somewhat separate to the content around it. An example of this might be advertising blocks. In some cases, a page, article, or section may require more than one heading, such as where you have a title and a subtitle. This tutorial, for example, has the title 'Create modern Web sites using HTML5 and CSS3' and the subtitle 'Implementing the canvas and video elements in HTML5.' You could wrap these in an element, using an element for the main title and an element for the subtitle. The sample Web site at the end of this tutorial includes several of these new semantic elements, and I will explain their syntax and use in more detail at that point.
The element The element was originally developed by Apple® for use in Mac OS X Dashboard widgets and in Safari, but was later adopted by Mozilla® and Opera® in their Web browsers. The element has been standardized and included in the HTML5 specification, along with a series of 2D drawing APIs that can be used to create shapes, text, transitions, and animations inside the element. Many believe that the element is one of the most important aspects of HTML5 as it facilitates the production of graphs, interactive games, paint applications, and other graphics on the fly without requiring external plug-ins such as Adobe Flash. The element itself is quite basic, defining the width, height, and unique ID for the object.
The developer must then use a series of JavaScript APIs to actually draw objects on the canvas, typically when the Web page has finished rendering. These APIs allow the developer to draw shapes and lines; apply color, opacity, and gradients; create text; transform canvas objects; and perform animation. The APIs also allow the to be interactive and respond to user input such as mouse events and key events, facilitating the production of games and Web applications on the canvas. You will see an example of the element in action in the sample HTML5/CSS3 Web site later in this tutorial. Playing and In recent years, the popularity of video sharing sites such as YouTube and content delivery platforms like Hulu has seen a huge explosion in the use of the Web for multimedia streaming. Unfortunately, the Web was not built with such content in mind, and as a result, the provision of video and audio has by and large been facilitated by the Flash Video (.flv) file format and the Adobe Flash platform.
HTML5, however, includes support for two new elements, and, which allow Web developers to include multimedia content without relying on the user to have additional browser plug-ins installed. Several browsers, including Mozilla Firefox, Apple Safari, and Google Chrome, have begun supporting these new elements and providing standard browser playback controls, should the user choose to use them. In addition, a set of standard JavaScript APIs has been provided to allow developers to create their own playback controls, should they wish to do so. A key advantage to native multimedia playback is that it theoretically requires less CPU resources, which can lead to energy savings. A key issue with these new multimedia elements, however, is the file formats supported by each browser and the patent licensing issues that go along with the various codecs that these files can be encoded with. Mozilla and Opera want to use the open source Theora video container and codec, which does not require patent licensing for the inclusion of the codecs in the Web browser. On the other hand, Apple and Google are not happy with the quality of Theora, particularly for the delivery of high definition (HD) content on the likes of YouTube.
They prefer the H.264 codec, typically contained in MP4, MOV, or MKV files. The issue is not just with video however, as the same problems reside with audio codecs. The MP3 and AAC formats are restricted by patents, whereas the Vorbis format is not. The problem with Vorbis audio is that it is not in widespread use, as portable media players and many media software applications do not support it. There are many decisions to be made about HTML5 and in the near future, and it will be interesting to see what codecs and formats are facilitated in the final recommendation.
In the meantime, you can try to support all browsers by making video available in a variety of formats and by providing Flash video as a fallback. Let's hope that a final decision is made, and that it is not left to browser vendors to decide which formats to support, as that would essentially render these new elements useless. Again, you will see the element in action later in this tutorial. Local storage and offline applications Web developers have traditionally used cookies to store information on a visitor's local machine, allowing a Web page to read this information back at a later point. While cookies are very useful for storing basic data, they are limited by the fact that Web browsers are not required to keep more than 20 cookies per Web server or more than 4KB of data per cookie (including both name and value). In addition, they are sent to the Web server with every HTTP request, which is a waste of resources.
HTML5 provides a solution for these problems with the Local Storage APIs, which are covered in a separate specification to the main HTML5 document. This set of APIs allows developers to store information on the visitor's computer while remaining reasonably confident that they will still be there at a later date. In addition, the information is accessible at any point (even after the page has rendered) and is not loaded automatically with each HTTP request.
The specification includes same-origin restrictions, which prevent Web sites from reading or changing data stored by other Web sites. Most browsers store Web pages in local cache, allowing them to be viewed even if the user is offline. This works fine for static pages, but it is not available for dynamic content that is typically database-driven, such as Gmail, Facebook, or Twitter. HTML5 provides support for offline applications, where the browser downloads all the files necessary to use the application offline, and when the user uses the application offline, the browser can allow any changes made in the process to be uploaded to the server when they reconnect to the Internet. Web form enhancements If you have created Web applications before, you are more than likely familiar with HTML's set of form controls, some of which are implemented using the element. In HTML 4, the following input types were supported:.
button. checkbox. file. hidden. image. password.
reset. radio. submit. text In addition, there are some other elements that are used in forms such as and.
These form controls provide plenty of function for basic form fields such as name, phone number, and address—like you might find on a contact form. But, the Web as a platform has grown far beyond the stage where HTML forms are used to submit contact forms—now they are used to submit application data for server-side processing. As a result, Web application developers find themselves continually in need of some more sophisticated form controls, such as spinners, sliders, date/time pickers, color pickers, and so on.
In order to tap into these types of controls, developers needed to use an external JavaScript library that provided UI components, or else use an alternative development framework such as Adobe Flex, Microsoft Silverlight, or JavaFX. HTML5 aims to fill some of the gaps left by its predecessor in this space by providing a whole range of new form input types:.
color. date.
datetime. datetime-local. email. month.
number. range.
search. tel.
time. url. week At the moment, support for these new form fields is quite limited. The Mobile Safari browser on the iPhone makes use of some of these new types to change the type of keyboard presented to the user (for example, with the e-mail type, the @ symbol and.com shortcuts will be shown). Also, Opera provides some new widgets for many of these controls, including a spinner for the number type and a calendar date picker for the date-related types. The most widely available type of these new offerings is the range type, which is rendered as a slider by Opera, Safari, and Google Chrome. In addition to these new input types, HTML5 also supports two major new features for form fields.
The first of these is autofocus, which tells a browser to automatically give focus to a particular form field when the page has rendered, without requiring JavaScript code to do so. The second enhancement is the placeholder attribute, which allows the developer to define the text that will appear in a textbox-based control when its contents are empty. An example of this would be a search box where the developer would prefer not to use a label outside the box itself. The placeholder attribute allows the developer to specify text that will show when the value of the control is empty and the control does not have focus. An example of this is shown in. The placeholder attribute in action. You can see the mail icon next to the email field, and the new controls for the datetime field.
Clicking the spinner drop-down field opens Opera's calendar widget, as shown in below. Opera's calendar widget You can also see a rather unattractive slider control as Opera has rendered it.
Frustratingly, however, Opera does not support the border-radius or box-shadow properties, and as a result, neither of these effects has been applied to the form. Let's open it in Safari now to see what these CSS3 effects look like (see ). Web Form enhancements in Safari. That concludes the sample page for this tutorial. In this section, you have used HTML5 and CSS3 to work with the new HTML5 semantic elements, harnessed some of CSS3's pretty new effects, watched video in the browser without any Flash plug-in, seen some new form widgets, and created a smiley face graphic on a canvas using JavaScript APIs.
Summary This tutorial serves as a hands-on introduction to HTML5 and CSS3 development. HTML5 is very much at an early stage of development, and it will be interesting to see how the new features it proposes are adopted by the different browser vendors. At present, of the major browsers, Opera, Safari, Firefox, and Chrome are providing support for more enhancements with each release, and one would hope to see the bulk of HTML5 features supported by the end of 2010. Several issues may stop HTML5 from becoming widespread in the near future, however. The first real issue is the lack of support of it from Microsoft's Internet Explorer, the most widely used Web browser on the market. It is unlikely that developers will be able to test any HTML5 features on IE until the first beta version of IE9 is released.
At least for now, sites developed for HTML5 degrade quite gracefully on IE8, and with a bit of extra work, fallbacks can be put in place to provide workarounds for IE users. Another major issue is the one surrounding video codecs and containers.
The way things stand, the element will not replace Flash video as the video standard for the Web. With different browsers backing different codecs, it's still much easier to use Flash than it is to encode your videos for Theora and H.264. Here's hoping that some kind of breakthrough is made this year on HTML5 video. In summary, HTML5 and CSS3 are exciting standards, and you can start future-proofing your Web sites to be compliant with these new specifications right now. Following the steps outlined in this tutorial, you should be well versed to move forward and explore some of the other interesting features HTML5 has to offer. Related topics. ' (Adriaan de Jonge, developerWorks, November 2007): While the intention of both HTML V5 and XHTML V2 is to improve on the existing versions, the approaches the developers chose to make those improvements is very different.
Sample Html5 Website
And with differing philosophies come distinct results. For the first time in many years, the direction of upcoming browser versions is uncertain.
Uncover the bigger picture behind the details of these two standards. ' (Elliotte Rusty Harold, developerWorks, August 2007): Get an overview of some of the new elements in HTML 5. ' (David Carlisle, developerWorks, December 2009): MathML is a W3C Recommendation defining an XML vocabulary for marking up mathematical expressions. With HTML 5, it will hopefully be possible to place MathML directly on the Web without needing to worry about mime types and server configurations. ' (Frank Ableson, developerWorks, December 2009): This article is the first in a two-part series on developing browser-based applications for iPhone and Android. ' (Ed Dumbill, developerWorks, December 2005): In this two-part series, Edd Dumbill examines the various ways forward for HTML that Web authors, browser developers, and standards bodies propose. This from teaches you everything about HTML.
This teaches you how to use CSS to control the style and layout of multiple Web pages all at once.: Learn how to use the scripting language of the Web.: Read the most recent Editor's Draft for the HTML5 specification. Read excerpts from the upcoming by Mark Pilgrim from O'Reilly Media. is a showcase of sites using HTML5 markup.: See an alphabetically-ordered reference for HTML5 tags.
is loaded with information to help you implement HTML 5 today. The lists all currently supported tags, their descriptions, their attributes, and their support in HTML 4.: Here are the main features of CSS 3 in a handy, printable reference card. has links to various HTML 5 experiments and demos. This demo demonstrates the, using O3D, an open-source web API for creating rich, interactive 3D applications in the browser.: Another excellent introductory article to the world of HTML5.: Everything you need to know about CSS3.: Read the W3C Working Draft of this upcoming specification. looks at the W3C multi-column module. The module's intent is to allow content to flow into multiple columns inside an element. Learn about from Mozilla.org.: This article teaches you about CSS3 transitions and transforms in Opera.
See the SVG and SMIL corollaries to them, too. This from Mozilla.org describes how to implement the element in your own HTML pages. from Apple Developer Central looks at Safari, Dashboard, and WebKit-based applications support for the JavaScript canvas object, which allows you to easily draw arbitrary content within your HTML content. is a free and open video compression format from the Foundation.: O3D is an open-source Web API for creating rich, interactive 3D applications in the browser. Download, and get your hands on application development tools and middleware products from DB2, Lotus, Rational, Tivoli, and WebSphere.
Innovate your next open source development project with, available for download or on DVD.