Prerequisite and Related Courses

Prerequisite Courses:

Sl.No Course Code Course Name

1 Object Oriented Programming
10211CC204
using Java

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 1

 Course Outcomes

CO K
Course Outcomes
Nos. Level
Design web applications using Hypertext Mark-up
CO1 Language and Cascading style sheets through K3
bootstrap.
Build the interactive and dynamic web page using
CO2 K3
Java Script Technology.
Implement the server-side business logic to handle
CO3 K3
client request using NodeJS and PHP.
Make use of MVC framework for integrating the
and Project
CO4 window controlsManagement
and its corresponding actions K3
(SEPM)
through event handlers.
Transform the function as Microservice components
CO5 K32
8/14/2023 to enhance theDepartment
Reusability
of Computerconcept.
Science and Engineering
 PO – CO Mapping

COs

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12 PSO1 PSO2 PSO3

CO1
2 3 3 1 1 3
CO2
3 3 1 2 1 1 3
CO3
3 2 3 2 2 2 2
CO4
3 3 3 2 2 3 3
CO5
3 3 3 2 2 3 3

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 3

 Learning Resources

S.No Text Book

Ben Frain “Responsive Web Design with HTML5 and CSS: Develop future-proof responsive
1 websites using the latest HTML5 and CSS techniques”, Packt Publishing Limited, 3rd Edition,
2020.(Unit 1)
Mary Delamater , “Murach's JavaScript and jQuery (4th Edition) Paperback – Illustrated”,
2 Mike Murach& Associates Inc, August 26, 2020.(Unit 2)

David Herron “Node.js Web Development: Server-side web development made easy with
3 Node 14 using practical examples”, Packt Publishing Limited,5th Edition, 2020. (Unit 3)

Yakov Fain “Angular Development with TypeScript”, Manning Publications, 2nd Edition,
4 December 2018. (Unit 4).

and Project
David Gonzalez “Developing Microservices with Node.js”, Packt Publishing, April 2016. (Unit
Management
5 5). (SEPM)

8/14/2023 Department of Computer Science and Engineering 4

 Learning Resources

S.No Reference Book

AzatMardan, “Practical Node.js: Building Real-World Scalable Web Apps”,

1
1st Edition.2018.

James Mallison, “Mastering PHP 7” ,Packt Publishing Limited, Paperback,

2 27 June 2017

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 5

 Unit 1 Front end design using HTML5, CSS3 and BOOTSTRAP Framework
L-9 Hours
Introduction to HTML5: Basic Elements, Form Elements, Media Elements, HTML5
Graphics (Canvas, SVG), CCS3: Selector String, Box Model, Text Properties, CSS
3D Transformation, CSS Animation, Bootstrap Framework: BS Grid, Tables, Images,
Alerts, Form Elements. Case study: Online Blog Creation.

Unit 2 Dynamic web page design using Java Script and jQuery L-9 Hours
Java Script: Data Types and Variables - Operators - Control Statements - Functions
-Objects - Build in Objects - DOM - Java Script Event Handling - Form Handling and
validations - AJAX & JQuery: Introduction to AJAX and JQuery: Introduction -
JQuery Selectors - JQuery Animations - Effects - Event Handling - JQuery DOM
Traversing-JSON - JQuery AJAX. Case Study: Web Scraping and Automation

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 6

 Unit 3 Server-side programming using PHP and Node JS. L-9 Hours
PHP: Introduction - Variables - Program control - Builtin Functions - Connecting to
Database using MySQLi - Cookies - Sessions - Regular Expression; Node JS:
Introduction - Architecture - Features of Node JS - Installation and setup - Function -
Module - Creating Web Servers with HTTP (Request & Response) - Event Handling
- Express JS - Get and Post Implementations - Database connectivity. Case Study:
online Book Store.
Unit 4 Single Web Page Design using Angular L-9 Hours
TypeScript: Introduction to Type Script - Variables - Datatypes - Enum - Array -
Tuples - Functions - OOP concepts - Interfaces - Generics - Modules - Namespaces
- Decorators. Angular: components and Modules - Data Binding - Event Binding -
Templates - Directives - Services - Dependency Injection - Routing and Navigation
pages - Template based Form - Reactive Forms - Validating - Pipes - Sorting and
Filtering -Decorator - HTTP Client - Data storage - Observables & RxJS Case study:
Todo list and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 7

 Unit 5 Creating Forms and Mobile app Conversions L-9 Hours
