HTML5 NexTGen Web

Aptech Ltd

Assignments

Version 1.0

Page 1 of 21

HTML5 NexTGen Web

Assignments

Table of Contents
S#

Session

Page No.

1.

Introduction to the Web

2.

Introduction to HTML5

3.

Formatting Text Using Tags

4.

Creating Hyperlinks and Anchors

5.

Introduction to CSS3

6.

Formatting Using StyleSheets

7.

Displaying Graphics and CSS3 Animation

8.

Creating Navigational Aids and Division-based Layout

10

9.

Creating Tables

11

10.

HTML Forms

12

11.

HTML5 Audio and Video

13

12.

Introduction to JavaScript

14

13.

Operators and Statements

15

14.

Loops and Arrays

16

15.

Functions and Objects

17

16.

Building a Mobile Web Application

18

17.

Canvas and JavaScript

19

18.

HTML5 Web Storage

20

19.

HTML5 GeoLocation and APIs

21

Aptech Ltd

Version 1.0

Page 2 of 21

HTML5 NexTGen Web

Assignments

Introduction to the Web

Assignment Question
Metalane Consulting is a financial analysis and audit firm located in Fairbanks, USA.
The organization provides various services such as tax services, advisory services,
auditing, and consulting. The company has a worldwide Web site which is accessed by all
the stakeholders of Metalane Consulting. The Web site was built based on the HTML 4
standards.
The management of Metalane Consulting plans to create a new Web site using HTML5.
They feel that due to the advanced interactivity and media support provided by HTML5,
the Web site would gain more functionality and popularity. As the Head of the Design
Team at Metalane Consulting, you have to perform the following tasks:
1. Prepare a report that provides an overview of how a HTML5 Web site would be
beneficial to the organization.
2. List the drawbacks or limitations of using a HTML 4 Web site.
3. Prepare a layout for the new HTML5 Web site to be developed.
4. List the browsers that will support the new HTML5 Web site.

Aptech Ltd

Version 1.0

Page 3 of 21

HTML5 NexTGen Web

Assignments

Introduction to HTML5
Assignment Question
Cyrotri Corp is a multinational conglomerate that manufactures consumer electronics
and equipments. The organization has planned to create a new Web site using HTML5 to
market and sell their products online.
You are appointed as the lead Web developer at Cyrotri Corp. You need to perform the
following tasks:
1. Prepare a design template for the new Web site.
2. Create an HTML file with Doctype and HTML tags.
3. Add the title to the HTML file as Cyrotri Corp.
4. Provide keywords for the Web site and add them in the meta tag.
5. Provide a small introduction about the organization and their products and add the
same in the body tag.

Aptech Ltd

Version 1.0

Page 4 of 21

HTML5 NexTGen Web

Assignments

For matting Text Using Tags

Assignment Question
Dorothy Smith works for SciFurniture Inc. as a lead Web designer. SciFurniture are
pioneers in the field of manufacturing of plywood and veneer products. The organization
plans to redesign their Web site and transition it according to the new HTML5 Standards.
Dorothy has been given the following write-up about the About Us page of SciFurniture
Inc. Figure 3.1 displays the About Us page.

Figure 3.1: About Us Page Write-up

The write-up is not formatted, but Dorothy needs to put it in a formatted manner on the
Web site. For this, the following tasks needs to be performed by Dorothy:
1. Provide the heading format for all the headings and sub headings on the Web site.
2. Apply the required formatting such as bold, italics, and so on.
3. The list of products must appear as a bulleted list in the Web site.
4. Display the students passed data as a line chart and on a separate axis.
Assume that you have been given the task of assisting Dorothy and implement these
tasks.

Aptech Ltd

Version 1.0

Page 5 of 21

HTML5 NexTGen Web

Assignments

Creating Hyper links and Anchor s

Assignment Question
Archer Industries is a reputed pharmaceutical company based in Washington, USA.
The company is planning to diversify into the field of software development to expand
the business. For this purpose, the CEO has decided to create a new Web site in HTML5.
The CEO has prepared a layout for the new Web site as shown in figure 4.1.

Figure 4.1: Five Years Sales Report

As a Web site Design company representative, you need to perform the following tasks:
1. Create the five pages as shown in the NAV section.
2. Link all the pages to other pages.

Aptech Ltd

Version 1.0

Page 6 of 21

HTML5 NexTGen Web

Assignments

