Unit-I

Web Development Process, Front

End Tools
Course: Full Stack Development

School of Computer Engineering and Technology

Faculty of Engineering and Technology

Dr. Vishwanath Karad

MIT World Peace University, Pune 411 038

#EducationWithValues
#EducationWithValues mitwpu.edu.in
 Outline
Introduction to web technology, internet and www, Web site planning and
design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs, line break, colors & fonts, links, frames, lists, tables, images
and forms,
• Difference between HTML and HTML5.
• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page, CSS
selectors,
• XML: Introduction to XML, XML key component,Transforming XML into
XSLT, DTD: Schema, elements, attributes,
• Introduction to JSON.
#EducationWithValues mitwpu.edu.in
 Web Technology
• The methods by which computers communicate with each
other through the use of markup languages and multimedia
packages is known as web technology.

#EducationWithValues mitwpu.edu.in
 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
#EducationWithValues mitwpu.edu.in
 Internet and WWW
• Inter-network and World Wide Web
• Interlinked hypertext documents accessed using HTTP
Protocol
• Client - Server architecture

#EducationWithValues mitwpu.edu.in
 What is Internet?
• The Internet is essentially a global network of computing
resources. You can think of the Internet as a physical collection
of routers and circuits as a set of shared resources.

#EducationWithValues mitwpu.edu.in
 Internet-Based Services
• Email − A fast, easy, and inexpensive way to communicate
with other Internet users around the world.
• Telnet − Allows a user to log into a remote computer as
though it were a local system.
• FTP − Allows a user to transfer virtually every kind of file that
can be stored on a computer from one Internet-connected
computer to another.
• UseNet news − A distributed bulletin board that offers a
combination news and discussion service on thousands of
topics.
• World Wide Web (WWW) − A hypertext interface to Internet
information resources.

#EducationWithValues mitwpu.edu.in
 What is WWW?
• WWW stands for World Wide Web.
• A technical definition of the World Wide Web is − All the
resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP).
• In simple terms, The World Wide Web is a way of exchanging
information between computers on the Internet

#EducationWithValues mitwpu.edu.in
 What is HTTP?
• HTTP stands for Hypertext Transfer Protocol. This is the
protocol being used to transfer hypertext documents that
makes the World Wide Web possible.
• A standard web address such as Google.com is called a URL
and here the prefix http indicates its protocol

#EducationWithValues mitwpu.edu.in
 What is URL?
• URL stands for Uniform Resource Locator, and is used to
specify addresses on the World Wide Web.
• A URL will have the following format −
• protocol://hostname/other_information
• The protocol is followed by a colon, two slashes, and then the
domain name. The domain name is the computer on which
the resource is located.

#EducationWithValues mitwpu.edu.in
 What is Website?
• which is a collection of various pages written in HTML markup
language.
• Each page available on the website is called a web page and
first page of any website is called home page for that site.

#EducationWithValues mitwpu.edu.in
 What is Web Server?
• Every Website sits on a computer known as a Web server.
• This server is always connected to the internet.
• Every Web server that is connected to the Internet is given a
unique address. For example, 68.178.157.132
• When you register a Web address, also known as a domain
name, such as tutorialspoint.com you have to specify the IP
address of the Web server that will host the site.
• Examples of Web Servers
• Apache Tomcat
• IIS
• Glassfish

#EducationWithValues mitwpu.edu.in
 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,
• Microsoft Internet Explorer
• Mozilla Firefox.

#EducationWithValues mitwpu.edu.in
 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

#EducationWithValues mitwpu.edu.in
 Technologies-
List of Technologies
• Client Side Technologies
• HTML, CSS, JavaScript, VBScript
• XHTML, DHTML, WML, AJAX
• FLASH
• Server Side Technologies
• ASP, PHP, Perl, JSP
• ASP.NET, Java
• MySQL, SQL Server, Access
• Some More Advanced Technologies
• XML, XSLT, RSS, Atom
• X-Path, XQuery, WSDL
• XML-DOM, RDF
• Ruby on Rails, GRAIL Framework
• REST, SOAP

#EducationWithValues mitwpu.edu.in
 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 experience?
• Portability and Data sharing

#EducationWithValues mitwpu.edu.in
 What is HTML?
• HTML stands for Hyper Text Markup Language.
• This is the language in which we write web pages for any
Website.
• This is a subset of Standard Generalized Mark-Up Language
(SGML) for electronic publishing, the specific standard used
for the World Wide Web.

#EducationWithValues mitwpu.edu.in
 What is Hyperlink?
• A hyperlink or simply a link is a selectable element in an
electronic document that serves as an access point to other
electronic resources.
• Typically, you click the hyperlink to access the linked resource.
• Familiar hyperlinks include buttons, icons, image maps, and
clickable text links.

#EducationWithValues mitwpu.edu.in
 Web - Domain Names
& Extension Types
• A domain name is the part of your Internet address that
comes after "www". For example, in Tutorialspoint.com the
domain name is tutorialspoint.com.
• 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.

#EducationWithValues mitwpu.edu.in
 Website Designing steps
• Information Gathering
• Planning
• Design
• Development
• Testing and Delivery
• Maintenance

#EducationWithValues mitwpu.edu.in
 Website Planning
• Define your target audiences.
• Set goals and objectives.
• Create a sitemap.
• Request an estimate.
• Set a budget.
• Define roles and responsibilities.

• https://www.farreachinc.com/blog/far-reach/2014/08/14/6-
steps-how-to-plan-a-successful-website-redesign
#EducationWithValues mitwpu.edu.in
 Website Design Issues
• Simplicity –less animations, texts, visuals
• Identity –web apps through design
• Consistency –e.g. uniform style, color, etc.
• Robustness–required function should not miss
• Navigability –navigation should be simple
• Visual appeal–look & feel of content
• Compatibility –compatible to all browsers, internet connection
types, OS, etc.

#EducationWithValues mitwpu.edu.in
 HTML Basics

#EducationWithValues mitwpu.edu.in
 How the Web Works?
• WWW use classical client / server architecture
• HTTP is text-based request-response protocol

25
#EducationWithValues mitwpu.edu.in
 HTML Basics
Text, Images, Tables, Forms

#EducationWithValues mitwpu.edu.in
 What is HTML?
