Web Application Development-I

Paper Code: 
25CBCA303
Credits: 
03
Periods/week: 
03
Max. Marks: 
100.00
Objective: 

Course Objectives:

The course will enable the students to

1. Create web sites using HTML, CSS, JavaScript, PHP and Bootstrap.

2. Identify the tools needed to create web pages and dynamic client‐side & server‐side      webapplications.

 

Course Outcomes: 

Course

Learning Outcome

(at course level)

Learning and

teaching

strategies

Assessment

Strategies

Course

Code

Course

Title

 

 

 

 

25CBCA303

 

 

 

 

 

Web Application Development-I (Theory)

CO139. Design static webpages with well- structured  HTML and correct CSS layout.

CO140. Construct semantic web pages that prioritize enhanced readability, improved  search engine visibility, and increased accessibility for assistive technologies.

CO141. Apply box model to organize and position HTML elements on the screen.

CO142.  Apply various text effects and transitions in web pages.

CO143.           Create dynamic     webpages using JavaScript.

CO144.     Contribute effectively  in course- specific interaction

Approach in teaching: Interactive Lectures, Discussion, Reading assignments, Demonstration.

 

Learning activities for the students: Self learning assignments, Effective questions, Seminar presentation.

Class test, Semester end examinations, Quiz, Assignments, Presentation of website/webpages.

 

9.00
Unit I: 

Introduction  to  HTML:  Introduction  to  HTML,  HTML  web  page  structure,  The  HTML5 DOCTYPE. Heading, paragraphs, HTML Formatting, comments.

Cascading Style Sheets: Understanding Style Sheets, CSS Syntax and Applying Style Sheets to HTML document, Developing Style Sheets: inline, internal and external.

HTML: Images, tables, lists, block and inline elements, Iframes, HTML Links.

 

9.00
Unit II: 

Semantic elements:<article>, <aside>, <figcaption>, <figure>, <footer>, <header>,<main>, <nav>, <section>, <summary>, <time>

Introduction to HTML Forms: Form Object, Text element, Password element, Button element, submit button, reset button, Checkbox element, Radio element, Text area, Select and option element. New attributes for <input>: autofocus, formaction, formmethod, formnovalidate, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step, input types, input attributes.

 

9.00
Unit III: 

Box Model: Box Model, CSS Dimension, <DIV> tag, using class and ID, priority & specificity. Styling Backgrounds, Styling borders, Styling Text, Styling Fonts, Styling Links, Styling Lists, Styling Tables, Margin, padding.

CSS Advanced: CSS Display, CSS Positioning, CSS Align, Flexbox / Grid, CSS Pseudo-class, CSS Pseudo-element, CSS Navigation Bar, CSS Image Gallery, CSS Image Opacity, CSS Attribute Selectors, Styling Links.

 

9.00
Unit IV: 

Border: border-image, border-radius. Box-Shadow. Text effects: text- shadow. Background: background-clip, background-size. Outline, Transition: transition, transition-delay, transition- duration, transition-property, animation.

Structural Elements: <details>, <dialog>, <summary>, <meter>.

 

9.00
Unit V: 

Introduction client-server technologies: comparison between client-side and server-side scripting. JavaScript: Introduction, Advantages of using JavaScript, Writing JavaScript in HTML, Basic  Programming  Techniques:  Data  Types  and  Literals,  creating  variables,  Operators (Arithmetic, Logical, Comparison, String and Assignment operator) and Expressions in JavaScript.

 

ESSENTIAL READINGS: 

ESSENTIAL READINGS:

1.  Ivan Bayross, “HTML 5 and CSS 3 Made Simple”, BPB Publications.

2.  Responsive Web Design with HTML5 and CSS: Develop future-proof responsive             websites using the latest HTML5 and CSS techniques, 3rd Edition Kindle Edition.

 

REFERENCES: 

SUGGESTED READINGS:

1.  Master HTML and CSS: Along with 100 projects Kindle Edition

2.  HTML 5 Black Book, Covers CSS 3, JavaScript, XML, XHTML, AJAX, PHP and             jQuery, Dreamtech Press; 2nd edition (13 October 2016)

3.  A Navarro, “Effective Web Design”, John Wiley & Sons.

e -RESOURCES:

1.  https://youtu.be/mU6anWqZJcc

2.  https://youtu.be/1ZE-s0EySXg

3.  https://youtu.be/DEcjb-hMgX4

4.  https://youtu.be/-I-7wWUyT0k

5.   https://youtu.be/8ukRI2VsA-s

6.   https://www.w3schools.com/w3css/defaulT.asp

7.  https://guidelines.india.gov.in/

JOURNALS:

1.   International Journal of Design

 

Academic Year: