Additional Reference Document

Session No 1: Introduction to Web Designing and HTML5

1.1.1 Evolution of Computing

Different types of networks in computer system

For enabling communication irrespective of the geographical distance, networking was made

possible between computers by using network connection. Networking assists in the

functioning of the Internet, file sharing, file transferring, network attacks, and system

communication. Following are the different types of networking in detail:

Figure 1.1: Networking

Image Courtesy: www.techkrazy.com/wp-content/uploads/2013/01/Computer-

Network.jpg

Types of Networks:

Local Area Networking (LAN)

Wide Area Networks (WAN)

Metropolitan Area Networks (MAN)

Local Area Networking (LAN)

LAN is used primarily in geographically small areas such as schools, colleges, hospitals, and

office buildings. LAN is one of the oldest types of networks. The Transmission Control

Protocol (TCP) or the Internet Protocol (IP) is used as the method of communication between

computers in LAN. Its relatively small coverage makes it possible to be administered by a

single person. LANs can quickly adapt to changes, as they use a bus network topology that

allows for easy access to it.

Figure 1.2: LAN

Image Courtesy: http://4.bp.blogspot.com/-

MNzrKXKfGoI/Ti5QJadmtmI/AAAAAAAAAAs/SaKzI7uSVJ4/s200/lan.jpg

Wide Area Networks (WAN)

When many networks are connected to each other across continents, they create one giant

WAN. WAN helps in getting constant information updates and connect server machines and

computers across countries and continents. These networks use optic fiber as their

communication medium. The Internet is one such example of a WAN, as it connects all the

users and enables sharing of data and information that is available.

Figure 1.3: WAN

Image Courtesy: www.dataspan.com/uploads/images/istock_000011296304xsmall.jpg

Metropolitan Area Networks (MAN)

Earlier, MAN were used for networking computer systems across a city. Hence, in terms of

coverage, they stand in the middle of LAN and WAN. For instance, MAN were used by city

specific businesses such as the New York Times in the state of New York. Nowadays, these

kinds of networks are not in use.

Figure 1.4: MAN

Image Courtesy: http://cis.msjc.edu/courses/images/MAN.jpg

1.5 jQuery

jQuery is a multi-browser JavaScript library that is designed to simplify the client-side

scripting of HTML.

What is jQuery?

jQuery is a fast and concise JavaScript library that simplifies HTML document navigation, event

handling, animating, and Ajax interactions for rapid Web development. Thus, it is not a language but

a well written JavaScript code.

It was released in January 2006 at BarCamp NYC by John Resig and is dual-licensed under the MIT

and the GNU General Public License. However, it is free and an open source software. Any developer

working with jQuery, must be aware of the basics of JavaScript, HTML, and CSS.

jQuery has been integrated with Microsoft officially into its IDE Visual Studio 2010, as well as jQuery

intellisense is available in Visual Studio 2010.

Why jQuery is needed?

jQuery is a very compact and smart JavaScript code. It achieves the critical User Interface (UI)

functionality by writing less code, thus saving time and increasing the productivity of the developer.

Following are the advantages of jQuery:

It helps to improve the performance of the application

It develops most browsers-compatible Web pages

It delivers functionality with minimum coding.

It is quick in speed.

It can be extended to implement customized behavior

jQuery is simple and avoids multiple lines of coding that is required for complex functionality. Thus,

knowledge of simple JavaScript syntax proves sufficient for handling this software.

Where to download jQuery from?

A jQuery JavaScript file can be downloaded from the jQuery’s official Website—

http://jquery.com/download/

Session No 2: Formatting Text Using Tags and Creating Hyperlinks and Anchors

2.4.1 Hyperlinks

HTML Hyperlinks (Links)

A hyperlink or link is a word, group of words, or an image that can be clicked to jump to another

document or to a different location of the same document.

The <a> tag defines a hyperlink in HTML.

When the cursor is moved over a link in a Web page, the arrow icon turns into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s

destination.

By default, the appearance of the links in all browsers is as follows:

An unvisited link is underlined and appears blue in color

A visited link is underlined and appears purple in color

An active link is underlined and appears red in color

HTML Links - The target Attribute

The target attribute specifies where the linked document has to be opened.

Following is an example that opens the linked document in a new browser window or a new tab:

<a href="http:// www.aptechworldwide.com /" target="_blank"> Visit Aptech

Worldwide!</a>

HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document. However, bookmarks

are not displayed in any special way. They stay invisible to the reader.

Following is an example to create a bookmark inside an HTML document:

1. Create an anchor with an id inside an HTML document:

<a id="tips">Useful Tips Section</a>

2. Create a link to the ’Useful Tips Section’ inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

3. Or, create a link to the ’Useful Tips Section’ from another page:

<a href="http://www.aptech.com/html_links.htm#tips">Visit the Useful

Tips Section</a>