• HTML is the standard markup language for creating Web
pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages using markup
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags
• Browsers do not display the HTML tags, but use them to
render the content of the page

#EducationWithValues mitwpu.edu.in
 A Simple HTML Document
Example Explanation

<html> • The <html> element is the root element

<head> of an HTML page
<title>Page Title</title> • The <head> element contains meta
</head> information about the document
<body>
• The <title> element specifies a title for
the document
<h1>My First Heading</h1>
<p>My first paragraph.</p> • The <body> element contains the visible
page content
</body> • The <h1> element defines a large heading
</html> • The <p> element defines a paragraph

#EducationWithValues mitwpu.edu.in
 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

#EducationWithValues mitwpu.edu.in
 HTML Page Structure

#EducationWithValues mitwpu.edu.in
 HTML Versions

Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014

#EducationWithValues mitwpu.edu.in
 Creating HTML Page

Write HTML Using Notepad or TextEdit

Save the file on your computer using .html or

.htm extension and set the encoding to UTF-8

View the HTML Page in Your Browser

#EducationWithValues mitwpu.edu.in
 First HTML Page

33
#EducationWithValues mitwpu.edu.in
 First HTML Page: Tags
<!DOCTYPE HTML>
<html> Opening tag
<head>

34
<title>My First HTML Page</title>
</head>
<body> Closing tag
<p>This is some text...</p>
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the content inside.

#EducationWithValues mitwpu.edu.in
 First HTML Page: Header

<!DOCTYPE HTML>
HTML header
<html>
<head>

35
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body

#EducationWithValues mitwpu.edu.in
 HTML Headings-
HTMLheadingsaredefinedwiththe<h1>to<h6>tags.<h1>definesthe most
importantheading.<h6>definestheleastimportantheading:
HTML Code Output

#EducationWithValues mitwpu.edu.in
 Headings and Paragraphs
• Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

38
• Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

• Sections: div and span

<div style="background: skyblue;">
This is a div</div>
#EducationWithValues mitwpu.edu.in
 Text Formatting
• Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold
<b></b> bold
<i></i> italicized
<u></u> underlined
 Samplesuperscript
 Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

#EducationWithValues mitwpu.edu.in 39
 Text Formatting Example
HTML Code Output

#EducationWithValues mitwpu.edu.in
 Hyperlinks: <a> Tag
• Link to a document called form.html on the same server in the
same directory:
<a href="form.html">Fill Our Form</a>
• Link to a document called parent.html on the same server in the

41
parent directory:
<a href="../parent.html">Parent</a>
• Link to a document called cat.html on the same server in the
subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>

• Link to an external Web site:

<a href="http://www.devbg.org" target="_blank">BASD</a>
#EducationWithValues mitwpu.edu.in
 Links to the Same Document
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />

42
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

#EducationWithValues mitwpu.edu.in
 Images: <img> tag
⬥Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

⬥Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

⬥Example:

<img src="./php.png" alt="PHP Logo" />

#EducationWithValues mitwpu.edu.in 43
 Ordered Lists: <ol> Tag
• Create an Ordered List using <ol></ol>:
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>

44
</ol>

• Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II.Orange
C. Grapefruit III. Grapefruit
#EducationWithValues mitwpu.edu.in
 Unordered Lists: <ul> Tag
• Create an Unordered List using <ul></ul>:
<ul type="disk" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>

45
</ul>
• Attribute values for type are:
• disc, circle or square

• Apple o Apple ▪ Apple

• Orange o Orange ▪ Orange
• Pear o Pear ▪ Pear
#EducationWithValues mitwpu.edu.in
 Definition lists: <dl> tag
• Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag

46
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>
• Renders without bullets
• Definition is indented

#EducationWithValues mitwpu.edu.in
 Lists – Example
lists.html
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

47
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

#EducationWithValues mitwpu.edu.in
 HTML Tables

#EducationWithValues mitwpu.edu.in
 HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
Specifies a group of one or more columns in a table for
<colgroup>
formatting
Specifies column properties for each column within a
<col>
<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

#EducationWithValues mitwpu.edu.in
 HTML Tables (2)
• Start and end of a table
<table> ... </table>
• Start and end of a row

50
<tr> ... </tr>
• Start and end of a cell in a row
<td> ... </td>

#EducationWithValues mitwpu.edu.in
 Simple HTML Tables
<html>
<body>

<table width=100% border = "1" bgcolor = "yellow">

<tr>

51
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

</body>
</html>
#EducationWithValues mitwpu.edu.in
 Simple HTML Tables
<html>
<body>

<table width=50% border = "1" >

<tr>

52
<th colspan=2>Firstname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 Column and Row Span

53
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]

colspan="2"

#EducationWithValues mitwpu.edu.in
 HTML Tables – colspan
<html>
<body>

<table width=50% border = "1" >

<tr>

54
<th colspan=2>Firstname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 HTML Tables –rowspan
<h2 align=center> Cell that spans two rows: </h2>
<table style="width:50%“ border=“1” align=center>
<tr>
<th>Name:</th>

55
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

</body>
</html>
#EducationWithValues mitwpu.edu.in
 HTML Tables –rowspan
with <style>

#EducationWithValues mitwpu.edu.in
 Complete HTML Tables
• Table rows split into three semantic sections: header, body
and footer
• <thead> denotes table header and contains <th> elements,
instead of <td> elements

57
• <tbody> denotes collection of table rows that contain the very
data
• <tfoot> denotes table footer but comes BEFORE the <tbody>
tag
• <colgroup> and <col> define columns (most often used to set
column widths)

#EducationWithValues mitwpu.edu.in
 HTML Forms
Entering User Data from a Web Page

#EducationWithValues mitwpu.edu.in
 HTML Form
• The <form> Element
• The HTML <form> element defines a form that is used to
collect user input:
• Syntax
<form>
form elements
</form>

• Form elements are different types of input elements, like

• text fields,
• checkboxes,
• radio buttons,
• submit buttons, and more.

#EducationWithValues mitwpu.edu.in
 The <input> Element
• The <input> element is the most • HTML5 Input Types
important form element. • HTML5 added several new input
types
• Here are some examples: • color
• Input Type Text • date
• datetime-local
• Input Type Password
• email
• Input Type Submit • month
• Input Type Radio • number
• range
• Input Type Reset
• search
• Input Type Checkbox • tel
• Input Type Button …etc • time
• url
• week