Microservices: Introduction - Microservices Architecture - Microservices in
Node.js: Installing Node.js, NPM, Seneca and PM2-SOLID Design Principles -
Seneca Toolkit: Inversion of control(IOC) - Pattern Matching - Reusing Patterns -
Writing Plugins - Web Server Integration - Data Storage - PM2 Task Runner for
Node.js - Writing Microservices - Integrating with Express - Testing and
Documenting Microservices - Monitoring Microservices using PM2 and
Keymetrics - Deploying Microservices. Converting Web App to Mobile App
Development - Install Capacitor Package - Configuration Setup - Native IOS
and Android packages - Build and Deploy the application. Case study:Chat Bot

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 8

 Unit 4: Single Web Page Design using Angular 6
TypeScript: Introduction to Type Script-variables-Datatypes-Enum-Array-Tuples-
Functions-OOPconcepts-interfaces-generics-modules-namespaces-decorators.
Angular: components and Modules-Data Binding-Event Binding-Templates- Directives-
services-Routing-Http Client-Forms- case study: chat-boats
Unit 5: Creating Microservices inNode.js using Seneca Toolkit 6
Microservices architecture-microservices in Node.js: installing Node.js, npm, Seneca and
PM2-SOLID design principles-Seneca Toolkit: Inversion of control(IOC)-pattern matching-
reusing patterns-writing plugins-web server integration-Data storage-PM2 task runner for
Node.js-writing microservices- Integrating with Express -Testing and Documenting
microservices-Monitoring micro services using PM2 and Keymetrics- Deploying
microservices.

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 9

 Unit 1: Front end design using HTML5, CSS3 and BOOTSTRAP Framework

Introduction to HTML5: Basic Elements, Form Elements, Media

Elements, HTML5 Graphics (Canvas, SVG), CCS3: Selector
String, Box Model, Text Properties, CSS 3D Transformation, CSS
Animation, Bootstrap Framework: BS Grid, Tables, Images,
Alerts, Form Elements. Case study: Online Blog Creation.

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 10

 Introduction to HTML5
