Unit I- HTML, CSS, Bootstrap .pptx

Web Technology
Topic:
Web Essentials and Mark-up
language- HTML
By Prof. Bhavana A. Khivsara ( Assistant Professor, SNJB’s Late Sau K.
B. Jain COE, Chandwad)
Blog: https://bhavanakhivsara.wordpress.com/

Syllabus
● The Internet, basic internet protocols, the World Wide Web, HTTP
Request message, HTTP
response message, web clients, web servers.HTML: Introduction,
history and versions.
● HTML elements: headings, paragraphs, line break, colors and
fonts, links, frames, lists, tables, images and forms, Difference
between HTML and HTML5. CSS: Introduction to Style Sheet,
● CSS features, CSS core syntax, Style sheets and HTML, Style rule
cascading and inheritance, text properties.
● Bootstrap

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 is
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

HTTP
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 can be HTML file, JPEG image, Java applet, audio file,…
❏Web page consists of base HTML-file which includes several referenced
objects
❏Each object is addressable by a URL
❏Example URL:

HTTP Request and Response Message

HTTP request message Example
GET /somedir/page.html HTTP/1.1
Host: www.someschool.edu
User-agent: Mozilla/4.0
Connection: close
Accept-language:fr
(extra carriage return, line feed)
request line
(GET, POST,
HEAD commands)
header
lines
Carriage return,
line feed
indicates end
of message

HTTP response message example
HTTP/1.1 200 OK
Connection close
Date: Thu, 06 Aug 1998 12:00:15 GMT
Server: Apache/1.3.0 (Unix)
Last-Modified: Mon, 22 Jun 1998 …...
Content-Length: 6821
Content-Type: text/html
data data data data data ...
status line
(protocol
status code
status phrase)
header
lines
data, e.g.,
requested
HTML file

Web Client and Web Server
https://hackernoon.com/http-made-easy-understanding-
the-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
By Bhavana A. Khivsara
Assistant Professor
SNJB’s Late Sau k. B. Jain College of Engineering, Chandwad

Different Web Technologies
● HTML
● XHTML
● CSS
● XML
● JavaScript
● VBSCRIPT
● DOM
● DHTML
● AJAX
● E4X
● WMLScript
● SQL
● ASP
● ADO
● PHP
● .NET
● SMIL
● SVG
● FLASH
● Java applets
● Java servlets
● Java Server Page

List of Technologies
Client Side Technologies
● HTML, CSS, JavaScript,
VBScript
● XHTML, DHTML, WML,
AJAX
● FLASH
Server Side Technologies
● ASP, PHP, Perl, JSP,
Servlets
● ASP.NET, Java
● MySQL, SQL Server,
Access
Advanced Technologies
● XML, XSLT, RSS, Atom
● X-Path, XQuery, WSDL
● Ruby on Rails, GRAIL
Framework
● REST, SOAP
Frameworks
● EmberJS
● AngularJS
● ReactJs
● BackboneJS
● VueJS
Frameworks
● ExpressJS
● Django
● laravel
● 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 experience?
● Portability and Data sharing

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.

HTML
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 Elements
● Headings,
● paragraphs,
● line break,
● Text Formatting (Value Addition)
● colors and fonts,
● links,
● Hyperlink-anchor tag ( Value Addition)
● images
● lists,
● tables,
● frames and forms,
● Span and Div tag ( Value Addition)

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

Text
Formatting
Tags
<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup>
Samplesuperscript
<sub></sub>
Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></
blockquote>
Quoted text block
<del></del> Deleted text – strike

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

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

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

Fonts & Colors
● face
● size
● color
● You can set font color using color attribute.
● You can specify the color either by color
name or hexadecimal code for that color.
● <font color = "#FF00FF"> Hello </font>
● <font color = "red"> Hello </font>

Fonts & Colors
● face
● size
● color
● 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.
● The range of accepted values is from
1(smallest) to 7(largest).
● The default size of a font is 3
● Example:- <font size = "5"> Hello </font>
● You can set font color using color attribute.
● You can specify the color either by color
name or hexadecimal code for that color.
● <font color = "#FF00FF"> Hello </font>
● <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.
Example- target = _blank - Opens the linked document in a new
window or tab

HyperLinks
<a href="a1.html"> Click </a>
<a href="../parent.html">
Click </a>
<a href="WTL/a1.html"> Click
</a>
<a
href="http://www.snjb.org">Clic
Link to a document called a1.html in
the same directory
Link to a document called parent.html in the
parent directory
Link to a document called a1.html in the
subdirectory WTL
Link to an external Web site snjb.org

HyperLinks
Link to the same Document
Example:-
<a
href="#section1">Introduction</a><
br>
<a
href="#section2">background</a><
br>
<h2
id="section1">Introduction</h2>
... Section 1 follows here …

Link tag
Link tag is used to Link to an external
style sheet
<head>
<link rel="stylesheet"
href="styles.css">
</head>
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
the linked document

Images- img tag
<img src=
“index.jpeg” >
src Location of image file
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
img
tag
attribu
tes
<img src= “index.jpeg” alt= “Home page” height= "500"
width="600" border= “2” >

List tag
List
Types
Ordered Unordered Definition
<ol> <ul> <dl>

List tag- Ordered List
<ol type="1" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
<ol type="A" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
i>
</ol>
<ol type="a" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
i>
</ol>
<ol type="I" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
<ol type="i" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
i>
</ol>
1. Apple
2.
Orange
3.Grapefr
uit
1. Apple
2.
Orange
3.Grapefr
A. Apple
B. Orang
C. Grapefr
uit
I. Apple
II. Orang
III.Grapefr
uit

List tag- Unordered List
<ul type="disk" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
i>
</ul>
<ul type="Circle"
>
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
<ul
type="Square" >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
<ul >
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</l
i>
</ul>
● Apple
● Orange
● Grapefrui
t
● Apple
● Orange
● Grapefrui
t
❏ Apple
❏ Orange
❏ Grapefrui
t
○ Apple
○ Orang
○ Grapefruit

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
…</dd>

HTML Table
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
<colgrou
p>
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

HTML Table
<th> <th> <th>
<tr>
<tr>
<tr>
<tr>
<td> <td> <td>

HTML Table Example-1
Roll-No Name Address
1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
Student Database Table

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

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai

<html>
<body>
<table border=1 width=50% cellspacing=0>
<tr bgcolor=red>
<th>RollNo</th>
<th>Name</th>
<th>Address</th>
</tr>

1 Bhavana Nashik
2 Amit Pune
3 Neha Mumbai
4 Sameer Chandwad
5 Varun Bhopal

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

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)
T1 Batch
Maths DBMSL(PR)
T2 Batch
1:30-2:30 ADS ADS

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

Web Technology
Topic:
Div and Span tag
Assistant Professor

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>
<body>
My mother has <span
style="color:blue"> blue </span>
eyes and my father has <span
style="color:green">dark
green</span> eyes.
</body>
</html>
<html>
<body>
My mother has <div
style="color:blue"> blue </div> eyes
and my father has <div style=
"color:green"> dark green</div> eyes.
</body>
</html>

Web Technology
Topic:
HTML Frames
Assistant Professor

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
Assistant Professor

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 type="text">
❏<input
type="number">
❏<input
type="password">
❏<input type="date">
❏<input
type="email">
❏<input
type="checkbox">
❏<input type="radio">
❏<input type="file">
❏<input type="reset">
❏<input type="submit">
❏<input type="button">

HTML Form Example-1- Login Page

<html>
<body bgcolor=green>
<br><br><hr>
<h2> Welcome to My Account Login </h2>
<table>
<tr>
<td>Enter User Name:</td>
<td>
<input type=text placeholder="Enter
Username Here">
</td></tr>
<tr>
<td>Enter Password:</td>
<td>
<input type=password placeholder="Enter
Password Here">
</td></tr>
<tr>
<td></td>
<td>
<input type=reset value=Reset
style=color:green>
<input Type =submit value=Login
style=color:green>
</td>
</tr>
</table>
<br><br><hr>
</body>
</html>