#EducationWithValues mitwpu.edu.in
 Input Type Text
• <input type="text"> • This is how the HTML
defines a one-line text code above will be
input field: displayed in a browser:

• Example

#EducationWithValues mitwpu.edu.in
 Input Type Password
• <input type="password"> • This is how the HTML
• defines a password field: code above will be
displayed in a browser:

• Example

#EducationWithValues mitwpu.edu.in
 Input Type Submit
• defines a button for submitting form data to a form-handler.
• The form-handler is specified in the form's action attribute:
• Example
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"> <br>
Last name:<br>

<input type="text" name="lastname" value="Mouse"><br><br>

<input type="submit" value="Submit">
</form>

#EducationWithValues mitwpu.edu.in
 Input Type Reset
• <input type="reset"> defines a reset button that will reset all
form values to their default values:
• click the "Reset" button, the form-data will be reset.

• Example

#EducationWithValues mitwpu.edu.in
 Input Type Button
• <input type="button"> defines a button:
• Example
• <input type="button" onclick="alert('Hello World!')"
value="Click Me!">

• After clicking above button it shows output as below:

#EducationWithValues mitwpu.edu.in
 Input Type Radio
• <input type="radio"> defines a radio button.
• Radio buttons let a user select ONLY ONE of a limited number of
choices:
• <form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>

• This is how the HTML code above will be displayed in a browser:

#EducationWithValues mitwpu.edu.in
 Input Type Checkbox
• <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited
number of choices.
• Example
<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
• This is how the HTML code above will be displayed in a browser:

#EducationWithValues mitwpu.edu.in
 HTML Input Attributes
• The value Attribute
• The readonly Attribute
• The disabled Attribute
• The size Attribute
• The maxlength Attribute

#EducationWithValues mitwpu.edu.in
 The <select> Element

(Dropdown menus)
• The <select> element defines a drop-down list:
• <select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

#EducationWithValues mitwpu.edu.in
 The <select> Element with

multiple selection
• <select name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

#EducationWithValues mitwpu.edu.in
 The <textarea> Element
• <textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

• The rows attribute specifies the visible number of lines in a

text area.
• The cols attribute specifies the visible width of a text area.

#EducationWithValues mitwpu.edu.in
 HTML Forms – Example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>

72
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
#EducationWithValues mitwpu.edu.in
 HTML Forms – Example (2)
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
#EducationWithValues mitwpu.edu.in
 HTML Forms – Example (3)
form.html (continued)

74
#EducationWithValues mitwpu.edu.in
 HTML Frames
<frameset>, <frame>and <iframe>

#EducationWithValues mitwpu.edu.in
 HTML Frames
• Frames provide a way to show multiple HTML documents in a
single Web page
• The page can be split into separate views (frames) horizontally
and vertically

76
• Frames were popular in the early ages of HTML development,
but now their usage is rejected
• Frames are not supported by all user agents (browsers, search
engines, etc.)
• A <noframes> element is used to provide content for non-
compatible agents.

#EducationWithValues mitwpu.edu.in
 HTML <frame> Tag.
• 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.

#EducationWithValues mitwpu.edu.in
 Outline
• Introduction to web technology, internet and www, Web site planning
and design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs,
• line break, colors & fonts, links, frames, lists, tables, images and forms,
• Difference between HTML and HTML5.

• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page,

CSS selectors,

• XML: Introduction to XML, XML key component,Transforming XML into

XSLT, DTD: Schema, elements, attributes,
#EducationWithValues mitwpu.edu.in
 Html Html5
Doctype declaration in Html is too longer DOCTYPE declaration in Html5 is very
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML simple "<!DOCTYPE html>
4.01//EN" "http://www.w3.org /TR /html4
/strict.dtd">
character encoding in Html is also longer
character encoding (charset) declaration is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
also very simple <meta charset="UTF-8">
4.0 Transitional//EN">

Audio and Videos are integral part of

Audio and Video are not part of HTML4
HTML5 e.g. <audio> and <video> tags.
Vector Graphics is possible with the help of Vector graphics is integral part of HTML5
technologies such as VML, Silverlight, Flash etc e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user JS GeoLocation API in HTML5 helps identify
browsing any website especially if it comes to mobile location of user browsing any website (provided
devices. user allows it)
Html5 use cookies. It provides local storage in place of cookies.

Not possible to draw shapes like circle, rectangle, Using Html5 you can draw shapes like circle,
triangle. rectangle, triangle.
Allows JavaScript to run in background. This is
Does not allow JavaScript to run in browser. JS runs in
possible due to JS Web worker API in HTML5
same thread as browser interface.
Works with all old browsers Supported by all new browser.
#EducationWithValues mitwpu.edu.in
 Outline
• Introduction to web technology, internet and www, Web site planning
and design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs,
• line break, colors & fonts, links, frames, lists, tables, images and forms,
• Difference between HTML and HTML5.

• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page,

CSS selectors,

• XML: Introduction to XML, XML key component,Transforming XML into

XSLT, DTD: Schema, elements, attributes,
#EducationWithValues mitwpu.edu.in
 Cascading Style Sheets (CSS)

#EducationWithValues mitwpu.edu.in
 Introduction of CSS
• Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making
web pages presentable.
• CSS handles the look and feel part of a web page.
• Using CSS, you can control the color of the text, the style of
fonts, the spacing between paragraphs, how columns are sized
and laid out, what background images or colors are used,
layout designs,variations in display for different devices and
screen sizes as well as a variety of other effects.

#EducationWithValues mitwpu.edu.in
 Advantages of CSS
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to HTML
• Multiple Device Compatibility
• Global web standards
• Offline Browsing
• Platform Independence

#EducationWithValues mitwpu.edu.in
 CSS3 Modules
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

#EducationWithValues mitwpu.edu.in
 CSS - Syntax
• A CSS comprises of style rules that are interpreted by the
browser and then applied to the corresponding elements in
your document.
• Style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
• Property - A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS
properties. They could be color, border etc.
• Value - Values are assigned to properties. For example, color
property can have value either red or #F1F1F1 etc.

#EducationWithValues mitwpu.edu.in
 CSS - Syntax