➢HTML5 is the latest and most enhanced version of HTML
➢It is used to design web pages using markup language.
➢Html5 is a cooperation between
• World wide web consortium (w3c
• Web hypertext application technology working group
(WHATWG).
➢The new standard incorporates features like
• Video playback
• Drag-and-drop
that have been previously dependent on third-party
browser plug-ins such as adobe flash, microsoft silverlight, and
and Project
google gears. Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 11

 Introduction to HTML5

➢ It has improved the markup available for documents and

has introduced application programming interfaces(api) and
document object model(dom).
➢ Html5 is a suite of tools for:
• Markup (HTML 5)
• Presentation (CSS 3)
• Interaction (DOM, ajax, apis)

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 12

 Introduction to HTML5

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 13

 Introduction to HTML5

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 14

 Introduction to HTML5
HTML5 technologies, classified into several groups based on
their function.
• Semantics
• Connectivity
• Offline and storage
• Multimedia
• 2D/3D graphics and effects
• Performance and integration
• Device access
• Styling
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 15

 Introduction to HTML5
➢Sections and outlines in HTML5
<section>, <article>, <nav>, <header>, <footer> and <aside>.
➢Using HTML5 audio and video
The <audio> and <video>
➢Forms improvements
New values for the <input> attribute type and the new <output>
element.
➢Persistent Local Storage
To achieve without resorting to third-party plugins.
➢Server-Sent Events
HTML5 introduces events which flow from web server to the
and Project
web browsers and they are called Server-Sent Events (SSE).
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 16

 HTML5 Basic Elements
➢ Audio & Video − You can embed audio or video on your web pages
without resorting to third-party plugins.

➢ Geolocation − Now visitors can choose to share their physical

location with your web application.

➢ Microdata − This lets you create your own vocabularies beyond HTML5
and extend your web pages with custom semantics.

➢ Drag and drop − Drag and drop the items from one location to
another location on the same webpage

➢ Web Socket − A next-generation

and Project bidirectional communication
Management
technology for web applications.
(SEPM)

14-08-2023 Department of Computer Science and Engineering 17

 HTML5 Tags
➢HTML uses markup tags to describe web pages
➢HTML tags are keywords surrounded by angle brackets like <html>
➢HTML tags normally come in pairs like <b> and </b>
➢ The first tag in a pair is the start tag, the second tag is the end tag
➢Start and end tags are also called opening tags and closing tags
➢Some HTML elements have empty content
➢ Empty elements are closed in the start tag

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 18

 HTML5 Requirements

➢Text editor
notepad/notepad++/dreamweaver/atom
➢ file extension
.Htm/.Html
➢ web browser
Any web browser but firefox is for best uses.

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 19

 HTML5 page structure

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 20

 Semantics
Tag Description

<article> Defines independent, self-contained content

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content, like illustrations, diagrams, photos, code

listings, etc.

<footer> Defines a footer for a document or section

<header> Specifies a header for a document or section

<main> Specifies the main content of a document

<mark> Defines marked/highlighted text

<nav> Defines navigation links

and Project
<section> Defines a section inManagement
a document
(SEPM)
<summary> Defines a visible heading for a <details> element

<time> Defines a date/time

14-08-2023 Department of Computer Science and Engineering 21

 Semantics-Example

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 22

 HTML5 Forms

➢ HTML5 Forms are required, when you want to collect some

data from the site visitor.
➢ A form will take input from the site visitor and then will post
it to a back-end application

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 23

 HTML5 Form Controls

➢ Text Input Controls

➢ Checkboxes Controls
➢ Radio Box Controls
➢ Select Box Controls
➢ File Select boxes
➢ Hidden Controls
➢ Clickable Buttons
➢ Submit and Reset Button

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 24

 HTML5 Forms

Sr.No Attribute & Description

1 action
Backend script ready to process your passed data.

2 method
Method to be used to upload data. The most
frequently used are GET and POST methods.

3 target
Specify the target window or frame where the result of
the script will be displayed. It takes values like _blank,
_self, _parent etc.
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 25

 HTML5 Form Controls
Output:
Text Area:
<textarea rows = "5" cols = "50" name =
"description"> Enter description here...
</textarea>

CheckBox:
<form> <input type = "checkbox" name =
"maths" value = "on"> Maths <input type =
"checkbox" name = "physics" value = "on">
Physics </form>

RadioButtons:
<input type = "radio" name = "subject" value =
"maths"> Maths <inputand Project
type = "radio" name =
Management
"subject" value = "physics">
(SEPM)Physics

14-08-2023 Department of Computer Science and Engineering 26

 HTML5 Forms

Select Box Controls/Menus: Output:

<select name = "dropdown">

<option value = "Maths“ selected>Maths</option>
<option value = "Physics">Physics</option> </select>
File Select boxes:
<input type ="file" name ="fileupload" accept = "image/*"/>
Hidden Form Controls:
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
and Project
<input type = "reset" name = "reset" value = "Reset" />
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 27

 HTML5 Forms

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 28

 HTML5 Graphics

➢HTML Canvas:
<canvas> element is used to draw graphics, on the fly,
via JavaScript.
➢HTML SVG Graphics:
Scalable Vector Graphics
methods for drawing paths, boxes, circles, text, and
graphic images.
➢<meta charset="UTF-8">

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 29

 HTML5 Graphics - Example

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 30

 HTML Video and Audio tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as
<video> and <audio>
<track> Defines text tracks in media players

Tag Description

<audio> Defines sound content

<source> Defines multipleand

media
Projectresources for media elements, such as
<video> and <audio>
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 31

 HTML Video and Audio tags- Example
Output:

Output:
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 32

 HTML APIs
➢HTML Geolocation API:
Locate the User's Position
getCurrentPosition()
showPosition()
watchPosition()
clearWatch()
➢HTML Drag and Drop API:
<img draggable="true">
ondragstart and setData()
and Project
ondragover Management
(SEPM)
dataTransfer.getData()

14-08-2023 Department of Computer Science and Engineering 33

 HTML APIs-Example
GeoLocation API:

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 34

 HTML APIs-Example
HTML Drag and Drop API: Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 35

 HTML5

➢ Advantages:
All browsers supported.
More device friendly.
Easy to use and implement.
HTML 5 in integration with CSS, JavaScript, etc can
help build beautiful websites.
➢ Disadvantages:
Long codes have to be written which is time consuming.
Only modern browsers support it.

14-08-2023 Department of Computer Science and Engineering 36

 CSS
➢CSS stands for Cascading Style Sheets
➢CSS describes how HTML elements are to be displayed on
screen, paper, or in other media
➢CSS saves a lot of work. It can control the layout of
multiple web pages all at once
➢External stylesheets are stored in CSS files

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 37

 CSS3
➢Latest version of CSS
➢Contains a number of exciting and new features
➢Supports for selectors, box model, Background and
borders, Text effects, animations, multiple column layout,
3D transformations and so on

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 38

 CSS3 Syntax

CSS has two main parts

• Selector
• Declaration
<style type=“text/css”>
p{
color: red;
text-align: center;
font-family:Arial;
}
</style>
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 39

 CSS3 Selectors
Simple Selector Form
Single element to which the property and value is applied

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 40

 Class selectors
Class Selectors:
We can assign different styles to the same element

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 41

 Generic Selectors
Particular class can be applied to any tag

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 42

 Id Selectors
Same as class selector but style can be applied to one specific element

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 43

 Universal Selectors
(*) selects all HTML elements on the page.

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 44

 Attribute Selectors

[attribute] selector is used to select elements with a specified attribute

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 45

 Pseudo Classes
Used to define a special state of an
element.
➢Focus Output:

➢Hover
➢Hyperlink
input: focus {
color: red;
}

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 46

 CSS Group Selector
used to select all the elements with the same style definitions.
h1 {
text-align: center;
color: blue; Output:
}
h2 {
text-align: center;
color: blue;
}
p{
text-align: center;
and Project
color: blue; } Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 47

 Types of style sheet

➢Inline style sheets

➢Internal style sheets
➢External style sheets

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 48

 Types of style sheet

Inline:
➢ An inline CSS is used to apply a unique style to a single HTML element.
➢ An inline CSS uses the style attribute of an HTML element.

Output:
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 49

 Internal Style sheets
➢ An internal CSS is used to define a style for a single HTML page.
➢ An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 50

 External Style sheets
Styles should be stored in external css file and the link should be attached in head
section of HTML file

Style.css:

Output:
and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 51

 CSS3 Box model

➢ The CSS3 box model is a box that wraps around every HTML element.
➢ It consists of: margins, borders, padding, and the actual content.

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 52

 CSS Box model-Example
Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 53

 CSS Text Formatting Properties

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 54

 Text Color
The color property is used to set the color of the text

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 55

 Text Alignment
The text-align property is used to set the horizontal alignment of a text.

Property Description
direction Specifies the text direction/writing direction
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text

unicode-bidi Used together with the direction property to set or return

whether the text should be overridden to support multiple
languages in the same document

vertical-align Sets theand

vertical
Project alignment of an element
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 56

 Text Decoration
The text-decoration-color property is used to set the color of the decoration line

Property Description
text-decoration Sets all the text-decoration properties in one declaration

text-decoration- Specifies the color of the text-decoration

color
text-decoration- Specifies the kind of text decoration to be used (underline,
line overline, etc.)
text-decoration- Specifies the style of the text decoration (solid, dotted, etc.)
style
text-decoration- Specifies the thickness of the text decoration line
and Project
thickness Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 57

 Text Transformation
The text-transform property is used to control capitalization of the text.

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 58

 Text spacing

Property Description

letter-spacing Specifies the space between characters in a text

line-height Specifies the line height

text-indent Specifies the indentation of the first line in a text-block

white-space Specifies how to handle white-space inside an element

word-spacing Specifies the space between words in a text

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 59

 Text Shadow
The text-shadow property adds shadow to text

Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 60

 CSS 3D Transforms

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed
elements
transform-style Specifies how nested elements are rendered in 3D space
perspective Specifies the perspective on how 3D elements are
viewed
perspective- Specifies the bottom position of 3D elements
origin
backface- Defines whether or not an element should be visible
visibility when and
notProject
facing the screen
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 61

 CSS 3D Transform Methods
Function Description
matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 values
(n,n,n,n,n,n,n,n,n,n,n,n,
n,n,n,n)

translate3d(x,y,z) Defines a 3D translation

translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a and
3D rotation
Project along the X-axis
rotateY(angle) Defines aManagement
3D rotation along the Y-axis
(SEPM)
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element
14-08-2023 Department of Computer Science and Engineering 62
 CSS 3D Transforms-Example
Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 63

 CSS Animations

➢ An animation lets an element gradually change from one

style to another.
➢ You can change as many CSS properties you want, as many
times as you want.
➢ To use CSS animation, you must first specify some
keyframes for the animation.
➢ Keyframes hold what styles the element will have at certain
times.

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 64

 CSS Animations
Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards,
backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to
complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)
animation-iteration- Specifies the number of times an animation should be
count played
animation-name Specifies the name of the @keyframes animation
and Project
Management
animation-play-state Specifies whether the animation is running or paused
(SEPM)
animation-timing- Specifies the speed curve of the animation
function
14-08-2023 Department of Computer Science and Engineering 65
 CSS Animations - Example