Session No 3: Introduction to CSS3

3.2 Cascading Style Sheet (CSS)

The concept of CSS was first created by Hakon Wium Lie in 1994. It was made a specification in

December 1996 and became an official W3C Recommendation. CSS gives control to the Web

developers to create and easily change Web page’s look and feel.

CSS3 has replaced its earlier version of CSS2 and introduced new selectors and properties. These

added features enable more flexibility with page layout and presentation. Updates, such as the box-

shadow property, which allows a drop-shadow to be added to an element, allow adding of visual

effects, without needing the images to achieve them.

The CSS coding can be used to define the fonts, colors, padding, and so on within a .css file. This

CSS file is then linked to multiple Web pages. If any change has to be implemented on Web pages,

only the required changes be made to the CSS file instead of each page. Following is a basic

example of CSS code, where the CSS code is used for defining the fonts, the color of the links, color

of the visited links, and the color of the links when the mouse is hovering over the link.

Code snippet 1:

This Code snippet 1 can be inserted into the <HEAD></HEAD> section of a pages HTML code using

the following code. However, this will only change the look and feel of that page which contains this

code.

Code snippet 2:

If a particular CSS code has to be used on multiple pages, the code can be stored in a separate CSS

file and then be loaded from each page.

For example, the CSS codes can be copied and pasted into a file named example.css for future

reference. This file can be created using any text editor or even Notepad in case of Windows.

<style type "text/css">

<!--

(Code snippet 1 can be inserted here)

-->

</style>

body {

font: normal 100% "trebuchet ms", Arial, Helvetica, sans-serif;

}

a {

color: #000000;

}

A:visited {

color: #005177;

}

a:hover {

color: #005177;

}

After the file has been saved, it has to be linked to the <HEAD></HEAD> section of the HTML code

and then loaded. This linking can be done using the following example:

Example 1

<link rel="stylesheet" Type="text/css" href="URL or path to css file here">

If the file example.css is in the same directory as the HTML file, the following code can be entered:

Example 2

<link rel="stylesheet" Type="text/css" href="example.css">

Session No 4: Introduction to Formatting Using Style Sheets

4.3 Inline Span

The spans share similarity to divisions except that they are an inline element versus a block

level element. No line break is created when a span is declared. The span tag can be used to style

certain areas of text, as follows:

Then in CSS file, it will be as shown as follows:

The final result is:

Margin property

The margin property declares the margin between an (X)HTML element and the elements around it.

The margin property can be set for the top, left, right, and bottom of an element. For example:

It can be seen that three choices of values are available for setting the margin property. They are

as follows:

length

percentage

auto

All the margins of an element can be declared in a single property as follows:

If the margins for all four sides are declared in a single property, then the order is as follows:

1. top

2. right

3. bottom

4. left

If only one value is declared, it sets the margin on all sides. For example:

margin: 10px 10px 10px 10px;

margin-top: length percentage or auto;

margin-left: length percentage or auto;

margin-right: length percentage or auto;

margin-bottom: length percentage or auto;

This text is italic.

.italic{

font-style: italic;

}

<span class=”italic”>This text is italic.</span>

If only two or three values are declared, then the undeclared values are taken from the opposing

side. For example:

The margin property can also be set to negative values. If the margin value of an element is not

declared, then the margin is 0 (zero).

Elements like paragraphs have default margins in some browsers, to combat this, set the margin to

0 (zero).

In the following example, the elements for this site are set to be 20 px (pixels) from the body. Then,

the coding will be as shown in Code snippet 1:

Code snippet 1:

Padding property

Padding is the distance between the border of an (X)HTML element and the content within it.

Most of the rules that apply for margins also apply to padding, except there is no ‘auto’ value, and

negative values cannot be declared for padding.

It can be seen that two choices for values are available for padding property, namely:

length

percentage

Padding of an element can be declared in a single property as follows:

padding-top: length percentage;

padding-left: length percentage;

padding-right: length percentage;

padding-bottom: length percentage;

body{

margin: 20px;

background: #eeeeee;

font-size: small;

font-family: Tahoma, Arial, “Trebuchet MS”, Helvetica, sans-serif;

text-align: left;

}

p {margin: 0;}

margin: -10px;

margin: 10px 10px; /* 2 values */

margin: 10px 10px 10px; /* 3 values */

margin: 10px;

If the padding for all four values are declared in a single property, then the order is as follows:

1. top

2. right

3. bottom

4. left

If only one value is to be declared, then it sets the padding on all sides. For example:

If only two or three values are to be declared, then the undeclared values are taken from the

opposing side. For example:

If the padding value is not declared of an element, the padding is taken as 0 (zero).

In the following Code snippet 2, the main container for this site has 30 px of padding between the

border and the text.

Code snippet 2:

However, it is to be noted that it is not necessary to add px or any other units, if the value is set to