• Syntax:
• selector { property: value }
• Example:
• table{ border :1px solid #C00; }

#EducationWithValues mitwpu.edu.in
 CSS selectors (1)
• CSS selectors are used to "find" (or select) HTML elements
based on their element name, id, class, attribute, and more.
• The element Selector
• The element selector selects elements based on the element
name.
• You can select all <p> elements on a page like this (in this case, all
<p> elements will be center-aligned, with a red text color):
• Example
• p{
text-align: center;
color: red;
}

#EducationWithValues mitwpu.edu.in
 Example with output
HTML Code with CSS

Output

#EducationWithValues mitwpu.edu.in
 CSS selectors (2)
• The id Selector
• The id selector uses the id attribute of an HTML element to
select a specific element.
• The id of an element should be unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
• The style rule below will be applied to the HTML element with
id="para1":
• Example
• #para1 {
text-align: center;
color: red;
}
#EducationWithValues mitwpu.edu.in
 Example with output

HTML Code with CSS

Output

#EducationWithValues mitwpu.edu.in
 CSS selectors (3)
• The class Selector
• The class selector selects elements with a specific class
attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.
• In the example below, all HTML elements with class="center"
will be red and center-aligned:
• Example
• .center {
text-align: center;
color: red;
}

#EducationWithValues mitwpu.edu.in
 Example with output
HTML Code with CSS

Output

#EducationWithValues mitwpu.edu.in
 CSS selectors (4)
• The class Selector continued….
• You can also specify that only specific HTML elements should
be affected by a class.
• In the example below, only <p> elements with class="center"
will be center-aligned:
• Example
• p.center {
text-align: center;
color: red;
}

#EducationWithValues mitwpu.edu.in
 CSS selectors (5)
• Grouping Selectors
• If you have elements with the same style definitions, like this:
• h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red; }
p{
text-align: center;
color: red;}
• It will be better to group the selectors, to minimize the code.
• h1, h2, p {
text-align: center;
color: red;
}

#EducationWithValues mitwpu.edu.in
 Example with output
HTML Code with CSS

Output

#EducationWithValues mitwpu.edu.in
 Insert CSS in HTML
• Three Ways to Insert CSS
1. External style sheet
2. Internal style sheet
3. Inline style

#EducationWithValues mitwpu.edu.in
 External Style Sheet
• With an external style sheet, you can change the look of an
entire website by changing just one file!
• Each page must include a reference to the external style sheet
file inside the <link> element. The <link> element goes inside
the <head> section:
• Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

#EducationWithValues mitwpu.edu.in
 External Style Sheet
HTML Code

CSS File named- mystyle.css

#EducationWithValues mitwpu.edu.in
 Internal Style Sheet
• An internal style sheet may be used if one single page has a
unique style.
• Internal styles are defined within the <style> element, inside
the <head> section of an HTML page:
• Example

#EducationWithValues mitwpu.edu.in
 Inline Styles
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
• The example below shows how to change the color and the
left margin of a <h1> element:
• Example

#EducationWithValues mitwpu.edu.in
 Text-related CSS Properties

• color – specifies the color of the text

• font-size – size of font: xx-small, x-small, small,
medium, large, x-large, xx-large, smaller,

101
larger or numeric value
• font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• The browser loads the first one that is available
• There should always be at least one generic font
• font-weight can be normal, bold, bolder,
lighter or a number in range [100 … 900]

#EducationWithValues mitwpu.edu.in
 CSS Rules for Fonts (2)

• font-style – styles the font

• Values: normal, italic, oblique

102
• text-decoration – decorates the text
• Values: none, underline, line-trough,
overline, blink
• text-align – defines the alignment of text or other
content
• Values: left, right, center, justify

#EducationWithValues mitwpu.edu.in
 Shorthand Font Property
• font
• Shorthand rule for setting multiple font properties at
the same time

103
font:italic normal bold 12px/16px verdana

is equal to writing this:

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

#EducationWithValues mitwpu.edu.in
 Backgrounds
• background-image
• URL of image to be used as background, e.g.:
background-image:url("back.gif");

104
• background-color
• Using color and image and the same time
• background-repeat
• repeat-x, repeat-y, repeat, no-repeat
• background-attachment
• fixed / scroll

#EducationWithValues mitwpu.edu.in
 Backgrounds (2)
• background-position: specifies vertical and horizontal
position of the background image
• Vertical position: top, center, bottom

105
• Horizontal position: left, center, right
• Both can be specified in percentage or other numerical values
• Examples:

background-position: top left;

background-position: -5px 50%;

#EducationWithValues mitwpu.edu.in
 Borders
• border-width: thin, medium, thick or numerical value
(e.g. 10px)
• border-color: color alias or RGB value

106
• border-style: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset, outset
• Each property can be defined separately for left, top, bottom
and right
• border-top-style, border-left-color, …

#EducationWithValues mitwpu.edu.in
 Border Shorthand Property
• border: shorthand rule for setting border properties at once:
border: 1px solid red

107
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;

• Specify different borders for the sides via shorthand rules:

border-top, border-left, border-right, border-
bottom
• When to avoid border:0

#EducationWithValues mitwpu.edu.in
 Width and Height
• width – defines numerical value for the width of element,
e.g. 200px
• height – defines numerical value for the height of element,

108
e.g. 100px
• By default the height of an element is defined by its content
• Inline elements do not apply height, unless you change their
display style.

#EducationWithValues mitwpu.edu.in
 Outline
• Introduction to web technology, internet and www, Web site planning
and design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs,
• line break, colors & fonts, links, frames, lists, tables, images and forms,
• Difference between HTML and HTML5.

• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page,

CSS selectors,
• XML: Introduction to XML, XML key component, Transforming XML into
XSLT, DTD: Schema, elements, attributes,
• Introduction to JSON.
#EducationWithValues mitwpu.edu.in
 XML
• Introduction to XML
• XML is a software- and hardware-independent tool for storing
and transporting data.
• What is XML?
• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation

#EducationWithValues mitwpu.edu.in
 XML Does Not DO Anything
• This note is a note to Tove from Jani, stored as XML::
• <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
• The XML above is quite self-descriptive:
• It has sender information.
• It has receiver information
• It has a heading
• It has a message body.
• But still, the XML above does not DO anything. XML is just
information wrapped in tags.

