20.11.

2022

Course Title: Introduction to Web Programming

Course Code: 22PLC15A/22PLC25A CIE Marks 50
Course Type (Theory/Practical Integrated SEE Marks 50
/Integrated ) Total Marks 100
Teaching Hours/Week (L:T:P: S) 2:0:2 Exam Hours 03
Total Hours of Pedagogy 40 hours Credits 03
Course objectives
⚫ To use the syntax and semantics of HTML and XHTML
⚫ To develop different parts of a web page
⚫ To understand how CSS can enhance the design of a webpage.
⚫ To create and apply CSS styling to a webpage
⚫ To get familiarity with the JavaScript language and understand Document Object
Model handling of Java Script
Teaching-Learning Process
These are sample Strategies, which teacher can use to accelerate the attainment of the various course outcomes
and make Teaching –Learning more effective
1. Use https://pythontutor.com/visualize.html#mode=edit in order to visualize the operations of Javascripts
2. Chalk and talk
3. Onine demonstration
4. Hands on problem solving

Module-1 (8 hours)
Module-1:Traditional HTML and XHTML:

First Look at HTML and XHTML, Hello HTML and XHTML World, HTML and XHTML: Version
History, HTML and XHTML DTDs: The Specifications Up Close, (X)HTML Document Structure,
Browsers and (X)HTML, The Rules of (X)HTML, Major Themes of (X)HTML, The Future of
Markup—Two Paths?

TextBook1: Chapter 1
Module-2 (8 hours)
Module-2: HTML5:

Hello HTML5, Loose Syntax Returns, XHTML5, HTML5: Embracing the Reality of Web Markup,
Presentational Markup Removed and Redefined, HTML5 Document Structure Changes, Adding
Semantics, HTML5’s Open Media Effort, Client-Side Graphics with <canvas>, HTML5 Form
Changes, Emerging Elements and Attributes to Support Web Applications

TextBook1: Chapter 2

Module-3 (8 hours)
Module-3: Cascading Style Sheets (CSS)

Introduction, CSS Overview , CSS Rules, Example with Type Selectors and the Universal Selector,
CSS Syntax and Style, Class Selectors, ID Selectors, span and div Elements, Cascading, style
Attribute, style Container, External CSS Files, CSS Properties, Color Properties, RGB Values for
Color, Opacity Values for Color, HSL and HSLA Values for Color, Font Properties, line-height
Property, Text Properties, Border Properties, Element Box, padding Property, margin Property , Case
1
 20.11.2022

Study: Description of a Small City’s Core Area.

TextBook2-: Chapter 3

Module-4 (8 hours)
Module-4: Tables and CSS, Links and Images

Table Elements, Formatting a Data Table: Borders, Alignment, and Padding, CSS Structural Pseudo-
Class Selectors, thead and tbody Elements, Cell Spanning, Web Accessibility, CSS display Property
with Table Values, a Element, Relative URLs, Navigation Within a Web Page, CSS for Links,
Bitmap Image Formats: GIF, JPEG, PNG, img Element, Responsive Images, Positioning Images,
Shortcut Icon, iframe Element .

TextBook2: 5.2 to 5.8, 6.2, 6.3, 6.6., 6.7, 6.9, 6.10, 6.12, 7.2 to 7.4

Module-5 (8 hours)
Module-5: Introduction to JavaScript: Functions, DOM, Forms, and Event Handlers

History of JavaScript, Hello World Web Page, Buttons, Functions, Variables, Identifiers, Assignment
Statements and Objects, Document Object Model, Forms and How They’re Processed: Client-Side
Versus Server-Side, form Element, Controls, Text Control, Accessing a Form’s Control Values, reset
and focus Methods

TextBook2: 8.2 to 8,13, 8.15, 8.16

Course outcome (Course Skill Set)

At the end of the course the student will be able to:
CO1 Explain the historical context and justification for HTML over XHTML
CO2
Develop HTML5 documents and adding various semantic markup tags

CO3
Analyse various attributes, values and types of CSS

CO4
Implement core constructs and event handling mechanisms of JavaScript.

Programming Assignments:

1. Create an XHTML page using tags to accomplish the following:

