III B. Tech.

– II Semester
(20BT51202) WEB TECHNOLOGIES
(Common to CSE and CSSE)

Int. Marks Ext. Marks Total Marks L T P C

30 70 100 3 - - 3

PRE-REQUISITES: A Course on “Object Oriented Programming through Java”

COURSE DESCRIPTION: Hyper Text Markup Language (HTML); Features of HTML5;

Cascading Style Sheets (CSS); JavaScript; JQuery; Bootstrap; Hypertext Preprocessor
(PHP); MySQL.

COURSE OUTCOMES: After successful completion of this course, the students will be able
to:
CO1. Demonstrate knowledge on web page design elements, dynamic content and
database connection.
CO2. Analyze user requirements to develop web applications.
CO3. Design client-server applications using web technologies.
CO4. Demonstrate problem solving skills to develop enterprise web applications.
CO5. Apply HTML, CSS, JavaScript, JQuery, Bootstrap and PHP technologies for device
independent web application development.
CO6. Apply web technologies to develop interactive, dynamic and scalable web
applications for societal needs.

DETAILED SYLLABUS:

UNIT-I: HTML (09 periods)

Introduction: Fundamentals of HTML, Working with Text, Organizing Text in HTML,
Working with Links and URLs, Creating Tables, Working with Images, Canvas, Forms,
Frames and Multimedia.
HTML5: Introduction, HTML5 Document Structure, Creating Editable Content, Checking
Spelling Mistakes, Exploring Custom Data Attributes, Client-Side Storage, Drag and Drop
Feature, Offline Web Applications, Web Communications, Cross-Document Messaging and
Desktop Notifications.

UNIT-II: CSS AND JAVASCRIPT (10 periods)

CSS: Introduction, CSS Selectors, Inserting CSS in an HTML document, Backgrounds,
Fonts, and Text Styles, Creating Boxes, Displaying, Positioning and Floating Elements,
Features of CSS3, Media Queries.
Javascript: Overview of JavaScript, JavaScript Functions, Events, Image Maps and
Animations, JavaScript Objects, Working with Browser and Document Objects, JQuery -
Introduction, JQuery Selectors, Events, Methods to access HTML elements and attributes,
Introduction to AJAX.

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 211

UNIT-III: BOOTSTRAP (09 periods)
Getting Started with Bootstrap, Creating Responsive Layouts Using Bootstrap CSS - Basic
HTML structure for Bootstrap, Responsive classes, Rendering images, The grid system,
Constructing data entry forms, Packaged Components in Bootstrap - The page header,
Glyphicons, The navigation bar, Badges, Alerts, Toolbars and button groups, Panels.

UNIT-IV: INTRODUCTION TO PHP (09 periods)

Introduction, Data Types, Variables, Constants, Expressions, String Interpolation, Control
Structures, Functions, Arrays, Embedding PHP Code in Web Pages, Object Oriented PHP.

UNIT-V: PHP WEB FORMS AND MYSQL (08 periods)

PHP Web forms: PHP and Web Forms, Sending Form Data to a Server, Working with
Cookies and Session Handlers
PHP with MySQL: Interacting with the Database, Prepared Statement, Database
Transactions.

Total Periods: 45
Topics for self-study are provided in the lesson plan

TEXT BOOKS:
1. Kogent Learning Solutions Inc, HTML 5 Black Book: Covers CSS3, JavaScript, XML,
XHTML, AJAX, PHP and JQuery, Dreamtech Press, First Edition, 2011.
2. W. Jason Gilmore, Beginning PHP and MySQL, APress, Fourth Edition, 2011.

REFERENCE BOOKS:
1. Snig Bahumik, Bootstrap Essentials, PACKT Publishing, First Edition, 2015. (e-book).
2. Thomas A. Powell, The Complete Reference: HTML and CSS, Tata McGraw Hill, Fifth
Edition, 2010.
3. Andrea Tarr, PHP and MySQL, Willy India, First Edition, 2012.

ADDITIONAL LEARNING RESOURCES:

1. https://www.w3schools.com/php/DEFAULT.asp
2. https://www.w3schools.com/js/

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 212

 III B. Tech. – II Semester
(20BT51232) WEB TECHNOLOGIES LAB
(Common to CSE and CSSE)

Int. Marks Ext. Marks Total Marks L T P C

30 70 100 - - 3 1.5

PRE-REQUISITES: Courses on “Object Oriented Programming through Java” and “Web

Technologies”

COURSE DESCRIPTION: Hands-on experience on HTML, HTML5, CSS, JavaScript,

JQuery, Bootstrap, PHP and MySQL.