Output:

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 66

 Bootstrap Framework: BS grid basics
Most popular HTML, CSS and JavaScript framework for developing a
responsive and mobile friendly website.
Free to download and use.
It is a front-end framework used for easier and faster web development.
It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
It can also use JavaScript plug-ins.
It facilitates you to create responsive designs.

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 67

 What Can We Do With Bootstrap5?

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 68

 Introduction to HTML5 : Basic Elements

•Flexbox based grid

•New XLl grid tier
•Latest auto-layout grid
•Navbar customisation options
•New Spacing utilities
•Sans Glyphicons configuration (Bloat-
and Project
free zone) Management
•Responsive sizing (SEPM)
•Responsive Floats
•Auto Margins
14-08-2023 •Vertical Centering
Department of Computer Science and Engineering 69
 Introduction to HTML5 : Basic Elements

and Project
Management
(SEPM)

14-08-2023 Department of Computer Science and Engineering 70

 Introduction to HTML5 : Basic Elements

•It improved gutters

•new form control features
•Bootstrap 5 adds utility API
•New Bootstrap Icon library
and Project
•Bootstrap 5 has switched
Management
to vanilla
JavaScript instead of jQuery
(SEPM)

14-08-2023 Department of Computer Science and Engineering 71

 BOOTSTRAP FRAMEWORK

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 72

 What is Bootstrap?