Introduction to CSS3
Assignment Question
Quest Gamer is a gaming company headquartered at New York, USA. The company
wants to increase the number of online hits for their Website and sales of their product
by extending it to maximum number of clients around the globe. The management of the
company realized that this can be accomplished by creating a user friendly and attractive
Web site for the company. The Web site should display all the details of their products
and should also display information about the company.
The management decided to entrust this responsibility of creating an attractive Web site
for the company to you and has given instruction to make the site as pleasing as
possible by applying different styles to the contents displayed in the Web site. The
following functionalities are to be performed:
1. Prepare a layout for the new Web site.
2. Create an HTML file with appropriate class selectors.
3. Create an external style sheet for defining all the styles that will be applied to the
contents present on the Web page.

Aptech Ltd

Version 1.0

Page 7 of 21

HTML5 NexTGen Web

Assignments

Formatting Using StyleSheets

Assignment Question
Matador Inc. is a world renowned e-learning company in Texas, USA. The company
offers online courses for all subjects for students from junior to high school level.
Recently, the company started an online course for graduates pursuing different stream.
The management of the company has decided to upload the class notes to the Web site
for easy reference by the students. To achieve this, the Web site needs to be attractively
designed by including different font and text styles for easy identification of book names,
chapter names, and topics.
Assume that you are one of the Web site developers and have been assigned to perform
the following tasks:
1. Apply bullet list to all the book names. The booknames should be linked to respective
pages displaying the Table Of Contents (TOC).
2. Create Web pages where the detailed TOC of each book is displayed. For easy
readability, different font and text styles should be applied to the topics and
subtopics.
3. Add appropriate indentation or padding to each topics or subtopics.
4. Use different colored texts for easy identification of the different content. For
example, notes can be displayed in blue color, tips can be displayed in green color,
and so on.
Assignment Question

Aptech Ltd

Version 1.0

Page 8 of 21

HTML5 NexTGen Web

Assignments

Displaying Graphics and CSS3 Animation

Assignment Question
Dax Animations Inc. is a well-known computer graphics animation developing
company with its headquarters in California, USA. The core business of the company is
to create animation and high-end professional graphics in many Hollywood movies. The
company is in process of implementing a portal for the upcoming and aspiring animators.
The Web site should be user-friendly and must incorporate the latest technologies for an
efficient use.
Assume that you are part of the team for developing this portal at Dax Animations
Inc. and that you are expected to perform the following tasks:
1. Create an interactive home page designed so that the layout is user-friendly. For
example, the menus on the top-right having a colorful look with an introduction of
some Three-dimensional (3-D) work that will have interactivity and can be skipped.
2. Use of properly made Web page divisions incorporating various objects as per the
working of company. For example a login div, a div where recent updated work is
displayed as video clips or scenes. A div with a blog, forums, and so on.
3. Write codes to display the above with multiple images and links, so that the site can
be further updated if needed in future.

Aptech Ltd

Version 1.0

Page 9 of 21

HTML5 NexTGen Web

Assignments

Creating Navigational Aids and Division-based

Layout
Assignment Question
Delta Engineering is a construction company based in Florida, USA. The company is
trying to expand its business to other countries. In order to make the site user friendly
and attractive, they are planning to incorporate the new features of HTML5 to their Web
site. For this change to be incorporated in their Web site, they have taken the help of
one of the Web site designing vendor, DigiWorld Webmasters. They have been given
specific instruction to make the Web page interactive with graphic navigation bar.
Assume that you are a member of the Web site designing team for DigiWorld
Webmasters and have to perform the following tasks:
1. Create a Web page incorporating the HTML5 page layout.
2. Upgrade and replace the content of the Web site developed with HTML 4 elements
with appropriate HTML5 elements.
3. Create a graphics navigation bar with appropriate mouse hover effects. For example,
the Web page should have navigation facility to home page, blogs, testimonials, and
so on.
4. Create a text-only navigation bar at bottom of the Web page for those browsers
whose graphics have been turned off or browsers with no graphics capability.

Aptech Ltd

Version 1.0

Page 10 of 21

HTML5 NexTGen Web

Assignments

Creating Tables
Assignment Question
Max Designers is an advertising agency offering a number of services such as
designing of logos, promotions, and branding. They want to develop their company Web
site home page and also want to add all the details about the company with additional
graphics, text, animations, and arrange the content in an organized manner.
You are appointed as the team lead of the Max Designers. You need to perform the
following tasks:
1. Prepare a design template for the new Web site.
2. Create an HTML file using table elements.
3. Create three tables to display the progress in terms of revenues earned over the last
five years using the services provided by them such as designing of logos,
promotions, and branding over the years with header, footer, and caption elements.
4. Create a page layout using navigation element to display the different samples of
logo designs.