0 (zero).

#container{

width: 70%;

margin: auto;

padding: 30px;

border: 1px solid #666;

background: #ffffff;

}

padding: 10px 10px; /* 2 values */

padding: 10px 10px 10px; /* 3 values */

padding: 10px;

padding: 10px 10px 10px 10px;

Session No 5: Displaying Graphics

5.2.1 Graphic Format

In graphics, the commonly used formats include GIF, JPEG, and PNG. All these formats are the so-

called bitmap graphics that are made up of thousands of tiny colored picture elements known as

pixels. These pixels are arranged in a checkerboard grid pattern. Bitmap files can be created even

by cell phone and digital cameras, and they can be easily created, edited, resized, and optimized for

Web use through tools such as Photoshop.

For efficient delivery of Web pages, the graphics are compressed to keep the file size as low as

possible without compromising with its quality. Therefore, both GIF and JPEG formats are used.

However, if the user wants to choose between these two, the following points have to be thought

upon:

Whether the image has a smooth tonal transition or is diagrammatic having hard edges and

lines?

How will the various compression techniques affect the image quality?

How efficient are the compression techniques that deliver the smallest file size with good

quality?

GIF Graphics

The Graphic Interchange Format (GIF) was popularized by the CompuServe Information Service

in the 1980s. In the beginning of 1990s, GIF was adopted by the World Wide Web (WWW) for its

efficiency and familiarity. Any browser that supports graphics can display GIF, which means GIF

format ruled the graphical world. Though GIF used lossless compression technique, its 8-bit

graphics would accommodate only 256 colors.

GIF file compression

The compression technique used by GIF is of a basic form called as Lempel Ziv Welch

or LZW. With this technique the inefficiencies in the image are removed and the data is

stored back without distorting the image. The LZW works better in case of images with

large fields of homogeneous color such as logos and diagrams. However, images which

have many colors and complex textures, the LZW technique may not deliver the images

properly. Refer to Figure 5.1.

Figure 5.1: The LZW compression technique applied on a GIF graphic format

Dithering

A full-color photograph can contain infinite colors. However, to support all these colors,

heavy-size image format needs to be used. This will result in the file size getting larger.

However, to avoid this and make images look acceptable on a 256-color computer screen,

dithering was opted. Dithering is a process, wherein the pixels of two colors are placed

adjacently to create an illusion that a third color is present. It reduces the number of

colors to 256 or fewer. However, this process will result in a grainy image with a bad

quality. Refer to Figure 5.2. However, at present there are full-color monitors that display

all colors, and there is no need to dither an image. However, if the file size is still a

concern, images can be converted into JPEG or PNG formats. The format that gives the

lowest size with better quality can be then chosen between these two.

Figure 5.2: Example of Dithering

Image courtesy: http://webstyleguide.com

Improving GIF compression

A GIF file allows only 256 colors or fewer. Therefore, to improve the LZW compression, the

colors that are not required can be removed except for those that are necessary for its

appearance. A simple GIF image may look fine even at 8, 16, or 32 colors, and keeping

minimum colors will also make the file size compression considerable. Such adjustments

can also be made in image editors such as Photoshop.

Interlaced GIF

In case of conventional (non-interlaced) GIF, the graphic downloads one line of pixels at a

time from top to bottom, and the browsers display each line of the image as it gradually

builds on the screen. Whereas, in case of interlaced GIF files, the image data gets stored

in a format that builds a low-resolution version of the full-sized GIF picture while the file is

downloading. However, this will function only for those browsers that support such

feature. Apart from its visual appeal, the most important benefit is that the user can have

a small-size preview of the full picture while the picture gets completely downloaded.

Interlacing works best for larger GIF images having 200 × 100 pixels or greater. Whereas,

small graphics such as navigation bars, buttons, and icons, downloading gets faster in

conventional (non-interlaced) GIF format.

Transparent GIF

Making a GIF image transparent is also an option available to the users. The colors can be

picked up from the color lookup table of the GIF. Photoshop software can also be

used. Here, the color that has to be made transparent and the background color of the

graphic is the same. Moreover, transparency option cannot be customized. This means,

that when a color is made transparent, every pixel in the graphic that shares that color will

also become transparent, which gives unexpected results.

Moreover, image containing anti-aliasing also does not work well with transparency. For

instance, when a shape is created and set against a background color, Photoshop

smoothens the shape by inserting pixels of intermediate colors along the shape’s boundary

edges. This improves the look of the images by softening the edges, which otherwise looks

jagged. Now, change the image’s background to transparent and place it against a Web

page with a different background color. The anti-aliased pixels in the image will still

correspond to the original background color. This makes a white ‘halo’ appear around the

graphic. Refer to Figure 5.3.

Figure 5.3: ‘White halo’ in transparent GIF graphics

Image courtesy: http://webstyleguide.com

