Course

Unit I

HTML5 and CSS3: HTML5- Basic Tags, Tables, Forms.HTML5 Tags, HTML Graphics, HTML media, HTML Graphics, HTML, APIs.
CSS – Background, Borders, margin, Box model. Styling text, fonts, list, links, tables. CSS overflow, float, inline blocks, pseudo-classes, pseudo-elements. CSS border images, rounded corners.

Unit II

JavaScript – Client-side scripting using java script, Introduction to JavaScript, internal and external JavaScript files, variables, control statements, loops, Arrays, string handling, functions in JavaScript, inputting, and outputting from form elements to JavaScript. DOM concept, creating html elements using java script. Drawing 2D shapes, handling events. Introduction to AJAX

Unit III

Building Single page applications with Angular JS. Single page application – introduction, two-way data binding, MVC in angular JS, controllers, getting user inputs, loops, Client-side routing – accessing URL data, diverse ways to provide data in angular JS.

Unit IV

Server-side scripting, Difference between client side and server-side scripting languages. Introduction to PHP, variables, control statements, loops, Arrays, string handling, PHP forms, Global variables in PHP, Regular expression and pattern matching, Database programming: inputting and outputting data from MySQL using PHP, insertion, deletion and updating data.
State management in web applications, cookies, Application, and session state.

Lab Syllabus

HTML5 Basics

• Create basic HTML pages
• Use headings, paragraphs, lists, images
• Internal & external CSS linking

HTML5 Tables, Forms & Media

• Create tables (row/column span)
• Build HTML forms
• Embed audio & video
• Basic canvas usage

HTML5 Semantic Tags & APIs

• Use semantic tags (header, section, etc.)
• Work with HTML5 APIs (local storage, geolocation – demo)
• Draw shapes using Canvas

CSS3 Fundamentals

• Apply selectors, classes, IDs
• Box model, borders, backgrounds
• Font & text styling

Advanced CSS3

• Style lists, tables, links
• Use floats, inline‑block
• Apply pseudo‑classes & pseudo‑elements
• Rounded corners, border images
• Simple webpage layout

JavaScript Basics

• Internal & external JS
• Variables, datatypes, operators
• If/else & loops
• Taking input from user

JavaScript Arrays, Strings & Functions

• Array operations
• String handling
• User‑defined functions
• Form validation
• DOM basics

DOM Programming & Events

• Creating & removing HTML elements using JS
• Accessing DOM elements
• Event handling (onclick, mouseover, etc.)
• 2D drawing with Canvas API

AJAX Introduction

• Asynchronous requests
• Updating webpage without reloading
• Simple AJAX form submission
• Handling JSON responses

AngularJS Basics

• AngularJS module creation
• Controllers
• Two‑way data binding
• Directives (ng-model, ng-repeat)

AngularJS Routing & User Input

• Forms using AngularJS
• Handling user inputs
• Client‑side routing
• Accessing URL parameters

PHP Basics (Server‑Side Scripting)

• PHP syntax
• Variables, conditional statements, loops
• Arrays & string functions
• Handling form data with PHP ($_POST, $_GET)

PHP–MySQL Database Integration

• Connect PHP to MySQL
• Execute CRUD operations:
• Insert
• Update
• Delete
• Select
• Display DB results in HTML

State Management in Web Apps

• Cookies
• Sessions
• Simple login session handling

Course Objective(s)

• To understand the concepts and techniques underlying website creation with HTML, CSS.
• To create client scripting with JavaScript using loops and control
• Able to create singe page web development applications in Angular JS and Server
• To create database applications with PHP and

Course Outcomes

CO-PO Mapping

Textbooks:

1. The Complete Reference, HTML and CSS by Thomas A Powell latest edition

References:

1. XML: The Complete Reference Heather Williamson latest edition
2. Web Reference: com

<table>
<tbody>
<tr>
<td>
<p>Assessment</p>
</td>
<td>
<p>Weightage (%)</p>
</td>
</tr>
<tr>
<td>
<p>Midterm</p>
</td>
<td>
<p>20</p>
</td>
</tr>
<tr>
<td>
<p>Continuous Assessment (including lab)</p>
</td>
<td>
<p>50</p>
</td>
</tr>
<tr>
<td>
<p>End Semester Exam</p>
</td>
<td>
<p>30</p>
</td>
</tr>
<tr>
<td>
<p><strong>Total Marks</strong></p>
</td>
<td>
<p>100</p>
</td>
</tr>
</tbody>
</table>