Aptech Ltd

Version 1.0

Page 11 of 21

HTML5 NexTGen Web

Assignments

HTML Forms
Assignment Question
Veronica Creators has their online Music Web site that contains the details of different
types of music such as rap, classical, western, and many more. They also want to add a
registration form for the customers to do online bookings. Veronica Creators decided to
create a registration form with validations.
As the team lead of the Design Team at Veronica Creators, you have to perform the
following tasks:
1. Create a registration form to accept the customer details.
2. Create validations for the important fields such as name, phone number, and e-mail
address.
3. Create payment details for the user and the discount offered.
4. Create login details such as username, password, and confirm password fields.

Aptech Ltd

Version 1.0

Page 12 of 21

HTML5 NexTGen Web

Assignments

HTML5 Audio and Video

Assignment Question
Caroline works for an online music company named, VideoBuzz as a team lead.
VideoBuzz are the pioneers in the field of audio and video products. The company has
decided to redesign their Web site by using the new features of HTML5. They want to
add the new movie releases to the Web site and also enable the visitors to view some
video clips of movies. They also want to do the same with the music section where they
want to play the prelude of all the musics that are being listed. This will enable the
visitors to listen and buy the products once they are satisfied.
Assume that you have been assigned the task of creating the Web site and implement
the following functionalities:
1. Create an HTML5 Web site using audio and video elements.
2. Create a list of different audio files using the audio element of HTML5. Also, enable
the visitors to listen to the prelude of the music that they are purchasing.
3. Display the clips of new movies using the video element of HTML5.

Aptech Ltd

Version 1.0

Page 13 of 21

HTML5 NexTGen Web

Assignments

Introduction to JavaScript
Assignment Question
Zent Developers is a reputed software company located at Washington, USA. The
company has received an order for creating mobile application for online shopping Web
site. The Web site should be created in such a manner that it is accessible by all mobile
devices so that the customer can order the products online. The CEO of the company has
decided to create the application using jQuery with HTML5.
Assuming that you are one of the developer at Zent Developers, you need to perform
the following tasks:
1. Create the Web site using HTML5.
2. Execute the Web site in the Opera Mobile Emulator to see that all the features of the
online shopping Web site are working fine.

Aptech Ltd

Version 1.0

Page 14 of 21

HTML5 NexTGen Web

Assignments

Operators and Statements

Assignment Question
Elexmedia is a small-scale software company in California. The company provides
personal loan to their employees. The loan details of employees are currently being
maintained in registers. The management team has observed many human errors such
as calculation errors and so on. Thus, this manual system of maintaining the register has
become unreliable. The management has decided to automate the process of
maintaining the loan details by creating a dynamic Web page. This Web page will allow
the automatic calculation of the total interest and loan amount payable by the
employees.
The management decided to entrust this duty of automating the process to you as you
are one of the Web developers hired by the company. The system should incorporate the
following functionalities:
Create a Web page that will accept the following details:
1. Employee ID, name, address, designation, loan amount, date of loan taken, interest,
and maturity date.
2. Check that the employees ID must be of minimum four characters and must include
the letter E at the beginning.
3. Calculate and display the loan amount and interest payable based on the designation
of the employee.

Aptech Ltd

Version 1.0

Page 15 of 21

HTML5 NexTGen Web

Assignments

Loops and Arrays

Assignment Question
Herald University is a world renowned university in Las Vegas. The university offers
different types of courses to their students. The management of the university has
noticed that the number of students enrolling for their university is increasing. Also, they
are having international students who are enrolling from different parts of the world.
Thus, to simplify this process they plan to create a Web site that will enable their
students to enroll online.
Assume that you are one of the developers and have to perform the following tasks:
1. Create a Web page that accepts the student details such as name, address, contact
information, qualification, and so on for registration. After a student enters these
details and clicks Submit, a Web page should appear that confirms with the student
that the entered data are valid.
2. Use two-dimensional arrays and loops to display the students details on a Web page
in a tabular format.
Assignment Question

Aptech Ltd

Version 1.0

Page 16 of 21

HTML5 NexTGen Web

Assignments

Functions and Objects