Even, when Web browsers do not print background colors, and a transparent GIF anti-

aliased is set against a colored background, it will not blend smoothly.

JPEG graphics

JPEG images are full-color images that give 24 bits of memory to each pixel, which means 16.8

million colors are available. JPEG is used by people for whom image quality and color fidelity is

important such as photographers, artists, graphic designers, and so on.

Another form of JPEG file called as ‘progressive JPEG’ gives it the same gradually built display as

seen in interlaced GIFs. Progressive JPEG images often take a longer time to load onto the page

than standard JPEGs, but offer a quick preview for the user.

Unlike GIF, JPEG compression uses a sophisticated mathematical technique called as Discrete

Cosine Transformation (DCT) to produce a sliding scale of graphics compression. The degree of

compression also determines the image quality. It can squeeze a graphic as much as one

hundred times smaller than the original file. Such size reduction is possible because

the JPEG algorithm discards ‘unnecessary’ data while compressing the image, and it is thus called

a ‘lossy’ compression technique. However, it should be noted that more a JPEG compression is

applied to an image, the more its quality is degraded. As shown in Figure 5.4 the increasing

JPEG compression has degraded the image details. The checkered pattern of pixels and the dark

‘noise’ pixels in the compressed image are classic JPEG compression artifacts. It can be seen

particularly around the leading edge of the fish's head.

Figure 5.4: Example of JPEG compression

Image courtesy: http://webstyleguide.com

Once an image is compressed in JPEG, the data is lost along with its quality. Therefore, it is

always advisable to save a copy of the uncompressed original file. Each time an image is resized

or resaved, the compression results in increased artifacts with noise and lower file size.

PNG graphics

Portable Network Graphic (PNG) was developed by an association of graphic software developers

as a non-proprietary alternative to GIF. It was CompuServe that developed the GIF format,

and the LZW compression scheme was patented by Unisys Corporation. This meant that any

graphics tool developer making software that saved images in GIF format had to pay a royalty to

both Unisys and CompuServe. However, presently the patent has expired, and the software

developers can use the GIF format freely.

PNG format was specifically designed for Web use. It provided many features such as a full range

of color depths, support for sophisticated image transparency, better interlacing, and automatic

corrections for display monitor gamma. PNG images can also give a short textual description of

the image’s content, which assists the Internet search engines to search for images based on

these embedded text descriptions.

PNG can be used for photographic images. However, because it uses lossless compression, the

file size is comparatively bigger than with lossy JPEG compression files. Like GIF, PNG works best

with line-art, text, and logos as they contain large areas of homogeneous color with sharp

transitions between colors. When such images are saved in GIF format, their file size is much

smaller. However, due to lack of support of Web browsers such as Internet Explorer, PNG

adoption has been slow. As a result, most images that would have been worked well

with PNG compression have to use the GIF format instead, to enable full and consistent browser

support.

Session No. 6: Working with CSS3 Transitions and Animation

6.1 CSS3 Transitions

Continuous dependence upon JavaScript and Flash for designing interactions within HTML and CSS

came to an end with the evolution of CSS3 transitions and CSS3 animations.

Transitions allow the change from one state to another, while animations can set multiple points of

transition upon different keyframes.

Thus, CSS3 transitions have the potential to modify the appearance and behavior of an element

whenever a state change occurs, such as when it is hovered upon by mouse, focused on, active, or

targeted.

Transitions

For a transition to occur, it is necessary to bring out a change in the state of an element. The

ways that bring out such a change in the style are the :hover, :focus, :active,

and :target pseudo-classes.

The four transitions related properties are transition-property, transition-duration, transition-

timing-function, and transition-delay. However, not all these are required to build a transition,

only the first three are the most popular. Following Code snippet 1 shows the use of transition

properties, wherein the box will change its background color over the course of one second in

a linear fashion.

Code snippet 1:

6.2 CSS3 Animation

Animations

Transitions help in bringing out good visual interactions, and therefore are suited for single-state

changes. However, if a higher level of interactivity is required, transitions need to have multiple

states. This is where animations are picked up and the transitions are left off.

Animations Keyframes

The @keyframes rule is opted to set multiple points at which an element has to undergo a

transition. The @keyframes rule includes the animation name, any animation breakpoints, and

the properties intended to be animated. Refer to Syntax 1.

.box {

background: #8ec63f;

transition-property: background;

transition-duration: 1s;

transition-timing-function: linear;

}

.box:hover {

background: #f7941d;

}

Syntax 1:

Vendor prefixing the keyframe rule

Similar to other transitions and animation properties, the @keyframes rule must be vendor

prefixed. The vendor prefixes for the @keyframes rule are as follows:

@-moz-keyframes

@-o-keyframes

@-webkit-keyframes

The animation is named slide, which is stated directly after the opening of @keyframes rule. The