• Bootstrap is a free front-end framework for faster and easier web
development

• Bootstrap includes HTML and CSS based design templates for

typography, forms, buttons, tables, navigation, modals, image carousels
and many other, as well as optional JavaScript plugins

• Bootstrap also gives you the ability to easily create responsive designs

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 73

 CSS vs Bootstrap

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 74

 History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and
released as an open source product in August 2011 on GitHub.

✓ Originally released on August 19,

2011, we’ve since had over twenty
releases, including two major
rewrites with v2 and v3.
✓ With Bootstrap 2, we added
responsive functionality to the
entire framework as an optional
stylesheet.
✓ Building on that with Bootstrap 3,
we rewrote the library once more
and Project
to make it responsive by default
Management
(SEPM)
with a mobile first approach.

8/14/2023 Department of Computer Science and Engineering 75

 Bootstrap version

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 76

 Bootstrap version

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 77

 Bootstrap Framework
Advantages of Bootstrap:
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
• Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Safari, and Opera)

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 78

 Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.
Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you
can include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and
JavaScript. You must also include jQuery.

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 79

 Where to Get Bootstrap?
You must include the following Bootstrap’s CSS, JavaScript, and jQuery from
MaxCDN into your web page.

<!-- Latest compiled and minified Bootstrap CSS -->

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.
3.7/css/bootstrap.min.css">

<!-- Latest compiled Bootstrap JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstra
p.min.js"></script>

<!-- latest jQuery library -->

<script src="https://code.jquery.com/jquery-latest.js"></script>
and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 80

 Bootstrap Framework
Creating Your First Web Page with Bootstrap
Step 1: Creating a Basic HTML file
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1"> <title>Basic HTML File</title>
</head> <body>
<h1>Hello, world!</h1>
</body>
</html>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 81

 Bootstrap Framework
Step 2: Making this HTML File a Bootstrap Template
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<title>Basic Bootstrap Template</title>
<!-- Bootstrap CSS --> <link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boots
trap.min.css" rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head> <body> <h1>Hello, world!</h1> <!-- Bootstrap JS Bundle
with Popper --> <script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstr
ap.bundle.min.js" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
and Project
crossorigin="anonymous">
Management
</script> (SEPM)
</body>
</html>
8/14/2023 Department of Computer Science and Engineering 82
 Bootstrap Framework
Saving and Viewing the File

✓ Now save the file on your desktop as "bootstrap-template.html".

✓ To open this file in a web browser, navigate to it, then right click on it,
and select your favorite web browser. Alternatively, you can open
your browser and drag this file to it.

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 83

 Bootstrap Containers
Containers are used to pad the content inside of them, and there are
two container classes available:
• The .container class provides a responsive fixed width container
• The .container-fluid class provides a full width container, spanning
the entire width of the viewport

<div class="container"> <div class="container-fluid">

<h1>My First Bootstrap <h1>My First Bootstrap
Page </h1> Page</h1>
<p>This is some text.</p> <p>This is some text.</p>
</div> </div>
Output Output
and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 84

 Bootstrap Framework
Container Padding
✓ By default, containers have left and right padding, with no
top or bottom padding. For example, .pt-5 means "add a
large top padding“

<div class="container pt-5"></div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 85

 Bootstrap Framework
Responsive Containers
✓ The .container-sm|md|lg|xl classes to determine when the
container should be responsive.
✓ The max-width of the container will change on different
screen sizes/viewports:

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 86

 Bootstrap Framework
Example
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 87

 Bootstrap Grid
✓ Bootstrap's grid system is built with flexbox and allows up to
12 columns across the page.
✓ If you do not want to use all 12 columns individually, you can
group the columns together to create wider columns:

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 88

 Bootstrap Grid
Grid Classes:
The Bootstrap 5 grid system has six classes:

✓ .col- (extra small devices - screen width less than 576px)

✓ .col-sm- (small devices - screen width equal to or greater than
576px)
✓ .col-md- (medium devices - screen width equal to or greater than
768px)
✓ .col-lg- (large devices - screen width equal to or greater than
992px)
✓ .col-xl- (xlarge devices - screen width equal to or greater than
1200px)
✓ .col-xxl- (xxlarge devices
and Project
Management
- screen width equal to or greater than
1400px) (SEPM)