Assignment Question
BioAnalysis Scientific Systems is a well-known research centre headquartered at
California, USA. The staffs of the centre are responsible for collecting data on various
environmental elements and natural phenomena. The staff then analyzes this data,
researches on the found data, and performs scientific calculations on it. This will help
them to study natural changes in the environment, which they can publish in journals
and papers to spread awareness among masses. The management has decided to
perform all these calculations on their Web site using HTML and JavaScript.
Assume that you are one of the developers at BioAnalysis Scientific Systems and
have to create a Web site for researchers that will perform the following tasks:
1. Create a Web page that will accept inputs on various research data, perform
calculations, and will display the results. They are as follows:
a. Minimum, maximum, and average temperatures of any locality in the world at
a specified date and time
b. Population of any town and state in the world and the density/km
c. Average literacy percentage of any city in the world
d. Average qualifications of the population (Graduate/Postgraduate and so on)
2. Use appropriate built-in objects and create custom objects to store and manipulate
information.

Aptech Ltd

Version 1.0

Page 17 of 21

HTML5 NexTGen Web

Assignments

Building a Mobile Web Application

Assignment Question
FaceMake Inc. is a well-known cosmetic company that manufactures cosmetic products
and is based in Florida, USA. The company has observed that customers across the
globe are appreciating their products and that their marketing strategies are attracting
more customers. One of frequent feedbacks from their customers is to provide the
facility of viewing the cosmetic products from their mobile devices. This will help the
customers to view the products while they are on the move.
Therefore, the management team has decided to create a mobile Web site. The mobile
Web site will allow the customers to search for different cosmetic products and order
them.
Assume that you are a Web site developer for different types of mobiles and have to
perform the following tasks:
1. Create an index.html page, which displays the gallery of the cosmetic products. Use
jQuery API for displaying cosmetic products on the index.html page.

2. Create an external style sheet whose styles will be applied to the index.html page.

3. Apart from a common style sheet, create different style sheets that are loaded
depending on the screen size. This means, smaller screens with less than 480 pixels
will be applied with one set of styles. Screens between 480 pixels and 1024 pixels
will be loaded with another set of styles. Screens larger than 1024 pixels will be
applied with another set of styles. Use media queries to achieve this.

4. The background and text color should change depending on the orientation of the
Web page, such as portrait or landscape.

5. If any cosmetic product is selected by the customer, then an order form is displayed,
which will allow him/her to place the order.

Aptech Ltd

Version 1.0

Page 18 of 21

HTML5 NexTGen Web

Assignments

Canvas and JavaScript

Assignment Question
Oxem Technologies is a reputed software company located in California, USA. The
company Web site deals with different types of mobile products such as laptops,
smartphones, ipads, tablets, and notebooks. The company already has a Web site that is
accessed by users. They want to enhance the Web site by adding different types of
images, text, and videos on their Web site. They also want to arrange the content in an
organized and systematic manner.
As the Head of the Design Team at Oxem Technologies, you have to perform the
following tasks:
1. Create the Web pages using the canvas element.
2. Add three images on the canvas.
3. Draw a rainbow as the logo of the company using curves, arcs, and lines on the
canvas.

Aptech Ltd

Version 1.0

Page 19 of 21

HTML5 NexTGen Web

Assignments

HTML5 Web Storage

Assignment Question
FunGames is an online game services company that is been recently established in
Berlin. The Web site allows the user to enter his/her name before playing any of the
games, such as bike or car racing. Recently, they have developed a bike racing game. To
attract users towards the game, the site offers prizes to the users who are playing the
game for the 10th time on the site. To achieve this, the company has decided to keep the
count of the users hits.
Assume that you are one of the Web site developers and have to perform the following
tasks:
1. Create a form to accept the username. The username should be used with the
welcome message on all the page of the Web site.

2. Create a count variable which will keep count of the number of times the game is
clicked by the user. Based on the value of the count, if it is more than 10, a prize
message should be displayed to the user.

3. Create a players scores link for each game, which displays the details of the players
with their scores, while playing the game.

4. Use appropriate Web storage for each of the tasks.

Aptech Ltd

Version 1.0

Page 20 of 21

HTML5 NexTGen Web

Assignments

HTML5 Geolocation and APIs

Assignment Question

WizPro Inc. is a prominent firm based at Romania, Central Europe. The firm
is providing IT enabled services across Europe. Foodyland is a hotel having its
base in Brasov, Romania with its branches spread across the World.
Foodyland has given the contract to WizPro Inc. for developing a Web site
that will provide information about the hotel, its facilities, and tariff rates. The
site will include links for booking room in the hotel and also accepting reviews
from users.
Assume that you are one of the developers and have to perform the following
tasks:
1. Provide the different locations of Foodyland on the map. The user can get
the details of the hotel location by clicking the marks present on the map.
2. Provide a facility for the customers to post their reviews. The customers can
drag the photos and drop them on the Web site while providing their reviews.

Aptech Ltd

Version 1.0

Page 21 of 21