different keyframe breakpoints are set using percentages, starting at 0 percent till 100

percent with an intermediate breakpoint at 50 percent. In place of the percentages, the

keywords ‘from’ and ‘to’ could be used. Besides the break point of 50 percent, additional

breakpoints can also be stated. The element properties to be animated are listed inside each of

the breakpoints, left and top as shown in Syntax 1.

Only individual properties can be animated in transitions. For example, if an element has to be

moved from top to bottom, the code animate from top: 0; to bottom: 0; will not work out,

because animations can apply only on a transition within a single property, not from one property

to another. In this case, the code will be animate from top: 0; to top: 100%;.

@keyframes slide {

0% {

left: 0;

top: 0;

}

50% {

left: 305px;

top: 100px;

}

100% {

left: 610px;

top: 0;

}

}

Session No 7: Creating Navigational Aids and Division-Based Layout

7.2 HTML5 Semantic Tags

The HTML5 specification has introduced many new semantic elements that aimed to provide

meaning to the structure of a document. Prior to this, an ambiguous markup language consisting

largely of divs, ids, and classes needed to be provided for the semantic structure.

As the sew semantic elements are markup based, they may not attract attention as much as the

other attention grabbing HTML5 specifications such as audio, video, Web Workers, WebSockets, Web

Storage, and so on. However, these new semantic elements assist in making the Web an open

medium of for distributing similar as well as varied information.

Broadly, the new structural elements introduced in HTML5 can be summarized as follows:

<header> element

The <header> element is a self explanatory element. They typically provide introductory and / or

navigational content by using the hgroup and nav elements. Multiple <header> elements can

also be defined per page.

Code snippet 1:

<nav> element

The <nav> element represents the navigational links to specific pages or specific sections within

the current page. However, it is not mandatory to have all navigational links defined within a

<nav>.

Code snippet 2:

<article> element

The <article> element provides content which does not depend upon the main content but has

relevance to it. It can be a document or an application.

<header>

<h1>Some Blog</h1>

<h2>Some Blog Description</h2>

<p>Last Modified: <time>2011-10-19</time></p>

<nav>

<h1>Navigation</h1>

<ul>

<li><a href="home.php">Home</a></li>

<li><a href="about.php">About</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</nav>

</header>

<header>

<h1>Some Blog</h1>

<h2>Some Blog Description</h2>

<p>Last Modified: <time>2011-10-19</time></p>

</header>

Code snippet 3:

<section> element

The <section> element describes general divisions of a document, article, or an entire

application.

Code snippet 4:

<aside> element

The <aside> element represents content which is relevant to or supports the main content, but

its non-existence may not affect it. For instance a pull quote, a blog roll, a sidebar, and so on.

<article>

<header>

<h1>Some Post</h1>

<p><time pubdate>2011-10-02</time></p>

</header>

<p>This is a simple example of the article element.</p>

<p>...</p>

<section>

<h1>Comments</h1>

<article>

<header>

<p>Posted by: Eric Feminella</p>

<p><time>2011-10-1</time></p>

</header>

<p>Nice post, simple enough!</p>

</article>

</section>

<section>

<h1>Categories</h1>

<span><a href="/html5">HTML5</a></span>

</section>

</article>

<article>

<header>

<h1>Some Post</h1>

<p><time pubdate>2011-10-02</time></p>

</header>

<p>This is a simple example of the article element.</p>

<p>...</p>

</article>

Code snippet 5:

<footer> element

The <footer> element defines content which is to be denoted as a footer of a page or within a

section. A page can contain multiple <footer> elements, each unique to a particular section.

<article>

<header>

<h1>Some Post</h1>

<p><time pubdate>2011-10-02</time></p>

</header>

<p>This is a simple example of the article element.</p>

<p>...</p>

<section>

<h1>Comments</h1>

<article>

<header>

<p>Posted by: Eric Feminella</p>

<p><time>2011-10-1</time></p>

</header>

<p>Nice post, simple enough!</p>

</article>

</section>

<aside>

<h1>Categories</h1>

<span><a href="/html5">HTML5</a></span>

</aside>

<aside>

<ul id="tags">

<li><a href="semantics/">semantics</a></li>

<li><a href="elements/">elements</a></li>

<li>...</li>

</ul>

</aside>

</article>

Code snippet 6:

<article>

<header>

<h1>Some Post</h1>

<p><time pubdate>2011-10-02</time></p>

</header>

<p>This is a simple example of the article element.</p>

<p>...</p>

<section>

<h1>Comments</h1>

<article>

<header>

<p>Posted by: Eric Feminella</p>

<p><time>2011-10-1</time></p>

</header>

<p>Nice post, simple enough!</p>

</article>

</section>

<aside>

<h1>Categories</h1>

<span><a href="/html5">HTML5</a></span>

</aside>

<aside>

<ul id="tags">