#EducationWithValues mitwpu.edu.in
 The Difference Between
XML and HTML
• XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data
looks
• XML Does Not Use Predefined Tags like HTML tags

#EducationWithValues mitwpu.edu.in
 XML Used For (1)
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability

#EducationWithValues mitwpu.edu.in
 XML Used For (2)
• Many computer systems contain data in incompatible formats.
Exchanging data between incompatible systems (or upgraded
systems) is a time-consuming task for web developers. Large
amounts of data must be converted, and incompatible data is
often lost.
• XML stores data in plain text format. This provides a software-
and hardware-independent way of storing, transporting, and
sharing data.
• XML also makes it easier to expand or upgrade to new
operating systems, new applications, or new browsers,
without losing data.

#EducationWithValues mitwpu.edu.in
 XML Example 1
• <?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Amit</to>
<from>Neha</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

• Save the file with .xml extension and when run o/p is like below

#EducationWithValues mitwpu.edu.in
 XML Example 2- Books.xml
• <?xml version="1.0" encoding="UTF-8"?>
<bookstore>

<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>

<book category="web" cover="paperback">

<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>

</bookstore>
#EducationWithValues mitwpu.edu.in
 XML Example 2- Books.xml
explanation
• XML uses a much self-describing syntax.
• A prolog defines the XML version and the character encoding:
• <?xml version="1.0" encoding="UTF-8"?>
• The next line is the root element of the document:
• <bookstore>
• The next line starts a <book> element:
• <book category="cooking">
• The <book> elements have 4 child elements: <title>,
<author>, <year>, <price>.
• The next line ends the book element:
• </book>

#EducationWithValues mitwpu.edu.in
 XSLT
• XSLT (eXtensible Stylesheet Language Transformations) is the
recommended style sheet language for XML.
• XSLT is far more sophisticated than CSS.
• With XSLT you can add/remove elements and attributes to or
from the output file.
• You can also rearrange and sort elements, perform tests and
make decisions about which elements to hide and display, and
a lot more.
• XSLT uses XPath to find information in an XML document.

#EducationWithValues mitwpu.edu.in
 Displaying XML with XSLT

Create XML Page

Create XSLT Page according to your design criteria

Link XML page with XSLT Page

Get output on browser

#EducationWithValues mitwpu.edu.in
 Step 1 : Create XML Document:
students.xml
<?xml version = "1.0"?>
<class>
<student rollno = "393">
<firstname>Dinkar</firstname>
<lastname>Kad</lastname>
</student>
<student rollno = "493">
<firstname>Vaneet</firstname>
<lastname>Gupta</lastname>
</student>
</class>

#EducationWithValues mitwpu.edu.in
 Step 2: XSLT Conversion criteria

• We need to define an XSLT style sheet document for the

above XML document to meet the following criteria −
• Page should have a title Students.
• Page should have a table of student details.
• Columns should have following headers:
• Roll No, First Name, Last Name
• Table must contain details of the students accordingly.

#EducationWithValues mitwpu.edu.in
 Step 2: Create XSLT document accordingtodesign criteria:
students.xsl

<?xml version = "1.0" encoding = "UTF-8"?>

<xsl:stylesheet version = "1.0" xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">
<xsl:template match = "/">
<html> <body>
<h2>Students</h2>
<table border = "1">
<tr bgcolor = "#9acd32">
<th>Roll No</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<xsl:for-each select="class/student">
<tr>
<td><xsl:value-of select = "@rollno"/></td>
<td><xsl:value-of select = "firstname"/></td>
<td><xsl:value-of select = "lastname"/></td>
</tr>
</xsl:for-each> </table>
</body> </html>
</xsl:template>
</xsl:stylesheet>
#EducationWithValues mitwpu.edu.in
 Step 3: Link the XSLT Document
to the XML Document
• <?xml version = "1.0"?>
• <?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
• <class>
• ...
• </class>

#EducationWithValues mitwpu.edu.in
 Step 4: View the XML Document
in Internet Explorer
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
<class>
<student rollno = "393">
<firstname>Dinkar</firstname>
<lastname>Kad</lastname>
</student>
<student rollno = "493">
<firstname>Vaneet</firstname>
<lastname>Gupta</lastname>
</student>
</class>

#EducationWithValues mitwpu.edu.in
 Output

#EducationWithValues mitwpu.edu.in
 Outline
• Introduction to web technology, internet and www, Web site planning
and design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs,
• line break, colors & fonts, links, frames, lists, tables, images and forms,
• Difference between HTML and HTML5.

• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page,

CSS selectors,
• XML: Introduction to XML, XML key component, Transforming XML into
XSLT, DTD: Schema, elements, attributes,
• Introduction to JSON.
#EducationWithValues mitwpu.edu.in
 Introduction to DTD
• A DTD is a Document Type Definition.
• A DTD defines the structure and the legal elements and
attributes of an XML document.
• With a DTD, independent groups of people can agree on a
standard DTD for interchanging data.
• An application can use a DTD to verify that XML data is valid.

#EducationWithValues mitwpu.edu.in
 An Internal DTD Example
• <?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend</body>
</note>
#EducationWithValues mitwpu.edu.in
 An Internal DTD Expalnation
• The DTD in previous slide is interpreted like this:
• !DOCTYPE note defines that the root element of this
document is note
• !ELEMENT note defines that the note element must contain
four elements: "to,from,heading,body"
• !ELEMENT to defines the to element to be of type "#PCDATA"
• !ELEMENT from defines the from element to be of type
"#PCDATA"
• !ELEMENT heading defines the heading element to be of type
"#PCDATA"
• !ELEMENT body defines the body element to be of type
"#PCDATA"

#EducationWithValues mitwpu.edu.in
 An External DTD Example
• XML File • note.dtd

• <?xml version="1.0"?> • <!ELEMENT note

