Web Technology

Topic:
Internet Protocol & HTTP
Internet

● The Internet is a vast network that connects

computers all over the world.
● Through the Internet, people can share information
and communicate from anywhere with an Internet
connection.
 Protocol

❏ Protocol set of standard rules that allows different types of

computers to communicate with each other.

❏ The IP protocol ensures that each computer that I s connected to the

Internet is having a specific serial number called the IP address
Internet Protocols

● SMTP(Simple Mail Transfer Protocol)

● PPP(Point to Point Protocol)
● FTP (File Transfer Protocol)
● SFTP(Secure File Transfer Protocol)
● HTTP(Hypertext Transfer Protocol)
● HTTPS(Hypertext Transfer Protocol Secure
● TELNET(Terminal Network)
● POP3(Post Office Protocol
 WWW- World Wide Web

World Wide Web, which

is also known as a Web,
is a collection of
websites or web pages
stored in web servers
and connected to local
computers through the
internet
HTT
P

HTTP

Hyper Text Transfer Protocol

HTTP
Protocol

❏ HTTP is a TCP/IP based communication protocol

❏ HTTP is used to deliver data (HTML files, image files,
query results, etc.) on the World Wide Web.
❏ This is an Application Layer protocol.
❏ The default port is TCP 80
 Web and
HTTP
❑ Web page consists of objects
❑ Object c a n b e HTML file, JPEG image, Java applet, audio fi le,…
❑ Web p a g e consists of base HTML-file which includes several
referenced objects
❑ Each object is addressable by a URL
❑ Example URL:
HTTP Protocol
Model
HTTP Request and Response
Message
HTTP Request
Messge
HTTP request message
Example

request line
(GET, POST, GET /somedir/[Link] HTTP/1.1
HEAD Host: [Link]
commands)
User-agent: Mozilla/4.0
header
Connection: close
lines
Carriage return,
Accept-language:fr
line feed (extra carriage return, line
indicates end feed)
of message
HTTP Response
Message
HTTP response message
example
status line
(protocol
status code HTTP/1.1 200 OK
status phrase) Connection close
Date: Thu, 06 Aug 1998 12:00:15 GMT
header Server: Apache/1.3.0 (Unix)
Last-Modified: Mon, 22 Jun 1998 …...
lines Content-Length: 6821 Content-Type:
text/html
data, e.g.,
requested data data data data data ...
HTML file
Web Client and Web Server

[Link]
understanding-th e-web-client-server-
communication-yz783vg3
What is Web
Server?
● A web server is a computer that runs websites
● The main job of a web server is to display website content through
storing, processing and delivering web pages to users.

Examples of Web Servers

● Apache web server – the HTTP web server
● Apache Tomcat
● Microsoft’s Internet Information Services (IIS) Windows Server
● Nginx web server
● Lighttpd
● Jigsaw
What is Web
Browser?

Web Browsers are software installed on your PC. To access the Web you
need a web browsers.

Examples of Web Browsers

● Netscape Navigator,
● Google Chrome
● Microsoft Internet Explorer
● Mozilla Firefox.
What is
ISP?
● ISP stands for Internet Service Provider.
● They are the companies who provide you service in terms of internet
connection to connect to the internet.
● You will buy space on a Web Server from any Internet Service Provider.
This space will be used to host your Website.

● Examples of ISP Providers

○ Reliance
○ Airtel
○ BSNL
Web Technology

Topic:

HTML
Different Web Technologies

● HTML ● SQL
● XHTML ● ASP
● CSS ● ADO
● XML ● PHP
● JavaScript ● .NET
● VBSCRIPT ● SMIL
● DOM ● SVG
● DHTML ● FLASH
● AJAX ● Java applets
● E4X ● Java servlets
● WMLScript ● Java Server Page
 List of
Technologies
Client Side Server Side Advanced Technologies
Technologies Technologies ● XML, XSLT, RSS, Atom
● HTML, CSS, JavaScript, ● ASP, PHP, Perl, JSP, ● X-Path, XQuery, WSDL
VBScript Servlets ● Ruby on Rails, GRAIL
● XHTML, DHTML, WML, ● [Link], Java Framework
AJAX ● REST, SOAP
● MySQL, SQL Server,
● FLASH
Access
Frameworks Frameworks
● EmberJS ● ExpressJS
● AngularJS ● Django
● ReactJs
● BackboneJS ● laravel
● VueJS ● NodeJS
How to choose a technology?

Depends on:
● What is the type of
content?
● Who is your audience?
● Who will modify your
content?
● What are your Future
Plans?
● Availability of
technology?
● Your previous
Web - Domain Names & Extension Types

•A domain name is the part of your Internet address that comes after "www".
For example, in [Link] the domain name is [Link].
•Some Domain Extensions are as mentioned below
•.com − Stands for company/commercial, but it can be used for any website.

•.net − Stands for network and is usually used for a network of sites.

•.org − Stands for organization and is supposed to be for non-profit bodies.

•.us, .in − They are based on your country names so that you can go for country
specific domain extensions
•.biz − A newer extension on the Internet and can be used to indicate that this site is
purely related to business.
HTM
L

HTML

Hyper Text Markup Language

HTML
Intro

•HTML stands for Hyper Text Markup Language

•HTML is the standard markup language for
creating Web pages
•HTML describes the structure of a Web page
•HTML consists of a series of elements
•HTML elements tell the browser how to display
the content
HTML
Versions
Version Year
HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014
HTML
Tags

● HTML tags are element names surrounded by angle brackets:

● <tagname>content goes here...</tagname>
● HTML tags normally come in pairs like <p> and </p>
● The first tag in a pair is the start tag, the second tag is the end
tag
● The end tag is written like the start tag, but with a forward slash
inserted before the tag name
HTML Page
Structure
HTML
Elements
● Headings,
● paragraphs,
● line break,
● Text Formatting (Value Addition)
● colors a nd fonts,
● links,
● Hyperlink-anchor tag ( Value
Addition)
● images
● lists,
● tables,
● frames a nd forms,
HTML-
Heading Tags
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most
important heading. <h6> defines the least important heading:

Output
 HTML- Paragraph Tag, Line Break
and Horizontal Line
<p> </p> is used for paragraph
tags.
<p>This is my first
paragraph</p>
<br> is used for Line break- ts is
Singular Tag &nbsp for space

<hr> is used to add Horizontal

line.
Its is Singular Tag
<b></b> bold
<i></i> italicized
<u></u> underlined
 superscript Tags
Sample
Sample
 subscript Text Formatting
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></ Quoted text block
blockquote>
<del></del> Deleted text – strike
through
Fonts &
Colors

<Font Text Comes </

> Here Font>
What attributes can use with
Font tag:
● face
● size
● color
 Fonts &
Colors

● You can set font face using face attribute

● Example:- <font face = "Times New Roman" >
● face Hello </font>
● size
● color
 Fonts &
Colors

● You can set content font size using size

attribute.
● face ● The range of accepted values is from 1(smallest)
to 7(largest).
● size ● The default size of a font is 3
● color ● Example:- <font size = "5"> Hello </font>
 Fonts &
Colors

● You can set font color using color attribute.

● face ● You can specify the color either by color name or
hexadecimal code for that color.
● size ● <font color = "#FF00FF"> Hello </font>
● <font color = "red"> Hello </font>
● color
 Fonts &
Colors
● You can set font face using face attribute
● Example:- <font face = "Times New Roman" >
Hello </font>
● You can set content font size using size
attribute.
● fac ● The range of accepted values is from 1(smallest)
to 7(largest).
e ● The default size of a font is 3
● size ●
● You can set<font
Example:- font color
size using
= "5">color attribute.
Hello </font>
● You can specify the color either by color name or
● col hexadecimal code for that color.
● <font color = "#FF00FF"> Hello </font>
or ● <font color = "red"> Hello </font>
 HyperLinks- Value Addition

The <a> tag defines a hyperlink, which is used to link from

one page to another

The href attribute of <a> element indicates the link's

destination The target attribute specifies where to open the

linked document.
 HyperLinks

Link to a document called [Link] in the <a href="[Link]">

same directory Click </a>

Link to a document called [Link] in the <a href="../[Link]">

parent directory Click </a>

Link to a document called [Link] in the <a href="WTL/[Link]">

subdirectory WTL Click </a>

Link to an external Web <a href="[Link]

site [Link] [Link]">Click Here</a>
HyperLinks

Link to the same Document

Example:-
<a
href="#section1">Introduction</a>
<br>
<a
href="#section2">background</a>
<br>

<h2
id="section1">Introduction</h2>
 Link
tag
<head>
<link rel="stylesheet"
href="[Link]">
</head>

Link tag is used to Link to an external style sheet

The <link> tag defines the relationship between the current document and an
external resource.

rel- Required attribute. It specifies the relationship between the current document and
 Images- img tag

<img src=
“[Link]” >
src Location of image file (relative or absolute)

alt Substitute text for display (e.g. in text mode)

img
tag
height Number of pixels of the height
attribu
tes width Number of pixels of the width
border Size of border, 0 for no border

<img src= “[Link]” alt= “Home page” height= "500"

width="600" border= “2” >
List
tag
List
Types
Ordered Unordered Definition

<ol> <ul> <dl>

 List tag- Ordered
List
<ol> <ol type="A" > <ol type="a" >
<li>Apple</li> [Link] <li>Apple</li> A. Apple <li>Apple</li>
<li>Orange</li> [Link] <li>Orange</li> B. Orang <li>Orange</li>
<li>Grapefruit</li> [Link] <li>Grapefruit</li> C. Grapefruit <li>Grapefruit</li>
</ol> </ol> </ol>

<ol type="1" > <ol type="I" > <ol type="i" >

<li>Apple</li> [Link] <li>Apple</li> I. Apple <li>Apple</li>
<li>Orange</li> [Link] <li>Orange</li> II. Orang <li>Orange</li>
<li>Grapefruit</li> [Link] <li>Grapefruit</li> III. Grapefruit <li>Grapefruit</li>
</ol> </ol> </ol>
 List tag- Unordered
List
<ul > <ul type="disk" >
<li>Apple</li> ● Apple <li>Apple</li> ● Apple
<li>Orange</li> ● Orange <li>Orange</li> ● Orange
<li>Grapefruit</li> ● Grapefruit <li>Grapefruit</li> ● Grapefruit
</ul> </ul>

<ul type="Square" <ul type="Circle"

> ❏ Apple
> ○ Apple
<li>Apple</li> ❏ Orange
<li>Apple</li> ○ Orang
<li>Orange</li> ❏ Grapefruit
<li>Orange</li> ○ Grapefruit
<li>Grapefruit</li> <li>Grapefruit</li>
</ul> </ul>
 List tag- Definition
List

● Create definition lists using

<dl>
● definition in <dd> tag
● text is in <dt> tag,

<dl>
<dt>HTML</dt>
<dd>A markup
language …</dd>
<dt>CSS</dt>
<dd>Language used to
HTML
Table
 Tag Description
<table> Defines a table
HTML <th> Defines a header cell in a table
Table <tr> Defines a row in a table
<td> Defines a cell in a table
<caption Defines a table caption
>
<colgroup Specifies a group of one or more columns in a
> table for formatting
<col> Specifies column properties for each column
within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML
Table

<tr> <th> <th> <th>

<tr>
<tr>
<tr>

<td> <td> <td>

HTML Table Example-1

Student Database Table

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
 HTML Table Example-1

<html> <tr>
<body> <td>2</td>
<table border=1 width=50% cellspacing=0> <td>Amit</td>
<td>Pune</td>
<tr> </tr>
<th>RollNo</th>
<th>Name</th> <tr>
<th>Address</th> <td>3</td>
</tr> <td>Neha</
td>
<tr> <td>Mumbai</
<td>1</td> td>
<td>Bhavana</td> </tr>
<td>Nashik</td>
</tr> </table>
</body>
</html>
HTML Table Example-2

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
HTML Table Example-2

<html>
<body>
<table border=1 width=50%
cellspacing=0>

<tr bgcolor=red>
<th>RollNo</th>
<th>Name</th>
<th>Address</th>
</tr>
HTML Table Example-3

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
4 Sameer Chandwad
5 Varun Bhopal
HTML Table Example-3

<html>
<head>
<style>
tr:nth-child(even)
{
background-color:skyblue;
}
</style>
</head>

<body>
HTML Table Example-4

Roll-No Name Address

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
4 Sameer Chandwad
5 Varun Bhopal
HTML Table Example-4

<html
<body
>
<table
> border=1 width=50%
cellspacing=0>
<colgroup>
<col style="background-color:skyblue">
</colgroup>
<tr>
<th>RollNo</
th>
<th>Name</
th>
<th>Address</
th>
</tr>
<tr>
HTML Table Example-
5

Month Savings <thead>

January $100
<tbody>
February $80
Sum $180 <tfoot>
HTML Table Example-
5
<html> <tr>
<body> <td>Feb</td>
<table border=1 <td>$80</td>
bordercolor=black> </tr>
<thead style=color:green> </tbody>
<tr>
<tfoot style=color:red>
<th>Month</th>
<tr>
<th>savings</th> <td>Total</td>
</tr> <td>$180</td>
</thead> </tr>
</tfoot>
<tbody style=color:blue>
<tr> </table>
<td>Jan</td> </body>
<td>$100</td> </html>
</tr>
 HTML Table Example-6

Time/Day Monday Tuesday Wednesday Thursday

10:00-11:00 DBMS Maths DBMS DBMS
11:00-12:00 WT DBMS WT Maths
12:00-12:30 Lunch Break
12:30-1:30 Maths DBMSL(PR) Maths DBMSL(PR)
T1 Batch T2 Batch
1:30-2:30 ADS ADS
<html> <tr>
<body>
<td>12:00-12:30
<table border=1 width=50%
align=center> <td colspan=4
</td>
bgcolor=yellow>Lunch
align=center
<tr>
<th>Time/Day </th>
Break</td>
<th> Mon </th> </tr>
<th> Tue </th>
<th> Wed </th> <tr>
<th> Thus </th> <td>12:30-1:30 </td>
</tr> <td>Maths </td>
</td>
<td rowspan=2>DBMSL(PR)
<tr> <td>Maths
Batch T1 </td>
<td>10:00-11:00 </td> <td rowspan=2>DBMSL(PR) Batch
<td>DBMS </td> T2</td>
<td>Maths </td> </tr>
<td>DBMS </td>
<td>DBMS</td> <tr>
</tr> <td>1:30-2:30 </td>
<td>ADS </td>
<tr> <td>ADS </td>
<td>11:00-12:00 </td>
</tr>
<td>WT </td>
<td>DBMS </td> </table>
<td>WT </td> </body>
<td>Maths</td> </html>
</tr>
Web Technology

Topic:
Div and Span tag
Span and Div tag- Value Addition

•The <span> tag is an inline container used to mark up a part of a

text, or a part of a document.

•The <span> tag is much like the <div> element, but <div> is a block-
level element and
<span> is an inline element.
 Span and Div tag- Value Addition

<html> <html>
<body> <body>
My mother has <span My mother has <div style="color:blue">
style="color:blue"> blue blue </div> eyes and my father has
</span> eyes and my father has <div style= "color:green"> dark
<span style="color:green">dark green</div> eyes.
green</span> eyes. </body>
</body> </html>
</html>
Web Technology

Topic:
HTML Frames
HTML
Frames
•Example
● A simple three-framed page:
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
● Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.
Web Technology

Topic:
HTML Forms
HTML Form Example-
1- Login Page
HTML Forms – Example 2 Registration
Form
HTML Form
Elements

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
 HTML Input
Types

❏ <input ❏ <input
type="text"> type="checkbox">
❏ <input ❏ <input
type="number"> type="radio">
❏ <input ❏ <input type="file">
type="password"> ❏ <input
❏ <input type="reset">
type="date"> ❏ <input
HTML Form Example-1- Login
Page
<html>
<body bgcolor=green> <tr>
<br><br><hr> <td></td>
<h2> Welcome to My Account Login </h2>
<td>
<input type=reset value=Reset
<table>
style=color:green>
<tr>
<td>Enter User Name:</td>
<td> <input Type =submit value=Login
<input type=text placeholder="Enter Username style=color:green>
Here"> </td>
</td></tr> </tr>
<tr> </table>
<td>Enter Password:</td>
<br><br><hr>
<td>
<input type=password placeholder="Enter </body>
Password Here"> </html>
</td></tr>
HTML Forms – Example 2 Registration
Form
<html> <tr>
<body > <td>DOB </td>
<h2 align=center> Registration <td><input
Form </h2> type=date></td>
<table b> </tr>
<tr>
<td>My Photo</td> <tr> <td>color </td>
<td><input type=file></td> <td><input
</tr> type=color></td> </tr>

<tr> <tr>
<td>Name</td> <td>Gender </td>
<td><input type=text></td> <td>
</tr> <input type=radio>Male
<input type=radio>FeMale
<tr> </td>
<td>Address</td> </tr>
<td><input type=text></td>
</tr> <tr>
<td>Hobbies </td>
<tr> <td>
<td>Mobile </td> <input
<td><input type=text></td> type=checkbox>Cricket
 <tr>
<tr>
<td>Comment </td>
<td>Select Branch </td> <td>
<td> <textarea col=10
<select size=2> rows=3>
<option> Computer</option> </textarea>
<option> IT</option> </td>
</tr>
<option> Civil</option>
</select> <tr>
</td>
</tr> <td colspan=2
align=center>
<tr> <button
<td>Rate this site </td> >Click</button>
<td> <button
<input type=number min=1 >Reset</button>
max=5> </td>
</td> </tr>
Web Technology

Topic:
Difference Between HTML &
HTML5
 Html Html5
DOCTYPE declaration in Html is too DOCTYPE declaration in Html5 is very simple "<!
longer DOCTYPE html>
character encoding in Html is also longer character encoding (charset) declaration is also very simple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 <meta charset="UTF-8">
Transitional//EN">
Audio and Video are not part of HTML4 Audio and Videos are integral part of HTML5 e.g. <audio>
and <video> tags.
Vector Graphics is possible with the help of Vector graphics is integral part of HTML5 e.g. SVG and
technologies such as VML, Silverlight, Flash etc canvas

It is almost impossible to get true GeoLocation of user JS GeoLocation API in HTML5 helps identify location of user
browsing any website especially if it comes to browsing any website (provided user allows it)
mobile devices.
.It provides local storage in place of cookies. Html5 use cookies

Not possible to draw shapes like circle, rectangle, Using Html5 you can draw shapes like circle, rectangle,
triangle. triangle.
Does not allow JavaScript to run in browser. JS runs in Allows JavaScript to run in background. This is possible due
same thread as browser interface. to JS Web worker API in HTML5
Web Technology

Topic:
CSS- Cascading Style sheet
CS
S

CSS

Cascading Style Sheets

CSS-Syntax

SPV

Selector Property Value

Selector{ Property : Value;}

P { color : red ;}
 CSS-Syntax

Selector

HTML tag Id Class

p { color : red ;} #a { color : red ;} .a { color : red ;}

<p> Hello </p> <p id=a> Hello</p> <p class=a> Hello</p>
Types of
CSS

Types of
CSS

Inline Internal External

Types of
CSS
Write CSS code inside HTML Tag

CSS code as attribute of HTML tag

Inline
CSS Code starts with Style

Example:
<p style= “color:red” >
Types of
CSS
Write CSS code inside HTML
Head Tag
Use <style> tag inside Head tag

Internal Example:
CSS <head>
<style>
p { color: red;}
</style>
</head>
Types of
CSS
2 Files
1> .html 2> .css

write css code in .css file

External
CSS Give link of .css file inside .html file,
under head tag, in <link> tag
 External CSS
Example
[Link] [Link]

<html>
<head>
<link rel="stylesheet" type="text/css" href="[Link]"> p { color: red;}
</head>
<body>
<p> Hello Good Morning </p>
</body> </html>
 When to use which Types of CSS

Types of
CSS

Inline Internal External

When your website is having

When you want to use css When you want to use css multiple html files and you
property for only one tag in property for more than one tag want same style to be applied
html and you have only one html file. for every html page
CSS
Properties

❑ CSS Color
❑ CSS
background
❑ CSS Border
❑ CSS Text
❑ CSS Font
❑ CSS Margin
❑ CSS Padding
❑ CSS Table
 CSS Properties-
Color

❏ color: value
❏ Example:
❏ color : blue;
CSS Properties-background

● background-color
○ Example:
■ h1 { background-color: green; }
● background-image
○ Example:
■ body { background-image:
url("[Link]");}
CSS Properties-
border
● border-style (dotted,dashed,solid,double etc)
○ Example: P {border-style: dotted;}
● border-width (value in px)
○ Example: P {border-width: 5px;}
● border-color (red, blue, green etc)
○ Example: P {border-color: red;}
● border-radius (value in px)
○ Example: P{border-radius: 12px;}
CSS Properties -
Text

❏ color
❏ background-color
❏ text-alignment (left, right, center, justify)
❏ text-decoration (overline, underline, linethrough)
❏ text-transform (uppercase, lowercase, capitalize)
CSS Properties-
Font

❑ Font-family
❑ Font-Style( normal,
italic)
❑ font-size( in px)
❑ font-
weight(normal,bold)
CSS Properties-
Margin

❑ margin-top
❑ margin-right
❑ margin-
bottom
❑ margin-left
CSS Properties-
Padding

❑ padding-top
❑ padding-right
❑ padding-
bottom
❑ padding-left
CSS Box
Model
CSS Properties-
Table

❑ tr:hover {background-color: grey;}

❑ tr:nth-child(even) {background-color:
green;}
❑ Size
❑ Border
Web Technology

Topic:
Bootstra
p
Bootstrap

Bootstrap is the most popular HTML, CSS, and

JavaScript framework
for developing responsive, mobile-first websites.

Bootstrap History
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter, and
released as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub!
 Bootstrap- Advantages

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)
Bootstrap Grid
Bootstrap Grid

● Bootstrap's grid system 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

● Bootstrap's grid system is responsive, and the columns

will re-arrange automatically depending on the screen size.
 Bootstrap Grid

x
s
(for phones -
sm
screens less
than 768px (for tablets -
wide) screens equal
m
to or greater d(for
than 768px small
lg
wide) laptops -
screens equal (for laptops
to or greater and desktops
than 992px - screens
wide) equal to or
Bootstrap Grid

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

<div class="row">
<div class="col-sm-
4"></div>
Bootstrap- Where to get?

Where to get
Bootstrap?
Two Options

Download Include
Bootstrap from Bootstrap
[Link] from a
CDN
<html CDN- Mandatory
> Lines for Bootstrap
in every code
<head
<link rel="stylesheet"
>href="[Link]
<script src="[Link]
script>
<script src="[Link]
script>
</head>
<body>
<div class="row">
<div class="col-sm-4" style="background-color : pink"> Col1 Data </div>
<div class="col-sm-4" style="background-color : yellow"> Col2 Data </div>
<div class="col-sm-4" style="background-color : lavender"> Col3 Data </div>
</ according to
</div>
body> your need

</ Change value of Col-*-*

References

Websites:

❏ [Link]
❏ [Link]
❏
[Link]