<li><a href="semantics/">semantics</a></li>

<li><a href="elements/">elements</a></li>

<li>...</li>

</ul>

</aside>

<footer>

<div class="g-plusone" data-annotation="inline"></div>

</footer>

</article>

Session No 8: Creating Tables

8.5 Apply Borders by Using Styles

Creating a Table With CSS

For creating a table for a Web site, it is necessary to program the same in HTML and CSS

properly. The following aspects need to be taken care of:

Tables and Borders

It is necessary to identify the number of rows and columns required for the table. To create rows

and columns, various elements can be used. After the table elements are done with, the borders

should be applied. Borders ensure that there is only one line between the cells in the table. Here,

the outside border is created first, followed by setting up the border-collapse rule. Following Code

snippet 1 shows the setting up of border-collapse rule.

Code snippet 1:

The header and the other cells can also be applied the border property. On applying the border

collapse rule, the table will have a single border between its cells. An example of this is given in

Code snippet 2.

Code snippet 2:

Captions

Depending upon the place, captions can either be caption-side: top or caption-side:

bottom rule. Anyone amongst the two can be chosen, which suits the layout.

As a standard, the caption text appears in the center and is in bold style. However, additional

rules can be written to alter the color and size of the font. For example, the following Code

snippet 3 will alter the spacing of the letter and the variant of the font in the caption:

Code snippet 3:

th {

font-variant: small-caps;

color: #666666;

letter-spacing: 0.2em;

}

th, td {

border-width: 1px;

border-style: solid;

border-color: #000000;

}

table {

border-width: 1px;

border-style: solid;

border-color: #000000;

border-collapse: collapse;

}

Alignment

By default, the text in the cells automatically gets aligned in the middle of data rows, although

they can be aligned at the top or bottom as shown in Code snippet 4.

Code snippet 4:

Similarly, if the code has to be aligned at the top and in the center of the row, rather than fully

justified to the left as it appears in the default setting, the following Code snippet 5 can be used:

Code snippet 5:

These basic rules will help create tables and edit them according to Web pages.

td {

vertical-align: top;

text-align: center;

}

td {

vertical-align: top;

}

Session No 9: HTML Forms

9.2 Introduction to HTML5 Forms

Forms help Websites capture information about the users, processes their requests, and gives

control over the application. Thus, form as a tool can be used by the client to connect with their

users and obtain their feedback. Forms can be used to gather small amount of data, enter a search

query, provide username and password, or give large amount of information such as billing details

or resumes.

Thus, the developer must know how to build a markup for a form, add elements that are available to

capture different types of data, and how to style them with CSS.

Initializing a Form

To build up a form, the 1 element can be used. The form element signifies where the control

elements will appear on the page. The form element covers all of the elements included within the

form, similar to a div element.

Code snippet 1:

Different attributes can be applied to the form element, such as, action and method that are often

used. The action attribute refers to URI where information submitted in the form will be sent for

processing by the server. The method attribute refers to the HTTP method that the browsers use to

submit the form data. Both these form attributes are related to submitting and processing data.

9.4 Working with New Input Types

Text Fields & Text Areas

To gather text or string based data, text fields and text areas are used. This includes text content,

passwords, telephone numbers, and so on.

Text Fields

The input element is primarily used to obtain the text from the users. For determining the nature

of the information to be accepted, the type attribute is used. One of the largely used type attribute

value is text that denotes a single line text input.

Along with setting a type attribute, it is also advisable to use the name attribute. This attribute

specifies the name of the control and is submitted along with the input data to the server. However,

the input element is self enclosed, which means that there is only one tag, and it does not wrap

any other content. Refer to Code snippet 2 and its following example.

Code snippet 2:

<input type="text" name="sample_text_field">

<form action="#" method="foo">

...

</form>

Text Input Example

Earlier, only text and password were the two text based type attribute values. However HTML5 has

brought new type attribute, values, and form updates, which give better semantical context for an

input as well as controls. In case, the browser fails to understand any of these HTML5 type attribute

values, it automatically changes to the text attribute value. New HTML5 input types include email,

search, url, tel, number, range, date, week, month, time, datetime, datetime-local, and

color.

Refer to Figures 9.1, 9.2, 9.3, 9.4, 9.5, and 9.6.

Figure 9.1: Email Input Type within iOS

Figure 9.2: URL Input Type within iOS

Figure 9.3: Tel Input Type within iOS

Figure 9.4: Number Input Type within iOS

Figure 9.5: Date Input Type within iOS

Figure 9.6: Time Input Type within iOS

Session No 10: HTML5 Audio

10.4 Audio Elements in HTML5

Similar to the <video> tag, the <audio> tag is a new feature in the HTML. It helps the developer to

embed the music in the Web sites. However, only certain types of file formats are supported.

Currently, any recent browser that is based on Webkit, such as Chrome and Safari, supports the use