(i) A paragraph containing text “All that glitters is not gold”. Bold face and italicize this text
(ii) Create equation:
𝑥 = 1/3(𝑦12 + 𝑧12

(iii) Put a background image to a page and demonstrate all attributes of background image
(iv) Create unordered list of 5 fruits and ordered list of 3 flowers

2
20.11.2022

2. Create following table using XHTML tags. Properly align cells, give suitable cell padding and
cell spacing, and apply background color, bold and emphasis necessary

SubjectA
Sem1 SubjectB
SubjectC
SubjectE
Department Sem2 SubjectF
SubjectG
SubjectH
Sem3 SubjectI
SubjectJ

3. Use HTML5 for performing following tasks:

(i) Draw a square using HTML5 SVG , fill the square with green color and make 6px brown
stroke width
(ii) Write the following mathematical expression by using HTML5 MathML.
d=x2-y2
(iii) Redirecting current page to another page after 5 seconds using HTML5 meta
tag
4. Demonstrate the following HTML5 Semantic tags- <article>, <aside>, <details>, <figcaption>,
<figure>, <footer>, <header>, <main>, <mark>, <section> for a webpage that gives information
about travel experience.

5. Create a class called income, and make it a background color of #0ff.

Create a class called expenses, and make it a background color of #f0f.
Create a class called profit, and make it a background color of #f00.

Throughout the document, any text that mentions income, expenses, or profit, attach the
appropriate class to that piece of text. Further create following line of text in the same document:

The current price is 50₹ and new price is 40₹

6. Change the tag li to have the following properties:

• A display status of inline
• A medium, double-lined, black border
• No list style type
Add the following properties to the style for li:
• Margin of 5px
• Padding of 10px to the top, 20px to the right, 10px to the bottom, and 20px to
the left
Also demonstrate list style type with user defined image logos

3
 20.11.2022

7. Create following web page using HTML and CSS with tabular layout

8. Create following calculator interface with HTML and CSS

9. Write a Java Script program that on clicking a button, displays scrolling text which moves from
left to right with a small delay

10. Create a webpage containing 3 overlapping images using HTML, CSS and JS. Further when the
mouse is over any image, it should be on the top and fully displayed.
Assessment Details (both CIE and SEE)
The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is 50%. The
minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of 50). The minimum passing
mark for the SEE is 35% of the maximum marks (18 marks out of 50). A student shall be deemed to have satisfied
the academic requirements and earned the credits allotted to each subject/ course if the student secures not less
than 35% (18 Marks out of 50) in the semester-end examination(SEE), and a minimum of 40% (40 marks out of
100) in the sum total of the CIE (Continuous Internal Evaluation) and SEE (Semester End Examination) taken
together.
Continuous Internal Evaluation(CIE):
Two Unit Tests each of20 Marks (duration 01 hour)
• First test after the completion of 30-40 % of the syllabus
• Second test after completion of 80-90% of the syllabus
One Improvement test before the closing of the academic term may be conducted if necessary. However best two
tests out of three shall be taken into consideration.
Two assignments each of 10 Marks
The teacher has to plan the assignments and get them completed by the students well before the closing of the
term so that marks entry in the examination portal shall be done in time. Formative (Successive) Assessments
4
 20.11.2022

include Assignments/Quizzes/Seminars/ Course projects/Field surveys/ Case studies/ Hands-on practice

(experiments)/Group Discussions/ others. . The Teachers shall choose the types of assignments depending on
the requirement of the course and plan to attain the Cos and POs. (to have a less stressed CIE, the portion of
the syllabus should not be common /repeated for any of the methods of the CIE. Each method of CIE should
have a different syllabus portion of the course). CIE methods /test question paper is designed to attain the
different levels of Bloom’s taxonomy as per the outcome defined for the course.
The sum of two tests, two assignments, will be out of 60 marks and will be scaled down to 30 marks
CIE for the practical component of the Integrated Course
• On completion of every experiment/program in the laboratory, the students shall be evaluated and
marks shall be awarded on the same day. The15 marks are for conducting the experiment and
preparation of the laboratory record, the other 05 marks shall be for the test conducted at the end of
the semester.
• The CIE marks awarded in the case of the Practical component shall be based on the continuous
evaluation of the laboratory report. Each experiment report can be evaluated for 10 marks. Marks of all
experiments’ write-ups are added and scaled down to 15 marks.
• The laboratory test (duration 02/03 hours) at the end of the 14th /15th week of the semester /after
completion of all the experiments (whichever is early) shall be conducted for 50 marks and scaled down
to 05 marks.
Scaled-down marks of write-up evaluations and tests added will be CIE marks for the laboratory component of
IPCC for 20 marks.

Semester End Examination (SEE):

SEE for IC
Theory SEE will be conducted by University as per the scheduled time table, with common question papers
for the course (duration 03 hours)
1. The question paper will have ten questions. Each question is set for 20 marks.
2. There will be 2 questions from each module. Each of the two questions under a module (with a
maximum of 3 sub-questions), should have a mix of topics under that module.
3. The students have to answer 5 full questions, selecting one full question from each module.
The theory portion of the Integrated Course shall be for both CIE and SEE, whereas the practical
portion will have a CIE component only. Questions mentioned in the SEE paper shall include
questions from the practical component).
Passing standard:
• The minimum marks to be secured in CIE to appear for SEE shall be 12 (40% of maximum marks-
30) in the theory component and 08 (40% of maximum marks -20) in the practical component. The
laboratory component of the IPCC shall be for CIE only. However, in SEE, the questions from the
laboratory component shall be included. The maximum of 04/05 questions to be set from the
practical component of IPCC, the total marks of all questions should not be more than 30 marks.
• SEE will be conducted for 100 marks and students shall secure 35% of the maximum marks to
qualify for the SEE. Marks secured will be scaled down to 50.

Suggested Learning Resources:

Books (Title of the Book/Name of the author/Name of the publisher/Edition and Year)

TextBook-1: HTML & CSS: The Complete Reference Thomas A. Powell, , Fifth Edition, Tata
McGraw Hill,

5
 20.11.2022

TextBook-2: WEB PROGRAMMING with HTML5, CSS and JavaScript, John Dean, Jones &
Bartlett Learning, First Edition
Web links and Video Lectures (e-Resources):

https://onlinecourses.swayam2.ac.in/aic20_sp11/preview

Activity Based Learning (Suggested Activities in Class)/ Practical Based learning

● Develop simple GUI interfaces for a computer program to interact with users

COs and POs Mapping (Individual teacher has to fill up)

COs POs
1 2 3 4 5 6 7
CO1
CO2
CO3
CO4

Level 3- Highly Mapped, Level 2-Moderately Mapped, Level 1-Low Mapped, Level 0- Not Mapped