Web Development Practice

Course Code: DI01032011
Credits: 3
Semester: 1st
Program: Information and Communication Technology
Level: Diploma

Gujarat Technological University (GTU)
w.e.f. Academic Year: 2024-25
Category of the Course: ESC
Prerequisite: COMPUTER BASICS

Program Name	Level	Branch	Course Code	Course Name	Semester	Category
Diploma in Engineering	Diploma	Information And Communication Technology	DI01032011	Web Development Practice	1st	ESC

RATIONALE

Internet is widely used in different areas such as banking, e-commerce, education and many others. Different technologies are used to develop web applications but HTML is the core component in all types of applications for formatting and presenting the web content. This course will impart skill sets related to designing HTML web pages, using cascading style sheets and embedding Java script using open-source compiler. This course will also serve as a pre-requisite for the advanced web development technologies, which students will learn in the upcoming semester.

COURSE OUTCOMES

After Completion of the Course, Student will able to:

No.	Course Outcomes	RBT Level
01	Create structured webpages using Hypertext Markup Language.	R, U
02	Apply CSS to style and define the layout of the web pages.	R, U, A
03	Use JavaScript to develop interactive simple webpages.	R, U, A
04	Develop a professional web page using JavaScript and CSS	R, U, A

Where R: Remember; U: Understanding; A: Application, N: Analyze and E: Evaluate C: Create (as per Revised Bloom's Taxonomy)

TEACHING AND EXAMINATION SCHEME

Teaching Scheme (In Hours)			Total Credits L+T+(PR/2)	Assessment Pattern and Marks				Total Marks
L	T	PR	C	Theory		Tutorial / Practical
				ESE (E)	PA / CA (M)	PA/CA (I)	ESE (V)
0	1	4	3	0	0	20	30	50

COURSE CONTENT

Unit No.	Content	No. of Hours	% of Weightage
1. Web Development Basics	1.1 Overview of Web Design Concepts 1.2 Web Development Teams 1.3 Web Project Management Fundamentals 1.4 Web Site Development Process 1.5 Web Page Layout and Elements 1.6 Web Site Usability and Accessibility 1.7 Configure Browsers Setting 1.8 Navigation Concepts 1.9 Web Graphics 1.10 Multimedia and the Web	6	8
2. Hyper Text Markup Language (HTML)	2.1 HTML and the Evolution of Markup languages 2.2 HTML formatting tags 2.3 Create Hyperlink, Tables 2.4 Create Web Forms 2.5 Multimedia Inserting Techniques 2.6 Create Frames 2.7 GUI HTML Editors 2.8 Site Content and Metadata	22	32
3. Cascading Style Sheets	3.1 Cascading Style Sheets for Web page design 3.2 Creating CSS rules in Dreamweaver 3.3 Format Text with CSS 3.4 Use of CSS Selectors 3.5 Embed Style Sheets 3.6 Attach External Style Sheets	10	14
4. Introduction to JavaScript	4.1 Introduction to JavaScript 4.2 Basic Syntax - Statements, Comments, Data types, Variables 4.3 Operators- Arithmetic, logical, comparison 4.4 Working with built-in functions alert (), prompt (), parsing functions, eval ().	08	11
5. User Defined Function and decision making in JavaScript	5.1 Conditional statements 5.2 Loop statements 5.3 Working with user defined functions 5.4 Document Object Model – Accessing HTML elements into JavaScript (Window, Document, Form, Input elements, no script tag) HTML Events (on change, on click, on mouse over, on mouse out, on key down, on load).	24	35

SUGGESTED SPECIFICATION TABLE WITH MARKS (THEORY)

Distribution of Theory Marks (in %)

R Level	U Level	A Level	N Level	E Level	C Level
------NOT APPLICABLE-----

Where R: Remember; U: Understanding; A: Application, N: Analyze and E: Evaluate C: Create (as per Revised Bloom's Taxonomy)

REFERENCES/SUGGESTED LEARNING RESOURCES

(a) Books:

HTML 5 Blackbook By DT Editorial services, Dreamtech press, New Delhi
HTML & CSS: The Complete Reference by Thomas Powell, Tata McGrew Hills, New Delhi, 2010
JavaScript the Complete Reference by Thomas Powell, Tata McGrew Hills, New Delhi, 2004

(b) Open-source software and website:

SUGGESTED COURSE PRACTICAL LIST

Sr. No.	Practical Outcomes (PrOs)	Unit No.	Approx.Hrs. required
1	Write various web terminologies	I	02
2	Use and configure different web browsers and navigate different websites through it.	I	02
3	Use formatting tags to create web page as per given sample.	II	02
4	Use hyper link tag to navigate through different web pages as per given sample.	II	02
5	Use sorted & unsorted list to create web page as per given sample page.	II	02
6	Design a web page and embed various multimedia features in the page.	II	02
7	Use semantic tags to organize web page contents as per given sample.	II	02
8	Use table tag to format web page. Also create the Time Table of your class using table tag.	II	02
9	a. Create a registration webpage using different HTML form elements. b. Create a feedback form using different HTML form elements.	II	02+02
10	Use inline, internal and external style sheets for the student registration form and bank account form created in previous practical.	III	02+02
11	a. Use different CSS elements to create and format your Profile Page (Note: use CSS Background, Text, Font, Tables, Links, Images, Margin etc) b. Create and format your class time table Page Using Different CSS Elements (Note: use CSS Background, Text, Font, Tables, Links, Images, Margin etc)	III	02+02
12	Use JavaScript to perform the following operations: a. find roots of quadratic equation b. find the highest from given three values	IV	02+02
13	Use built in JavaScript functions to perform various operations.	IV	02
14	Use JavaScript to check whether given character is vowel or consonant using switch case.	V	04
15	Use JavaScript to print first 10 even numbers.	V	02
16	Use JavaScript to calculate power of given number.	V	02
17	Use JavaScript to print multiplication table of given number.	V	04
18	Use JavaScript to perform the following operations: a. takes input of student name and address and display in a dialog box. b. change background color of webpage as selected by user from a list of colors given in combo box.	V	02+02
19	Use JavaScript to perform the following operations: a. Calculate the factorial of a given number entered into a textbox. Display the result in another textbox. b. Perform arithmetic operations on two numbers entered into textboxes. Use Radio buttons to select arithmetic operations (Addition, Subtraction, Multiplication and Division). Display the result in another textbox	V	02+02
20	Use JavaScript to perform the following operations: a. Calculate the factorial of a given number entered into a textbox. Display the result in another textbox. b. Perform arithmetic operations on two numbers entered into textboxes. Use Radio buttons to select arithmetic operations (Addition, Subtraction, Multiplication and Division). Display the result in another textbox.	V	02+02

TOTAL: 60 Hours

LIST OF LABORATORY/LEARNING RESOURCES REQUIRED

SUGGESTED PROJECT LIST

a) Construct departmental website b) Develop any domain specific website (Food, Automobiles, Educational, Business etc.) c) Develop a website showcasing information about electronic wastes and its dumping process.

SUGGESTED ACTIVITIES FOR STUDENTS

Other than the classroom and laboratory learning, following are the suggested student related co-curricular activities which can be undertaken to accelerate the attainment of the various outcomes in this course: Students should perform following activities in group and prepare reports of about 5 pages for each activity. They should also collect/record physical evidences for their (student's) portfolio which may be useful for their placement interviews:

a) Identify tools used for web page development and present its features. b) Undertake course "HTML" available on Swayam online platform. (https://onlinecourses.swayam2.ac.in/aic20_sp11/preview) c) Undertake course "JavaScript for Beginners Specialization" available on coursera online platform. (https://www.coursera.org/specializations/javascript-beginner) or any other such site. d) Undertake course "HTML, CSS, and Javascript for Web Developers" available on coursera online platform. (https://www.coursera.org/learn/html-css-javascript-for-web-developers) or any other such site.