of regular .mp3 files. Others, such as Firefox, only support the .ogg format.

However, it is possible to convert .mp3 files to .ogg using tools for convenience, or source out two

formats of the same file. Thus, for instance, when Safari comes across the <audio> tag, it will

ignore the .mp3 file and move directly to the .ogg file.

Usage of <audio> tag on page

Code snippet 1 shows the usage of <audio> tag on the page.

Code snippet 1:

The source file's location can be added in the beginning of the <audio> tag, rather than between

the two as shown in Code snippet 2.

Code snippet 2:

The file to be embedded can be located anywhere on a Web page or elsewhere on the Web. In

the former case, a relative URL, such as /audio/music.ogg has to be used. In the latter case, an

absolute URL, such as http://www.yoursite.com/music.ogg has to be entered.

<audio> tags attributes

Apart from the general attributes, the <audio> tag supports a full range of global attributes in

HTML5. These attributes are supported by all HTML5 tags, with very few exceptions. Refer to

Table 10.1.

Attribute Description

accesskey It specifies a keyboard shortcut for an element.

class It defines a classname for an element that is to be used in

conjunction with a style sheet.

contenteditable It specifies whether a user is allowed to edit the content.

contextmenu It gives out the context menu for an element.

dir It specifies the direction of text for content in an element.

draggable It specifies whether a user can drag an element.

dropzone It specifies the event when an item or data is dragged and

dropped into an element.

hidden It specifies whether an element is hidden.

id It specifies a unique identification for an element.

lang It specifies a language code for the content in an element.

<audio src="music.ogg" controls="controls">

<audio autoplay="autoplay" controls="controls">

<source src="music.ogg" />

<source src="music.mp3" />

</audio>

spellcheck It specifies whether an element needs to be subjected to a

spelling and grammar check.

style It defines an inline style for an element.

tabindex It specifies the tab order of an element.

title It specifies a title for an element.

Table 10.1: Global attributes supported by the <audio> tag

Code snippet 3 shows the usage of general attributes in HTML5.

Code snippet 3:

There are other attributes in <audio> tag, which can be used for additional controls, such as

event attributes in HTML5. Events include window events, which are triggered for the window

object, form events, which are triggered by actions that occur within an HTML form, keyboard

and mouse events, and media events. Most of these elements are similar to the previous HTML

version.

<audio loop="loop" autoplay="autoplay" controls="controls">

<source src="music.ogg" />

<source src="music.mp3" />

</audio>

Session No 11: HTML5 Video

11.1 Video Elements in HTML

One of the eye-catching features of HTML5 is the video tag. It not only provides the features of flash

but also goes provides support across browsers at an amazing speed. The main advantage is its

integration with other layers of CSS and JavaScript as well as other HTML tags. To make an HTML

video function in a Web site, the following code can be used.

Code snippet 1:

As shown in Code snippet 1, the <source> tag is used, which assist in including multiple formats as

fallback types, in case the user's browser does not support one of them.

A single video format also can be used that makes the syntax similar to the image tag. In future, if

majority of the browsers support one common format, this syntax will be the most used one. This is

as follows:

Code snippet 2:

In case of multiple formats, it is necessary for the server to serve video files with the correct MIME

type in the Content-Type header. If not, the videos may not function properly, even if they were

working on a local copy of your site. In an Apache httpd.conf - it is enough to add the following

code:

Code snippet 3:

In case the application is running in a Google App Engine, then following code needs to be added to

app.yaml (one for each format):

Code snippet 4:

To enable smooth functioning of the videos on the client side, it is necessary to specify the type

attribute in the source tags when dealing with multiple formats. Thus, the browser can decide the

format that can be downloaded and played. In other words, formats that do not work in the browser

will not be downloaded and hence will increase the Web site’s performance.

- url: /(.*\.ogv)

static_files: videos_folder/\1

mime_type: video/ogg

upload: videos_folder/(.*\.ogv)

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

<video src="movie.webm"></video>

<video>

<source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

/>

<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />

</video>

11.1.4 Converting the Video Files

If the encoded video stream and audio stream are in a zip file, then the three formats that can be

used are as follows:

.mp4 = H.264 + AAC

.ogg/.ogv = Theora + Vorbis

.webm = VP8 + Vorbis

Earlier only Safari browser supported the video tag, but now all modern browsers support HTML5

video, including IE9. Browsers, such as Firefox, Chrome, and Opera have agreed to include the

support for .webm as the common video format through the WebM Project for the codecs. Internet

Explorer will support this too, if the codec is installed in the computer.

Session No 12: Building a Mobile Web Application

12.2 Mobile Application Environment

Setting up an Environment for Mobile Applications

Desktop Web applications are created and tested in the environment for which they are developed.

Mobile Web applications run on different mobile devices. Hence, they need to be tested in different

