BPLCK205A Introduction to Web Programming syllabus for EE Stream Physics Group

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

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 , HTML5 Form Changes, Emerging Elements and Attributes to Support Web Applications

TextBook1: Chapter 2

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 Study: Description of a Small City’s Core Area.TextBook2-: Chapter 3

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 Withina 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

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:

CO1Explain the historical context and justification for HTML over XHTML

CO2Develop HTML5 documents and adding various semantic markup tags

CO3Analyse various attributes, values and types of CSS

CO4Implement 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.Create following table using XHTML tags. Properly align cells, give suitable cell padding and cell spacing, and apply background color, bold and emphasis necessary

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 lito 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

7.Create following web page using HTML and CSSwith 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 of 20 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 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 marksare 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/15thweek 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 topicsunder 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 practicalcomponent. 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, 20.11.20226

TextBook-2: WEB PROGRAMMING with HTML5, CSS and JavaScript, John Dean, Jones & Bartlett Learning, First Edition