COURSE OUTCOMES: After successful completion of this course, the students will be able
to:
CO1. Demonstrate knowledge on web page design elements, dynamic content and
database connection.
CO2. Analyze user requirements to develop web applications.
CO3. Design client-server applications using web technologies.
CO4. Demonstrate problem solving skills to develop enterprise web applications.
CO5. Apply HTML, CSS, JavaScript, JQuery, Bootstrap and PHP technologies for device
independent web application development.
CO6. Apply web technologies to develop interactive, dynamic and scalable web
applications for societal needs.
CO7. Work independently or in teams to solve problems with effective communication.

LIST OF EXPERIMENTS:
1. Design the following static web pages of an online book store web application.

a. Home Page:

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 243

 b. Catalogue Page:
The catalogue page should display the following details of available books.
i. Snap shot of cover page ii. Title of the text book iii. Author name
iv. Publisher v. Price vi. More details link

Logo Name of the Book Store

Latest
Home Best Sellers Contact Us Search
Arrivals
Computers
Electronics
Electrical HTML5 Black Book
Bio-Tech Kogent Learning Solutions
More Details
Dreamtech Press
Rs. 570/-

Beginning PHP and

MySQL
4th Edition
More Details
W Jason Gilmore
Apress
Rs. 520/-

c. Registration Page:
Design the Registration page with the following fields and navigate it with create
an account link.
i. First Name ii. Last Name iii. Gender
iv. Date of Birth v. Username vi. Password
vii. Confirm Password viii. Address ix. Postal Code
x. Mobile No. xi. Email-Id

2. a. Design a web page to store username and password information using the local
storage concept.
b. Design a web page to store employee information including Name, Emp. Id,
Department, Salary and Address on a client’s machine using a real SQL database.

3. Apply the following styles to all web pages of online book store web application.
a. Fonts and Styles: font-family, font-style, font-weight and font-size
b. Backgrounds and colors: color, background-color, background-image and
background-repeat
c. Text: text-decoration, text-transformation, text-align and text-indentation, text-
align
d. Borders: border, border-width, border-color and border-style
e. Styles for links: A: link, A: visited, A: active, A: hover
f. Selectors, Classes, Layers and Positioning elements.

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 244

4. Write a JavaScript/JQuery code to validate the following fields of the Registration
web page.
a. First Name/Last Name - should contain only alphabets and the length should
not be less than 8 characters.
b. Username - It should contain combination of alphabets, numbers and
underscore. It should not allow spaces and special symbols.
c. Password - It should not less than 8 characters in length and it contains one
uppercase letter and one special symbol.
d. Date of Birth - It should allow only valid date; otherwise display a message
stating that entered date is invalid. Ex. 29 Feb. 2009 is an invalid date.
e. Postal Code: It must allow only 6 digit valid number.
f. Mobile No. - It should allow only numbers and total number of digits should be
equal to 10.
g. e-mail id - It should allow the mail id with the following format:
Ex. mailid@domainname.com

5. Design a web page with the following features using HTML5, JavaScript and JQuery
a. Displaying of images with Custom animated effects
b. Playing of selected video from the list of videos
c. Showing the animated text in increasing and decreasing font size
d. Changing the size of the area in a web page using DIV tag
e. Hiding and Showing elements in a web page.

6. Design a web page with the following features using Bootstrap and Media Query.
a. Components
b. Responsive tables
c. Responsive images and videos
d. Toolbars, Buttons and Lists

7. a. Deploy and navigate web pages of online book store using WAMP/XAMPP web
server.
b. Write a PHP program to read user name and favorite color from the HTML form.
Display the name of the user in green color and sets user favorite color as a
background for the web page.

8. Write a PHP code to read the username and password entered in the Login form of
the online book store and authenticate with the values available in cookies. If user
enters a valid username and password, welcome the user by username otherwise
display a message stating that, entered details are invalid.

9. Write a PHP code to read user details entered through the registration web page and
store the same into MySQL database.

10. Write a PHP code for storing books details like Name of the book, author, publisher,
edition, price, etc into MySQL database. Embed a PHP code in catalogue page of the
online book store to extract books details from the database.

11. Mini Project

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 245

REFERENCE BOOKS:
1. Kogent Learning Solutions Inc, HTML 5 Black Book: Covers CSS3, JavaScript, XML,
XHTML, AJAX, PHP and JQuery, Dreamtech Press, First Edition, 2011.
2. W. Jason Gilmore, Beginning PHP and MySQL, APress, Fourth Edition, 2011.
3. Snig Bahumik, Bootstrap Essentials, PACKT Publishing, First Edition, 2015. (e-book).

SVEC20 – B.TECH. – COMPUTER SCIENCE AND ENGINEERING 246