8/14/2023 Department of Computer Science and Engineering 89

 Bootstrap Grid
Basic Gird Structure:
<!-- Control the column width, and how they should appear on
different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>

Three Equal Columns

<div class="row">
and Project
<div class="col">.col</div>
Management
<div class="col">.col</div>
(SEPM)
<div class="col">.col</div>
</div>
8/14/2023 Department of Computer Science and Engineering 90
 Bootstrap Grid
Responsive Columns

<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 91

 Bootstrap Tables
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
Striped Rows

<div class="container mt-3">

<h2>Striped Rows</h2>
<p>The .table-striped class adds
zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
and Project
</tr> Management
</thead> (SEPM)

<tbody>

8/14/2023 Department of Computer Science and Engineering 92

 Bootstrap Grid
Bordered Table
The .table-bordered class adds borders on all sides of the table
and cells:

<div class="container mt-3">

<h2>Bordered Table</h2>
<p>The .table-bordered class
adds borders on all sides of the
table and the cells:</p>
<table class="table table-
bordered">
<thead>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 93

 Bootstrap Grid
Hover Rows
The .table-hover class adds a hover effect (grey
background color) on table rows:
<div class="container mt-3">
<h2>Hover Rows</h2>
<p>The .table-hover class
enables a hover state (grey
background on mouse over) on table
rows:</p>
<table class="table table-
hover">
<thead>
<tr>
and Project
<th>Firstname</th>
Management
<th>Lastname</th>
(SEPM)
<th>Email</th>
</tr>
</thead>
8/14/2023 Department of Computer Science and Engineering 94
 Bootstrap Grid
Black/Dark Table
The .table-dark class adds a black background to the table:
<div class="container mt-3">
<h2>Black/Dark Table</h2>
<p>The .table-dark class adds a
black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr> and Project
</thead> Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 95

 Bootstrap Grid
Dark Striped Table
Combine .table-dark and .table-striped to create a dark,
striped table:

<div class="container mt-3">

<h2>Dark Striped Table</h2>
<p>Combine .table-dark and
.table-striped to create a dark,
striped table:</p>
<table class="table table-dark
table-striped">
<thead>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 96

 Bootstrap Grid
Borderless Table
The .table-borderless class removes borders from the
table:

<div class="container mt-3">

<h2>Borderless Table</h2>
<p>The .table-borderless class
removes borders from the
table:</p>
<table class="table table-
borderless">
<thead>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 97

 Bootstrap Grid
Contextual Classes
Contextual classes can be used to color the whole table
(<table>), the table rows (<tr>) or table cells (<td>)
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
and Project
<td>Danger</td>Management
<td>Moe</td> (SEPM)
<td>[email protected]</td>
</tr>
8/14/2023 Department of Computer Science and Engineering 98
 Bootstrap Grid
Contextual Classes

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 99

 Bootstrap Images
Image Shapes

<img src="cinqueterre <img src="cinqueterre <img src="cinqueterre

.jpg" class="rounded" .jpg" class="rounded- .jpg" class="img-
alt="Cinque Terre"> circle" alt="Cinque
and Project thumbnail" alt="Cinqu
Terre">
Management e Terre">
(SEPM)

8/14/2023 Department of Computer Science and Engineering 100

 Bootstrap Images
Aligning Images
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
<img src="paris.jpg" class="mx-auto d-block">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 101

 Bootstrap Images
Responsive Images
✓ Images come in all sizes. So do screens. Responsive images
automatically adjust to fit the size of the screen.
✓ Create responsive images by adding an .img-fluid class to
the <img> tag. The image will then scale nicely to the parent
element.
✓ The .img-fluid class applies max-width: 100%; and height: auto; to
the image:

<img class="img-fluid" src="ny.jpg" alt="New York">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 102

 Bootstrap Images
Bootstrap Jumbotron

✓ A jumbotron was introduced in Bootstrap 3 as a big padded box