<html>
<body >
<h2 align=center> Registration
Form </h2>
<table b>
<tr>
<td>My Photo</td>
<td><input type=file></td>
</tr>
<tr>
<td>Name</td>
<td><input type=text></td>
</tr>
<tr>
<td>Address</td>
</tr>
<tr>
<td>Mobile </td>
<tr>
<td>DOB </td>
<td><input type=date></td>
</tr>
<tr> <td>color </td>
<td><input type=color></td> </tr>
<tr>
<td>Gender </td>
<td>
<input type=radio>Male
<input type=radio>FeMale
</td>
</tr>
<tr>
<td>Hobbies </td>
<td>
<input type=checkbox>Cricket
<input type=checkbox>Hockey
</td>
</tr>

<tr>
<td>Select Branch </td>
<td>
<select size=2>
<option> Computer</option>
<option> IT</option>
<option> Civil</option>
</select>
</td>
</tr>
<tr>
<td>Rate this site </td>
<td>
<input type=number min=1 max=5>
</td>
</tr>
<tr>
<td>Comment </td>
<td>
<textarea col=10 rows=3>
</textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<button >Click</button>
<button >Reset</button>
</td>
</tr>
</body>
</html>

Web Technology
Topic:
Difference Between HTML &
HTML5
Assistant Professor

Html Html5
DOCTYPE declaration in Html is too longer DOCTYPE declaration in Html5 is very simple "<!
DOCTYPE html>
character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
character encoding (charset) declaration is also very
simple <meta charset="UTF-8">
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
technologies such as VML, Silverlight, Flash etc
Vector graphics is integral part of HTML5 e.g. SVG and
canvas
It is almost impossible to get true GeoLocation of
user browsing any website especially if it comes to
mobile devices.
JS GeoLocation API in HTML5 helps identify location of
user browsing any website (provided user allows it)
.It provides local storage in place of cookies. Html5 use cookies

HTML 5 Tags
● <mark>
● <audio>
● <video>
● <Progress>
● <nav>
● Canvas

Web Technology
Topic:
CSS- Cascading Style sheet
Assistant Professor

CSS
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
Inline
CSS
Write CSS code inside HTML Tag
CSS code as attribute of HTML tag
Code starts with Style
Example:
<p style= “color:red” >

Types of CSS
Internal
CSS
Write CSS code inside HTML
Head Tag
Use <style> tag inside Head tag
Example:
<head>
<style>
p { color: red;}
</style>
</head>

Types of CSS
External
CSS
2 Files
1> .html 2> .css
write css code in .css file
Give link of .css file inside .html file,
under head tag, in <link> tag

External CSS Example
a1.html a2.css
<html>
<head>
<link rel="stylesheet" type="text/css" href="a2.css">
</head>
<body>
<p> Hello Good Morning </p>
</body> </html>
p { color: red;}

When to use which Types of CSS
Types of CSS
Inline Internal External
When you want to use css
property for only one tag in
html
When you want to use css property
for more than one tag and you have
only one html file.
When your website is having
multiple html files and you
want same style to be applied
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("paper.gif"); }

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 Properties- Table
❏tr:hover {background-color: grey;}
❏tr:nth-child(even) {background-color: green;}
❏Size
❏Border

Web Technology
Topic:
Bootstrap
Assistant Professor

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'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
xs
(for phones -
screens less
than 768px
wide)
sm
(for tablets -
screens equal
to or greater
than 768px
wide)
md
(for small
laptops -
screens equal
to or greater
than 992px
wide)
lg
(for laptops
and desktops -
screens equal
to or greater
than 1200px

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

Bootstrap- Where to get?
Where to get Bootstrap?
Two Options
Download
Bootstrap from
getbootstrap.com
Include
Bootstrap from
a CDN

References
Websites:
❏ https://www.w3schools.com/html/
❏ https://www.w3schools.com/css/
❏ https://www.w3schools.com/bootstrap/

Unit I- HTML, CSS, Bootstrap .pptx

Recommended

More Related Content

Similar to Unit I- HTML, CSS, Bootstrap .pptx (20)

Recently uploaded (20)

Unit I- HTML, CSS, Bootstrap .pptx