environments. The tools required to develop a mobile Web application are — namely, Integrated

Development Environment (IDE) and emulators. These are described as follows:

IDE

An IDE is a tool used for coding the markup, JavaScript, and CSS. Today in the market, there are

different tools which provide the facility to easily build up a mobile Web application. Some of

these tools are as follows:

Adobe Dreamweaver

Microsoft Expression Web

Aptana Studio

Eclipse

Editplus (text editor)

However, latest versions of these tools provide better support for mobile markups. They also

provide support for validating pages against mobile Web standards.

Emulators

The testing of a mobile Web application can be done using an emulator. An emulator is a software

that translates the compiled code to the native platform on which the application is executed.

The emulator runs as a desktop application that allows testing and debugging of a mobile

application. It offers an environment similar to a real mobile device on which an application will

be executed. In other words, it imitates the features, such as hardware and OS of a mobile

device, to test and debug an application.

Emulators are developed by manufacturers and are often offered free to users. They are either

standalone applications or bundled with a Software Development Kit (SDK) for native

development. Some of the popular emulators are as follows:

Android

iOS

webOS

Blackberry

Windows Phone

Opera Mobile

HTML5 Support on Mobiles

Today, a majority of smartphones and tablets are providing good support for HTML5. Most

Android and iOS mobile devices as well as tablets use browsers that are based on Webkit. The

Webkit is a layout engine supported by browsers, such as Google Chrome and Apple Safari to

render Web pages.

Some of the new features introduced in HTML5 are supported by several mobile devices. This

reduces the need of any third party plug-in. The features suited for mobile devices are as follows:

Video

Audio

Drag and drop

Accessing browser history

Geolocation API for accessing location

Web storage API to save data on mobile devices

Offline Web applications (Applications with no Internet connection)

HTML5 Markup

Web pages developed for a mobile Web application have the same structure as traditional Web

pages and contain the following sections:

Heading Structure

Document Structure

Heading Structure

The heading structure is represented by a <head> element defined in an HTML Web page. It defines

a <meta> tag that is used specifically for mobile browsers. A brief description for some of the tags

defined under <head> element is as follows:

Meta Tag

Two factors that need to be considered while designing a mobile Web application are its initial

display (zoom) scale and orientation. Thus, it is necessary to inform mobile browsers to consider

these factors while displaying a Web page. This can be achieved by using a <meta> tag.

A <meta> tag indicates that the document is optimized for mobile devices and is used to control the

display scale, while displaying HTML content on the device. It is specific to mobile browsers. Refer to

Table 12.1.

Meta Tag Description Supported Mobile

Browser

<meta

name=”HandheldFriendly”

content=”true”/>

It indicates that content is designed

for small-screen handheld devices.

The value true prevents the browsers

from scaling the content.

BlackBerry and others

<meta

name=”MobileOptimized”

content=”width” />

It accepts width (in pixels) to place

the content and forces the layout to

one column in the browser.

Windows Mobile and

Windows Phone

<meta name=”Apple-

mobile-web-app-capable”

It indicates that the Web application Safari

content=”yes”/> will run in a full-screen mode.

<meta name=”Format-

detection”

content=”telephone=no”/>

With this tag, automatic detection of

phone numbers is enabled or disabled

on Web pages.

Safari running on iOS

Table 12.1: Variations of <meta> tag used for different mobile browsers

Similarly, a non-standard variation of <meta> tag is specified by giving an alternate <link> tag. This

tag is mostly used in desktop Web pages and defines an alternative URL for displaying the same

content on different media, such as handled devices.

Viewport Meta Tag

This technique is used to inform the browser that a Web page is optimized for a mobile device. A

viewport is a rectangular display area on the screen, where the content of a Web page is displayed

by the browser. It contains attributes, such as width and height that can be set to larger or smaller

values depending on the total visible area on the screen.

The viewport meta tag is supported by many smartphones, such as iPhone, Android based

phones, and browsers, such as Internet Explorer Mobile, Opera Mini, and Opera Mobile. Refer to

Table 12.2.

Attribute Description Value

width It defines the horizontal size of the viewport in

pixels.

Integer value (in pixels) or

constant device-width

height It defines the vertical size of the viewport in

pixels.

Integer value (in pixels) or

constant device-height

initial-scale It sets the scale of the page for its initial

display. Large value indicates zoomed in,

whereas a smaller value indicates zoomed out.

Floating value between 0.1 to n

minimum-scale It defines the minimum zoom scale of

viewport.

Floating value between 0.1 to n

maximum-scale It defines the maximum zoom scale of

viewport.

Floating value between 0.1 to n

user-scalable It allows scaling of application on mobile

devices. Thus, users can zoom in and zoom

out the application.

no or yes

Table 12.2: Attributes of the viewport meta tag

<link rel=”alternate” media=”handheld” href=”http://mysite.com” />