for calling extra attention to some special content or information.
✓ Jumbotrons are no longer supported in Bootstrap 5. However, you
can use a <div> element and add special helper classes together
with a color class to achieve the same effect:

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 103

 Bootstrap Images
Bootstrap Jumbotron
<div class="container mt-3">
<h2>Example of Jumbotron</h2>
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat..</p>
</div>
</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 104

 Bootstrap Alerts
Alerts
Bootstrap 5 provides an easy way to create predefined alert messages:

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 105

 Bootstrap Alerts
Alerts
Alerts are created with the .alert class, followed by one of the contextual
classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-
secondary, .alert-light or .alert-dark:

<div class="container mt-3">

<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a
contextual color classes:</p>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral
and Project
informative change or Management
action.
</div> (SEPM)

8/14/2023 Department of Computer Science and Engineering 106

 Bootstrap Alerts
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a
warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a
dangerous or potentially negative action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important
action.
</div>
and Project
<div class="alert alert-dark">
Management
<strong>Dark!</strong>
(SEPM)Dark grey alert.
</div>

8/14/2023 Department of Computer Science and Engineering 107

 Bootstrap Alerts
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 108

 Bootstrap Alerts
Alert Links

<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-
link">read this message</a>.
</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 109

 Bootstrap Alerts
Closing Alerts
To close the alert message, add a .alert-dismissible class to the alert container. Then
add class="btn-close" and data-bs-dismiss="alert" to a link or a button element (when
you click on this the alert box will disappear).

<div class="alert alert-success alert-dismissible">

<button type="button" class="btn-close" data-bs-
dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 110

 Bootstrap Alerts
Animated Alerts
The .fade and .show classes adds a fading effect when closing the alert message:

<div class="alert alert-danger alert-dismissible fade show">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 111

 Bootstrap Forms
Stacked Form
All textual <input> and <textarea> elements with class .form-control get proper
form styling:
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
and Project
</label>
Management
</div> (SEPM)
<button type="submit" class="btn btn-primary">Submit</button>
</form>

8/14/2023 Department of Computer Science and Engineering 112

 Bootstrap Forms
Form Row/Grid (Inline Forms)

<form>
<div class="row">
<div class="col">
<input type="text" class="form-
control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-
control" placeholder="Enter
and Project password" name="pswd">
</div> Management
(SEPM)
</div>
</form>

8/14/2023 Department of Computer Science and Engineering 113

 Bootstrap Forms
Form Control Size

You can change the size of .form-control inputs with .form-control-lg or .form-control-sm:

<input type="text" class="form-control form-control-lg" placeholder="Large input">

<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small input">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 114

 Bootstrap Forms
Disabled and Read only

You can change the size of .form-control inputs with .form-control-lg or .form-control-sm:

<<input type="text" class="form-control" placeholder="Normal input">

<input type="text" class="form-control" placeholder="Disabled input" disabled>
<input type="text" class="form-control" placeholder="Readonly input" readonly>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 115

 Bootstrap Forms
Color Picker

<input type="color" class="form-control form-control-color" value="#CCCCCC">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 116

 Bootstrap Forms
Select Menu
Use the .form-select-lg or .form-select-sm class to change the size of the select
menu:

<select class="form-select form-select-lg">

<select class="form-select">
<select class="form-select form-select-sm">

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 117

 Bootstrap Forms
Disable Menu
<select class="form-select" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 118

 Bootstrap Forms
Form Validation

and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 119

 Bootstrap Forms
Form Validation
<form action="/action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-
control" id="uname" placeholder="Enter
username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this
field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-
control" id="pwd" placeholder="Enter
and Project
password" name="pswd"Management
required>
(SEPM)

8/14/2023 Department of Computer Science and Engineering 120

 Bootstrap Forms
Form Validation

<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-
input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on
blabla.</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
and Project
</form>
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 121

 and Project
Management
(SEPM)

8/14/2023 Department of Computer Science and Engineering 122