This second
blog of mine is about Hyper Text Markup Language, commonly known as HTML, which
has been around since the 90s and the new HTML version, HTML5.
History
Tim
Berners-Lee, then working at CERN, specified HTML in 1989. He wrote the browser
and server software in 1990 to be able to use this language. HTML was strongly
based on Standard Generalized Markup Language (SGML). This is an
internationally agreed upon method for organizing written text into different
categories or structural units such as paragraphs, headings, and more. For the next ten years, many improvements were
made. Version 4 was released in 1997 in three variations: Strict, Transitional
and Frameset. January 2008 saw publishing of HTML 5 as a working draft and
until February 2012, it is still under development.
What
exactly is HTML?
Hypertext
Markup Language is a language, and just like all other language, it has dedicated
code-words and writing syntax. It is a combination of Hyper Text and Markup
features. Hyper Text is the method which the user uses to move about on the
Internet. This method involves clicking on text (later on also on pictures)
with hyperlinks to go to another page. The meaning of hyper is that there is no
specified way in how a user must click on the hyperlinks. A user is free to
choose whichever link he wants to move to what is interesting to him. Markup is
the way that the language treats the text. The language is made up of HTML tags
which contain text. The HTML tag marks the text inside it as specified in the
tag, for example setting up that text to be a Header 1 (for example:
<H1>)
Using HTML
HTML is
very simple to use and requires only knowledge of the HTML language. The
language can be written in the notepad. When one is finished writing the code
of the HTML page, what remains to be done is to save the document with an .htm
or .html file extension. The last step would be to open the HTML file in a browser
support the version of HTML that the file created is specified to use.
Figure 1: The figure above shows a very simple HTML file.
Figure 2: The figure below shows the output of the HTML
file in the previous figure.
HTML
Elements and Attributes
An HTML
Element starts with a Start Tag (or Opening Tag) and ends with an End Tag (or
Closing Tag). Some elements allow the writer to leave out the closing tag, but
the end result will not be guaranteed. Between these two tags there is the
Element Content. It is possible to have some HTML Elements without content and
such elements are opened with a closing tag. Most HTML elements make use of
attributes. The term Nested Element refers to an Element within another
element.
Attributes,
on the other hand, provide additional information about the elements. These
attributes are always specified in the starting or opening tag. Attributes come
in name and value pair. This means that the attribute is immediately given a
value after it is declared (example: width=”15”). The value is always written
between double quote marks. Single quote marks are sometimes allowed but it is
better to use double quote marks. The latter must be used if the value of the
attribute contains double quote marks, like in this example: name=’Jenny
“Bunny” White’. Even though attributes are not case sensitive, it is
recommended to use lowercase.
What is new
in HTML5?
Several
elements are introduced for better structures, some of which are described in
the table below:
Element
|
Description
|
<article>
|
represents an independent piece of content of a document, such as a
blog entry or newspaper article
|
<hgroup>
|
represents the header of a section
|
<footer>
|
represents a footer for a section and can contain information about
the author, copyright information and more
|
<nav>
|
represents a section of the document intended for navigation
|
Table 1: New Elements in HTML5
Other
elements are totally new for HTML5. These include the audio and video for
multimedia content. These two elements also provide an API so that new
interfaces can be done by application developers. Others can be seen in the
table below:
Element
|
Description
|
<track>
|
provide the text tracks for the video element
|
<meter>
|
represents a measurement. such as disk usage
|
<canvas>
|
is used for rendering dynamic bitmap graphics on the fly, such as graphs
and games
|
<keygen>
|
represents control for key pair generation
|
Table 2: Totally new Elements in HTML5
Several new
attributes have been introduced with HTML5. Some of these are described in a
table below:
Attribute
|
Description
|
autofocus
|
provides a declarative way to focus a form control during page load
|
required
|
indicates that the user has to fill in a value before submitting the
form
|
novalidate
|
can be used to disable form validation submission
|
scoped
|
used for the style element to enable scoped style sheets
|
Table 3: New Attributes in HTML5
Browsers
Supporting HTML 5
All
browsers are written in a different way and this means that not all browsers
support and handle HTML5 in the same way. The differences between these
browsers are huge. Another issue with
HTML5 handling is other devices such as tablets, mobile phones and televisions.
A popular HTML5 dedicated website, http://html5test.com/ created a series of tests for
browsers supporting HTML5 and has created a hierarchical list of browsers,
sorted by how well each of them did in the tests. Included in the charts are
Tablets, Mobile Phones and Televisions. Not all the new features of HTML5 are
tested but the test can give quote a clear picture. The score of this test is
out of 475.
Browser
|
Version
|
Score
|
Google Chrome
|
16.0
|
373
|
Mozilla Firefox
|
10.0
|
332
|
Opera
|
11.60
|
329
|
Apple Safart
|
5.1
|
302
|
Microsoft Internet Explorer
|
9
|
141
|
Table 4: HTML5 Test on Browsers
As seen
above, Google tops the list while Internet Explorer sits at the bottom of the
screen. However, Firefox tops the list
for the Tablets and the Mobile Phone, followed by Apple in both cases. Google,
once again, tops the chart of the Televisions.
HTML5
Example – Creating a Progress Bar
A progress
bar can be used to guide the user to understand that the web site he or she is
viewing is loading. Another ideal situation to use a progress bar is to show
the progress in completing an online form which is distributed on more than one
single page.
For this
blog I used JavaScript functions with HTML5 to create two different progress
bars, one incrementing manually and the other automatically. Actually it is
very simple to do this example as only two functions were required. First I
created a function to add a pre-determined percentage to the progress bar. This
can be used for example to increase the value by 25% if we have an online form
of 4 pages.
Figure 3: The function above adds 10% to value of the progress bar when it is called
The other function
is made up of a for loop and fills the progress bar from 0% to 100%
Figure 4: The function above fills the progress bar when it is called
The page is
made up of the two progress bar and two buttons. One button is used to add 10%
to the top progress bar every time it is clicked, while the second button fills
up the second bar from 0% to 100%. If the browser does not support HTML5
Progress Bar Element, the progress element issues a fallback message that the
Progress Bar is not supported.
Figure 5: The page running on Google Chrome 17 with the manual progress bar filled up to 30% and the auto progress bar filled up to 100%
Figure 6: The page running on Internet Explorer 9. The progress bars are not shown because Internet Explorer 9 does not support the Progress Bar Element