<!DOCTYPE note SYSTEM "note.dtd"> (to,from,heading,body)>
<note> <!ELEMENT to (#PCDATA)>
<to>Tove</to> <!ELEMENT from (#PCDATA)>
<from>Jani</from> <!ELEMENT heading
<heading>Reminder</heading> (#PCDATA)>
<body>Don't forget me this <!ELEMENT body (#PCDATA)>
weekend!</body>
</note>

#EducationWithValues mitwpu.edu.in
 Building Blocks of XML
Documents as per DTD
• Elements : <body>some text</body>
• Attributes : <img src="computer.gif" />
• Entities : &lt; &amp;
• PCDATA : PCDATA means parsed character data.
• PCDATA is text that WILL be parsed by a parser.
Character data is the text found between the start tag
and the end tag of an XML element.

• CDATA: CDATA means character data.

• CDATA is text that will NOT be parsed by a parser.

#EducationWithValues mitwpu.edu.in
 Elements
• XML elements can be defined as building blocks of an XML
document.
• Elements can behave as a container to hold text, elements,
attributes, media objects or mix of all.
• Each XML document contains one or more elements, the
boundaries of which are either delimited by start-tags and
end-tags, or empty elements.

Example
• <name>Tutorials Point</name>

#EducationWithValues mitwpu.edu.in
 Attributes
• Attributes are part of the XML elements.
• An element can have any number of unique attributes.
• Attributes give more information about the XML element or
more precisely it defines a property of the element.
• An XML attribute is always a name-value pair.

Example
• <img src="flower.jpg"/>
• Here img is the element name whereas src is an attribute
name and flower.jpg is a value given for the attribute src.

#EducationWithValues mitwpu.edu.in
 Entities
• Entities are placeholders in XML. These can be declared in the
document prolog or in a DTD. Entities can be primarily categorized as:
• Built-in entities
• Character entities
• General entities
• Parameter entities
• There are five built-in entities that play in well-formed XML, they are:
• ampersand: &amp;
• Single quote: &apos;
• Greater than: &gt;
• Less than: &lt;
• Double quote: &quot;

#EducationWithValues mitwpu.edu.in
 Advantages & Disadvantages
• Advantages of using DTD
• Documentation - You can define your own format for the
XML files.
• Validation - It gives a way to check the validity of XML files
by checking whether the elements appear in the right order,
mandatory elements and attributes are in place

• Disadvantages of using DTD

• It does not support the namespaces.
• It supports only the text string data type.
• It is not object oriented.

#EducationWithValues mitwpu.edu.in
 Outline
• Introduction to web technology, internet and www, Web site planning
and design issues,
• HTML: structure of html document,HTML elements: headings,
paragraphs,
• line break, colors & fonts, links, frames, lists, tables, images and forms,
• Difference between HTML and HTML5.

• CSS: Introduction to Style Sheet,Inserting CSS in an HTML page,

CSS selectors,
• XML: Introduction to XML, XML key component, Transforming XML into
XSLT, DTD: Schema, elements, attributes,
• Introduction to JSON
#EducationWithValues mitwpu.edu.in
 JSON-Introduction
• JSON: JavaScript Object Notation.
• JSON is a syntax for storing and exchanging data.
• JSON is text, written with JavaScript object notation.
• JSON is language independent *
• Why use JSON?
• Since the JSON format is text only, it can easily be sent to and
from a server, and used as a data format by any programming
language.
• JavaScript has a built in function to convert a string, written in
JSON format, into native JavaScript objects:
• JSON.parse()
• So, if you receive data from a server, in JSON format, you can
use it like any other JavaScript object.

#EducationWithValues mitwpu.edu.in
 JSON Syntax Rules
• JSON syntax is derived from JavaScript object notation syntax:
• Data is in name/value pairs
• Data is separated by commas
• Curly braces hold objects
• Square brackets hold arrays
• JSON Data - A Name and a Value
• JSON data is written as name/value pairs.
• A name/value pair consists of a field name (in double quotes),
followed by a colon, followed by a value:
• Example
• "name":"John"

#EducationWithValues mitwpu.edu.in
 JSON Values
• In JSON, values must be one of the following data types:
• a string
• a number
• an object (JSON object)
• an array
• a boolean
• null
• In JSON, string values must be written with double quotes:
• { "name":"John" }

#EducationWithValues mitwpu.edu.in
 Object Syntax
• Example
• { "name":"John", "age":30, "car":null }
• JSON objects are surrounded by curly braces {}.
• JSON objects are written in key/value pairs.
• Keys must be strings, and values must be a valid JSON data
type (string, number, object, array, boolean or null).
• Keys and values are separated by a colon.
• Each key/value pair is separated by a comma.

#EducationWithValues mitwpu.edu.in
 References
• http://study.com/academy/lesson/what-is-web-technology-
definition-trends.html
• https://www.tutorialspoint.com/web_developers_guide/web_
basic_concepts.htm
• https://www.slideshare.net/vikramsingh.v85/introduction-to-
web-technology
• www.telerik.com
• https://www.w3schools.com/html/
• https://www.w3schools.com/css/css_intro.asp
• https://www.w3schools.com/xml/
• https://www.w3schools.com/js/js_json_intro.asp
• https://www.w3schools.com/xml/xml_dtd_intro.asp

#EducationWithValues mitwpu.edu.in
 BootStrap

#EducationWithValues
#EducationWithValues mitwpu.edu.in
 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
#EducationWithValues mitwpu.edu.in
 What is Responsive
Web Design?
Responsive web design is about creating web sites which
automatically adjust themselves to look good on all devices,
from small phones to large desktops.

#EducationWithValues mitwpu.edu.in
 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.
• Bootstrap Versions
• Bootstrap 5 (released 2021) is the newest version
of Bootstrap (released 2013); with new components,
faster stylesheet and more responsiveness.
• Bootstrap 5 supports the latest, stable releases of all
major browsers and platforms. However, Internet
Explorer 11 and down is not supported.
• The main differences between Bootstrap 5 and
Bootstrap 3 & 4, is that Bootstrap 5 has switched to
vanilla JavaScript instead of jQuery.
#EducationWithValues mitwpu.edu.in
 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, mobile-first styles are
part of the core framework
• Browser compatibility: Bootstrap 5 is compatible with all
modern browsers (Chrome, Firefox, Edge, Safari, and
Opera).

#EducationWithValues mitwpu.edu.in
 Where to Get Bootstrap ?
There are two ways to start using Bootstrap 5 on your own web site.
✓Include Bootstrap from a CDN
✓Download Bootstrap from getbootstrap.com

If you don't want to download and host Bootstrap 5 yourself, you can include it
from a CDN (Content Delivery Network).
jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.
min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.b
undle.min.js"></script>

#EducationWithValues mitwpu.edu.in
 Create Your First Web Page
With Bootstrap 5
1. Add the HTML5 doctype
Bootstrap uses HTML elements and CSS properties that
require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the
page, along with the lang attribute and the correct character
set:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

#EducationWithValues mitwpu.edu.in
 !DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
Code </head>

<body>
<h1>Hello world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>

Output

#EducationWithValues mitwpu.edu.in
 Create Your First Web Page
With Bootstrap 5
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first
styles are part of the core framework.
To ensure proper rendering and touch zooming, add the
following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.

#EducationWithValues mitwpu.edu.in
 Create Your First Web Page
With Bootstrap 5
3. Containers
Bootstrap also requires a containing element to wrap site contents.
Containers are used to pad the content inside of them, and there are
two container classes available:
1.The .container class provides a responsive fixed width container
2.The .container-fluid class provides a full width container,
spanning the entire width of the viewport.

#EducationWithValues mitwpu.edu.in
 Basic Bootstrap Pages
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script
>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Fixed Container
• Use the .container class to create a responsive, fixed-width container.
• Note that its width (max-width) will change on different screen sizes:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
<p>Resize the browser window to see that the container width will change at different
breakpoints.</p>
</div>
</body></html>

#EducationWithValues mitwpu.edu.in
 Fluid Container

Use the .container-fluid class to create a full width container, that will always span
the entire width of the screen (width is always 100%):

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the
viewport.</p>
</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 Container Padding
By default, containers have left and right padding, with no top or bottom padding. Therefore, we
often use spacing utilities, such as extra padding and margins to make them look even better.
For example, .pt-5 means "add a large top padding":
<div class="container pt-5"></div>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container pt-5">
<h1>My First Bootstrap Page</h1>
<p>This container has an extra top padding.</p>
<p>Try to remove the .pt-5 class to see the difference.</p>
</div>
</body></html>

#EducationWithValues mitwpu.edu.in
 Container Border and Color
Other utilities, such as borders and colors, are also often used together with containers:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></scri
pt>
</head>
<body>
<div class="container p-5 my-5 border">
<h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a dark background color and a white text, and some extra
padding and margins.</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>My First Bootstrap Page</h1>
<p>This container has a blue background color and a white text, and some extra
padding and margins.</p>
</div>
</body></html>

#EducationWithValues mitwpu.edu.in
 Responsive Containers

You can also use 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:

<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>
#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container pt-3">

<h1>Responsive Containers</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="container-sm border">.container-sm</div>

<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>
<div class="container-xxl mt-3 border">.container-xxl</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 Bootstrap 5 Grids
• 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.

• The grid system is responsive, and the columns will re-arrange automatically depending
on the screen size.

#EducationWithValues mitwpu.edu.in
 Basic Structure of a
Bootstrap 5 Grid

First example: create a row (<div class="row">). Then, add the desired number of columns
(tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness:
sm, md, lg, xl or xxl, while the second star represents a number, which should add up to 12
for each row.
Second example: instead of adding a number to each col, let bootstrap handle the layout, to
create equal width columns: two "col" elements = 50% width to each col, while three cols =
33.33% width to each col. Four cols = 25% width, etc. You can also use .col-
sm|md|lg|xl|xxl to make the columns responsive.

#EducationWithValues mitwpu.edu.in
 Bootstrap Text/Typography
Bootstrap's global default font-size is 14px, with a line-height of 1.428.
This is applied to the <body> element and all paragraphs (<p>).
In addition, all <p> elements have a bottom margin that equals half their computed
line-height (10px by default)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 <small>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Lighter, Secondary Text</h1>
<p>The small element is used to create a lighter, secondary text in any heading:</p>
<h1>h1 heading <small>secondary text</small></h1>
<h2>h2 heading <small>secondary text</small></h2>
<h3>h3 heading <small>secondary text</small></h3>
<h4>h4 heading <small>secondary text</small></h4>
<h5>h5 heading <small>secondary text</small></h5>
<h6>h6 heading <small>secondary text</small></h6>
</div></body></html>

#EducationWithValues mitwpu.edu.in
 <mark>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>Highlight Text</h1>
<p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
 Bootstrap 5 Colors-
Text Colors
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-
white, .text-dark, .text-body (default body color/often black) and .text-light:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Colors</h2>
<p>Use the contextual classes to provide "meaning through colors":</p>
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is important.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-info">This text represents some information.</p>
<p class="text-warning">This text represents a warning.</p>
<p class="text-danger">This text represents danger.</p>
<p class="text-secondary">Secondary text.</p>
<p class="text-dark">This text is dark grey.</p>
<p class="text-body">Default body color (often black).</p>
<p class="text-light">This text is light grey (on white background).</p>
<p class="text-white">This text is white (on white background).</p>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you'll want to use them together
with a .text-* color class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Contextual Backgrounds</h2>
<p>Use the contextual background classes to provide "meaning through colors".</p>
<p>Note that you can also add a .text-* class if you want a different text color:</p>
<p class="bg-primary text-white">This text is important.</p>
<p class="bg-success text-white">This text indicates success.</p>
<p class="bg-info text-white">This text represents some information.</p>
<p class="bg-warning text-white">This text represents a warning.</p>
<p class="bg-danger text-white">This text represents danger.</p>
<p class="bg-secondary text-white">Secondary background color.</p>
<p class="bg-dark text-white">Dark grey background color.</p>
<p class="bg-light text-dark">Light grey background color.</p>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Bootstrap 5 Tables
Basic Table
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
<head>
<title>Bootstrap Example</title>
<tbody>
<meta charset="utf-8">
<tr>
<meta name="viewport" content="width=device-width, initial-
<td>John</td>
scale=1">
<link <td>Doe</td>
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstr <td>[email protected]</td>
ap.min.css" rel="stylesheet"> </tr>
<script <tr>
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap. <td>Mary</td>
bundle.min.js"></script> <td>Moe</td>
</head> <td>[email protected]</td>
<body> </tr>
<tr>
<div class="container mt-3"> <td>July</td>
<h2>Basic Table</h2> <td>Dooley</td>
<p>The .table class adds basic styling (light padding and <td>[email protected]</td>
horizontal dividers) to a table:</p> </tr>
<table class="table"> </tbody>
<thead> </table>
<tr> </div>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>

#EducationWithValues mitwpu.edu.in
 Bootstrap 5 Images

Rounded Corners
The .rounded class adds rounded corners to an image:
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Circle
The .rounded-circle class shapes the image to a circle:
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">

<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p>
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre"
width="304" height="236">
</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Circle</h2>
<p>The .img-circle class shapes the image to a circle (not available in IE8):</p>
<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
</div>

</body>
</html>

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p>
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre"
width="304" height="236">
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Aligning Images
Float an image to the left with the .float-start class or to the right with .float-end:

#EducationWithValues mitwpu.edu.in
 Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-
block (display:block) to the image:

#EducationWithValues mitwpu.edu.in
 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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.c
ss" rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.
min.js"></script>
</head>
<body>

<div class="container mt-3">

<h2>Image</h2>
<p>The .img-fluid class makes the image scale nicely to the parent element
(resize the browser window to see the effect):</p>
<img class="img-fluid" src="ny.jpg" alt="New York" width="1100"
height="500">
</div></body></html>

#EducationWithValues mitwpu.edu.in
 Image Gallery
You can also use Bootstrap's grid system in conjunction with the .thumbnail class
to create an image gallery.

#EducationWithValues mitwpu.edu.in
 Responsive Embeds
• Also let videos or slideshows scale properly on any device.
• Classes can be applied directly to <iframe>, <embed>, <video>, and <object>
elements.
• The following example creates a responsive video by adding an .embed-responsive-
item class to an <iframe> tag (the video will then scale nicely to the parent
element).
• The containing <div> defines the aspect ratio of the video:

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent
element with an 16:9 aspect ratio</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Button Styles
Bootstrap provides different styles of buttons:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Button Groups
Bootstrap allows you to group a series of buttons together
(on a single line) in a button group:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Group</h2>
<p>The .btn-group class creates a button group:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Justified Button Groups
To span the entire width of the screen, use
the .btn-group-justified class:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Justified Button Groups</h2>
<p>To span the entire width of the screen, use the .btn-group-justified class:</p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Nesting Button Groups &
<!DOCTYPE html>
Dropdown Menus
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Nesting Button Groups</h2>
<p>Nest button groups to create drop down menus:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
</body> </html>

#EducationWithValues mitwpu.edu.in
 Bootstrap Form Layouts
Bootstrap provides three types of form layouts:
•Vertical form (this is default)
•Horizontal form
•Inline form

Standard rules for all three form layouts:

•Wrap labels and form controls in <div class="form-group"> (needed for
optimum spacing)
•Add class .form-control to all textual <input>, <textarea>,
and <select> elements

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Inline form</h2>
<p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are
alongside.</p>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html> <div class="form-group">
<html lang="en"> <div class="col-sm-offset-2 col-sm-10">
<head> <div class="checkbox">
<title>Bootstrap Example</title> <label><input type="checkbox" name="remember"> Remember me</label>
<meta charset="utf-8"> </div>
<meta name="viewport" content="width=device-width, initial-scale=1"> </div>
<link rel="stylesheet" </div>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <div class="form-group">
<script <div class="col-sm-offset-2 col-sm-10">
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button type="submit" class="btn btn-default">Submit</button>
<script </div>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scri </div>
pt> </form>
</head> </div>
<body> </body>
<div class="container"> </html>
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter
password" name="pwd">
</div>
</div>

#EducationWithValues mitwpu.edu.in
 Bootstrap Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date,
month, time, week, number, email, url, search, tel, and color.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></scri
pt>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text and one of type
password:</p>
<form>
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div></form></div>

#EducationWithValues mitwpu.edu.in
 Bootstrap CSS Tables

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html> <tbody>
<head> <tr>
<meta name="viewport" content="width=device-width, initial- <td>1</td>
scale=1"> <td>Anna</td>
<link rel="stylesheet" </tr>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bo <tr>
otstrap.min.css"> <td>2</td>
<script <td>Debbie</td>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery. </tr>
min.js"></script> <tr>
<script <td>3</td>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/boot <td>John</td>
strap.min.js"></script> </tr>
</head> </tbody>
<body> </table>
</div>
<div class="container"> </body>
<h2>Table</h2> </html>
<p>The .table class adds basic styling (light padding and only
horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
#EducationWithValues mitwpu.edu.in
<!DOCTYPE html> <tbody>
<html> <tr>
<head> <td>1</td>
<meta name="viewport" content="width=device-width, initial-scale=1"> <td>Anna</td>
<link rel="stylesheet" </tr>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.mi <tr>
n.css"> <td>2</td>
<script <td>Debbie</td>
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></s </tr>
cript> <tr>
<script <td>3</td>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.j <td>John</td>
s"></script> </tr>
</head> </tbody>
<body> </table>
</div>
<div class="container"> </body>
<h2>Table</h2> </html>
<p>The .table-bordered class adds border on all sides of the table and
cells:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html> <tr class="active">
<html> <td>1</td>
<head> <td>Anna</td>
<meta name="viewport" content="width=device-width, initial-scale=1"> </tr>
<link rel="stylesheet" <tr>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <td>2</td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <td>Debbie</td>
<script </tr>
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <tr>
</head> <td>3</td>
<body> <td>John</td>
</tr>
<div class="container"> </tbody>
<h2>Table</h2> </table>
<p>The .active class applies the hover color to a particular row or cell:</p> </div>
<table class="table"> </body>
<thead> </html>
<tr>
<th>#</th>
<th>Firstname</th>
</tr>
</thead>
<tbody>

#EducationWithValues mitwpu.edu.in
 Bootstrap Jumbotron and
Page Header
• A jumbotron indicates a big box for calling extra attention to some special content or
information.

• A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font
sizes of the text inside it.

#EducationWithValues mitwpu.edu.in
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> Jumbotron Inside Container
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></scri
pt>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
></script>
</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in
 Creating a Page Header
• A page header is like a section divider.
• The .page-header class adds a horizontal line under the heading (+ adds some extra space around the
element):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet“
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
</body>
</html>

#EducationWithValues mitwpu.edu.in