1

Dr. Navneet Kaur, Lovely

Professional University

CSE326
Internet Programming Laboratory
Dr. Navneet Kaur
 2
Dr. Navneet Kaur, Lovely
Professional University

Intructions for the students

 The students will be shared the reading material and video
content weekly.
 Before coming to the class, the student must go through the
shared content.
 The students can clarify their doubts in the class.
 The students are required to create account on
freecodecamp.
 The students will be assigned the tasks weekly from
[Link] and doubts regarding the same will be
clarified by the faculties in the class.
 3
Dr. Navneet Kaur, Lovely
Professional University

Intructions for the faculties

 The faculties must create account on [Link]
 The faculties should also refer to the shared content.
 The faculties must share the content will the students on
lpulive/ums.
 The faculties must summarize the shared content in the first
half of the lecture and second half can be utilized for doubt
clearing.
 After 2 weeks, the content will be enabled on codetantra.
 4
Dr. Navneet Kaur, Lovely
Professional University

Assessment Scheme
 ATT – 5
 MTT – 20
 CAP – 25
 ETE – 50
 5
Dr. Navneet Kaur, Lovely
Professional University

Continuous Assessment
Practicals
 CA 1 (MCQ based test) – 30 (HTML and CSS)
 CA 2 (Code based test) – 30 (JavaScript)
 CA 3 (Project – Group(size - 3)) – 30 (HTML, CSS and
JavaScript)
 6
Dr. Navneet Kaur, Lovely
Professional University

Basic components of course

 HTML
 CSS
 JavaScript
 7
Dr. Navneet Kaur, Lovely
Professional University

Course outcomes
 CO1 :: identify HTML document structure, work with basic
elements, and utilize different types of tags to create well-
structured web pages.
 CO2 :: apply text, create links, embed multimedia, and work
with images to enhance the visual and interactive aspects of
web pages.
 CO3 :: cultivate CSS selectors, properties, and the box
model on different HTML elements to effectively construct a
web page
 8
Dr. Navneet Kaur, Lovely
Professional University

Course outcomes
 CO4 :: construct and style tables, implement form controls,
and apply CSS to enhance the layout and functionality of
web forms.
 CO5 :: develop interactive web applications by incorporating
JavaScript code for variable manipulation, control
statements, looping, popup boxes, object manipulation, and
form validation.
 CO6 :: manipulate and interact with web page elements
dynamically using JavaScript DOM methods and properties.
 9
Dr. Navneet Kaur, Lovely
Professional University

Course contents
 10
Dr. Navneet Kaur, Lovely
Professional University

 Unit I (Exposure To HTML)

 Unit II (Working with Text, Links, Images and Tables in
HTML)
 Unit III (Cascading Style Sheets)
 Unit IV (Working with Tables, Working with Forms, CSS
Grids and Webpage Layouts)
 Unit V (JavaScript Application Development, JavaScript
Functions,Events and Validation)
 Unit VI (Javascript DOM)
 11
Dr. Navneet Kaur, Lovely
Professional University

Unit I (Exposure To HTML)

 HTML Document Structure
 Working with HTML Basic Elements: Title, Head, Body
 Working with Root and Metadata
 Horizontal Rules and Line Breaks
 Paragraphs
 Working with Citation, Quotation, Definitions, and Comments
 Types of Tags in HTML
 12
Dr. Navneet Kaur, Lovely
Professional University

Unit II (Working with Text, Links,

Images and Tables in HTML)
 Formatting Text with HTML Physical Style Elements
 Formatting Text with HTML Logical Style Elements
 Arranging Text
 Exploring Hyperlinks and Linking to a Mail System
 Exploring Link Relations
 Working with Images in a Web Page
 Displaying: Plain Text Bold Text, Italic Text, Small Text,
Subscripted Text, Superscripted Text
 Displaying Program Code
 Displaying Program Output
 13
Dr. Navneet Kaur, Lovely
Professional University

Unit II (Working with Text, Links,

Images and Tables in HTML)
 Displaying Keyboard Text
 Emphasizing Text
 Defining New Terms
 Short and Long Quotations
 Creating Links with the Anchor Tag
 14
Dr. Navneet Kaur, Lovely
Professional University

Unit III (Cascading Style

Sheets)
 CSS Rules: Link Rule and Style Rule
 Types of CSS
 CSS Properties: Text Controlling and Text Formatting
 CSS Selectors: Type Selector, ID Selector Class Selector
 Introduction to CSS and Types of CSS
 Introduction to CSS
 Types of CSS: Inline CSS, Internal CSS, External CSS
 CSS Box Model: Padding, Margin, Border
 <div> and <span> Tags in CSS
 Working with Background Images
 15
Dr. Navneet Kaur, Lovely
Professional University

Unit IV(Working with Tables, Working with

Forms, CSS Grids and Webpage Layouts)
 Working With Tables: Colspan and Rowspan
 Applying CSS on Tables
 Creating Hoverable Tables
 Working with Forms:
 Action Attribute
 Get and Post Methods
 16
Dr. Navneet Kaur, Lovely
Professional University

Unit IV(Working with Tables,

Working with Forms, CSS Grids and
Webpage Layouts)
 Form Elements and Controls:
 Text Inputs
 TextArea
 Buttons
 CheckBoxes
 Dropdown Boxes
 Radio Buttons
 Select and File Select
 Applying CSS on All Controls of Forms
 17
Dr. Navneet Kaur, Lovely
Professional University

Unit IV (Working with Tables,

Working with Forms, CSS Grids and
Webpage Layouts)
 Grid Introduction
 Grid Container
 Grid Item
 Creating Different Layouts for Webpage
 18
Dr. Navneet Kaur, Lovely
Professional University

Unit V (JavaScript Application

Development, JavaScript
Functions,Events and Validation)
 Incorporating JavaScript in the HEAD and BODY Element
 Using an External JavaScript File
 Using Variables and Operators
 Using Control Statements:
 if...else
 switch
 break and continue
 Using Looping Statements:
 while
 do ...while
 for
 19
Dr. Navneet Kaur, Lovely
Professional University

Unit V (JavaScript Application

Development, JavaScript
Functions,Events and Validation)
 Using Popup Boxes:
 Alert
 Confirm
 Prompt
 Working with JavaScript Objects, Properties, and Methods
 Working with Functions:
 Using Function Arguments
 Return Statement
 20
Dr. Navneet Kaur, Lovely
Professional University

Unit V (JavaScript Application

Development, JavaScript
Functions,Events and Validation)
 Working with JavaScript Events:
 Form-Based Events
 Keyboard-Based Events
 Mouse-Based Events
 JavaScript Form Validation
 21
Dr. Navneet Kaur, Lovely
Professional University

Unit VI (JavaScript DOM)

 DOM Introduction
 DOM Methods
 DOM Document
 DOM Elements
 DOM HTML
 DOM CSS
 DOM Events
 22
Dr. Navneet Kaur, Lovely
Professional University

References
 [Link]
esign/
 [Link]
 [Link]
 [Link]
 23
Dr. Navneet Kaur, Lovely
Professional University

Thank you