Guidelines of DSE Semester V/ Generic Elective Semester IV
(NEP UGCF 2022)
DSE/GE4b: Introduction to Web Programming
(Effective from Academic Year 2024 – 25)
S.
Unit Name Chapters References Hours
No.
1 (Pg. HTML 1 – HTML 21)
1. Introduction (Introduction, Exploring the Internet, Planning [1] 5
a website)
1 (Pg. HTML 22 – HTML 25 (except using
web Authoring tools), HTML 30 - HTML 37)
3 (Pg. HTML 83 – HTML 94, HTML 98 –
HTML 122) (Introduction, Adding Images to a
2. HTML website, Exploring Div Elements, Adding [1] 12
Links to a webpage, Adding Lists)
8 (Pg. HTML 402 – HTML 416, HTML 423 –
HTML 438) (Discovering Tables & Table style,
Creating Webpage Forms)
4 (Pg. HTML 143 – HTML 185) (Introduction,
Cascading Using CSS, Inline Elements, Block Elements,
3. Style Sheet External CSS, Linking CSS, Webpage layout, [1] 8
(CSS) CSS for Structural Elements, Id Selectors, Class
attributes)
14,
15 (Pg. 343 – 350, 353(if statement), 356 (?
operator), 357 – 361), [2]
16 (Pg. 363 – 366),
17 (Pg. 385 – 390)
4. JavaScript 10
9 (Pg.150 – 155, 156 – 157)
(Java Scripts Events Handlers: onBlur, onClick,
OnDblClick, onFocus, onKeyPress, [3]
onMouseOut, onMouseOver, onSelect,
onSubmit)
21 (Pg. 512 – 526, 530 – 538 before animation,
542 – 544) [2] 8
jQuery and
5.
JSON 8 (Pg. 376 – 377) [4] 2
Textbooks:
1. Minnick, J. Responsible Web Design with HTML5 and CSS, 9th edition (Hard Copy),
Cengage Learning, 2017.
2. Nixon, R. Learning PHP, MySQL & JavaScript with jQuery, CSS and HTML5, 6th
Edition, O'Rielly, 2021.
3. Ivan Bayross, Web Enabled Commercial Application Development Using Html, Dhtml,
Javascript, Perl CGI, 4th Revised Edition, BPB Publications, 2010 (Reprint 2022).
4. Duckett, J. JavaScript and JQuery: Interactive Front-End Web Development, Wiley,
2014.
Practical List
HTML
1. Create an HTML document with following formatting – Bold, Italics, Underline, Colors,
Headings, Title, Font and Font Width, Background, Paragraph, Line Breaks, Horizontal
Line, marquee text.
2. Create an HTML document with Ordered and Unordered lists.
3. Create an HTML document demonstrating use of images in webpages (including images
as logos, cell data in a table, background of a table, clickable icons, etc)
4. Create an HTML document to demonstrate Internal and External linking.
5. Create an HTML to display the following table:
6. Create an HTML page demonstrating the following semantic tags:
a. Header f. Details
b. Nav g. Summary
c. Main h. Figure
d. Section i. Figure caption
e. Footer
7. Create a student registration form using HTML which has the following controls:
a. Text Box d. Option/radio buttons
b. Text Area e. Check boxes
c. Dropdown box f. Reset and Submit button
On pressing the Submit button, a message “Form submitted” should be displayed.
CSS
1. Create a webpage for your department with a drop-down navigation menu for faculty,
courses, activities, etc. Implement the webpage using styles, rules, selectors, ID, class.
2. Add appropriate CSS code to change the text, list, div element and table properties of
the HTML questions above.
Javacript
1. Write a Javascript code to accept a number from the user through the prompt and print
its multiplication table.
2. Create a HTML form having two text boxes and 4 buttons (as shown below) .
Write a Javascript code to implement respective operation when a user clicks on a
button. The result of the operation is to be displayed on an alert window.
3. Write a Javascript code to change the background color of a text box when text box
gets focus.
4. Write a Javascript code for Q7 (of HTML above) to input and validate all data. Create
functions to perform validation of each element, for example:
a. Roll number is a 7-digit numeric value.
b. Name should be an alphabetical value (String).
c. Non-empty fields like DOB.
jQuery and JSON
1. Change text color and contents using button click events using jQuery.
2. Select elements using ID, class, elements name, attribute name.
3. Write a JQuery function to test whether a date is a weekend.
4. Demonstrate various events: blur, change, focus, cick, dblClick, submit.
5. Write a jQuery code that demonstrates the mouseOver and mouseOut event.
a. The web page should have a hyperlink labeled “It shows the mouse events” and
linked to your college website.
b. When the mouse is hovered over the link the background color of webpage changes
to green and link text is changed to “I’m green now”.
c. When the mouse is taken away from the link the background color of webpage
changes to red and the link text changes to “I’m red now”.
