CSE326

Internet Programming Laboratory

1
Intructions for the students
1. The students will be shared the reading material and video content
weekly.
2. Before coming to the class, the student must go through the shared
content.
3. The students can clarify their doubts in the class.
4. The students are required to create account on freecodecamp.
5. The students will be assigned the tasks weekly from
freecodecamp.org and doubts regarding the same will be clarified by
the faculties in the class.

2
Assessment Scheme
1. ATT – 5
2. MTT – 20
3. CAP – 25
4. ETE – 50

3
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)

4
Basic components of course
HTML
CSS
JavaScript

5
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

6
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.

7
Course contents

8
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)

9
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

10
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

11
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

12
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

13
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

14
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

15
Unit IV (Working with Tables, Working
with Forms, CSS Grids and Webpage
Layouts)
Grid Introduction
Grid Container
Grid Item
Creating Different Layouts for Webpage

16
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

17
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

18
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

19
Unit VI (JavaScript DOM)
DOM Introduction
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM CSS
DOM Events

20
References
https://www.freecodecamp.org/learn/2022/responsive-web-design/
https://www.w3schools.com/html/
https://www.w3schools.com/tags/default.asp
https://www.w3schools.com/css/

21
Thank you

22