3:22 AM
CR Zaman
Introduction
- HTML5 is the proposed new standard for HTML 4.01, XHTML 1.0 and DOM (Document Object Model).
- It was developed by World Wide Web Consortium (W3C).
It aims to reduce the need for proprietary plug-in-based Rich Internet Application (RIA) technologies such as:
- Adobe Flash
- Microsoft Silverlight
- Apache Pivot
- Sun JavaFX
What is HTML?
- HTML stands for Hyper Text Markup Language.
- Text: A sequential form of characters in human understandable form.
- Hyper Text: Text which is not constrained to be linear (because it contains links to other text).
- Markup: It refers to the sequence of characters or other symbols that are inserted in certain places, i.e. a text or word processing file, which can be displayed.
- These are often called "TAGS".
What is HTML5?
- HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet.
- A more powerful web & Amore powerful apps.
- HTML5 = HTML + CSS3 + JavaScript APIs
History of HTML5
- 1991 - HTML
- 1994 - HTML 2
- 1996 - CSS 1 + JavaScript
- 1997 - HTML4
- 1998 - CSS 2
- 2000 - XHTML 1
- 2002 - Table less web design
- 2005 - AJAX
- HTML5 was first started by Mozilla, Apple, and Opera under a group called the WHATWG (Web Hypertext Application Technology Working Group).
- In 2006, W3C showed an interest in HTML5 and in 2007 they created a working group to work on HTML5, which is still under development.
How to Run an HTML File
Step 1: To run an HTML file on your computer you must have a browser.
Step 2: If you made an HTML file in notepad or any other text editor, you have to save it as your-file-name.html.
Step 3: Now go to the location the file is saved.
Step 4: Open the file using any web browser such as Mozilla Firefox, Google Chrome etc.
Step 5: Now you can view your HTML coding result.
Step 6: <! DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href=""/>
</head>
<body>
<header> My Header
</header>
<div>
My First Paragraph
</div>
<footer>
My Footer
</footer>
<script src=""></script>
</body>
</html>
Here are some examples of HTML5 elements:
- Sections
- It means a section in the part of the page.
- Section will give more clear idea of how the total page works.
Sample HTML5 code:
1
<section id="category">
Sample standard HTML code:
1
<div id="container">
Header
It defines page header shown on the page.
This is not the usual head tag used in standard HTML.
Sample HTML5 code:
1
<header id="advertisement">
Sample standard HTML code:
1
<div id="header">
Footer
It defines page footer of the page.
It is used where we print our information.
Sample HTML5 code:
1
<footer id="site info">
Sample standard HTML code:
1
<div id="footer">
Nav
Nav is a set of links, used to link other pages.
Sample HTML5 code:
1
2
3
4
<nav>
<a href="http://yoursite.com">home</a>
<a href="http://yoursite.com/portfolio">portfolio</a>
</nav>
Sample standard HTML code:
1
2
3
4
5
<nav><ul>
<li><a href="http://yoursite.com">home</a></li>
<li><a href="http://yoursite.com/portfolio">portfolio</a></li>
</ul>
</nav>
Article
It defines a particular portion of the web page, such as the content of the blog or website.
Sample HTML5 code:
1
2
3
4
<article>
<h1>Hello World</h1>
<p>This is a test article</p>
</article>
Sample standard HTML code:
1
<div class="post">
Aside
It refers to the sidebar in the web page, which usually contains recent comments, categories, etc.
Sample HTML5 script:
1
<aside id="post"></aside>
HTML5 does not support some of the popular tags like <applet>, <font>, <frame>.
New Features in HTML5
HTML 5 introduces and enhances a wide range of features including:
HTML 5 introduces and enhances a wide range of features including:
- Form Controls
- APIs
- Multimedia
- Structure
- Semantics
New features should be based on:
- HTML
- CSS
- DOM
JavaScript
- APIs for multimedia by using video and audio tags.
- Drag and drop API.
- HTML canvas 2D context.
HTML5 web messaging New form controls, like:
- Calendar
- Date
- Time
- URL
- Search
- Better support for local offline storage.
- More structural elements/attibutes.
- Geo-location.
- Offline support.
- Web workers and web sockets.
- Client storage.
- Form improvements.
Differences between HTML4 and HTML5
- Elements like nav, header were not present.
- It brought new elements for web structure like nav, header etc.
- It was lacking rules for parsing so it is difficult to handle errors.
- Has strict parsing rules so HTML5 can better handle errors.
- No Multimedia supported without third party.
- Has built-in Multimedia elements like: Audio, Video, Canvas.
- Advantages of HTML5
- Good support on modern mobile devices
- iOS
- Android
- Windows
- Simpler, more intuitive syntax.
Video and audio without requiring a plugin.
- Incremental improvements to previous HTML challenges
- Creative enhancements
- Rounded corners
- Gradients
- Text layout
Emergence of more advanced technologies such as O3D (WebGL).
- O3D is an open source (BSD license) JavaScript API created by Google for creating interactive 3D graphics applications that run in a web browser window or in a XUL desktop application.
- O3D may be crafted for use in any application area, however it is geared towards games and advertisements.
Easier SEO (Search Engine Optimization).
Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine's "natural" or un-paid ("organic") search results.
HTML5 Basics Video and Audio
HTML5 includes both video and audio features.
Video
HTML5 includes a video element
<video src="movie.ogg"
id="video">...</video>
<button onclick="video.play();">
Play
</button>
Audio
HTML5 specifies a standard way to include audio.
The audio element can play sound files, or an audio stream adding native support to browsers.
Canvas
Dynamic and interactive graphics.
Draw images using the 2D drawing API
Lines
Curves
Shapes
Fills
Useful for:
Graphs
Applications
Games and Puzzles
Examples of Canvas
Graphs:
Games:
Meters
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
Examples: Disk usage, the relevance of a query result, etc.
Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.
<meter value="3" min="1" max="5">3 out of 5</meter>
<meter value="0.6">60%</meter>
Progress Bar Useful for:
Indicating loading progress.
Shows user progress through a series of forms.
<progress value="22" max="100">
</progress>
Form Controls
- HTML 4 Controls are too limited.
- In HTML5 several new types of controls are added.
- Email and URLs
admin@crzaman.com
URL
http://www.crzaman.com
<input type="email">
<input type="url">
<input type="url">
List Boxes
Title
Dr
Mr
Mrs
Ms
<input list=”title-list”>
<detalist id=”title-list”>
<option value=”….”>
</detalist>
Dates and Times
<input type="datetime">
<input type="date">
<input type="time">
Numbers:
<input type=”number”>
<input type=”range”>
Benefits of HTML
- Backwards compatible with legacy UAs
- Author familiarity
- Lenient and forgiving syntax
- No User-Hostile Yellow Screen of Death!
- Convenient shorthand syntax
- Can omit some tags and attribute values.
- Benefits of XHTML
- Strict XML (eXtensible Markup Language) Syntax
- Integrate directly with other XML vocabularies
- SVG, MathML
- Use XML Processing
