Internet

The Internet is a vast network of computers, and

servers, which communicate with each other. The
internet connects the whole wide world together.
Internet
Web Client:
 It is a software that runs on the client machine.
 Client sends the HTTP request to the server and the
process the HTTP response.
Web server
server that processes requests from a client and send
the response to the client.
FUNCTIONS OF CLIENT AND SERVER
FUNCTIONS OF CLIENT AND SERVER

CLIENT:
 Initiate the request(HTTP request)

 Web browser converts the domain name into corresponding IP address.

 Web browser establishes a TCP connection to web server

 Displays the response(web page) in appropriate format from the web

server.

SERVER:

 Accepts the requests from the web browsers

 Processing and respond to the clients

Protocol:
A network protocol is an established set of rules
that determine how data is transmitted between
different devices in the same network.
BASIC INTERNET PROTOCOLS
Basic internet protocols
1.FTP
2.HTTP
3.SNMP
4.SMTP
5.POP3
6.TCP
7.UDP
8.IP
1. FILE TRANSFER PROTOCOL(FTP)
 used for transmitting the files from one host to
another.

Why FTP?
 two systems may have different file conventions.
 Two systems may have different ways to represent
text and data.
 Two systems may have different directory structures.
 FTP protocol overcomes these problems by
establishing two connections between hosts. One
connection is used for data transfer, and another
connection is used for the control connection.
HYPER TEXT TRANSFER PROTOCOL(HTTP)
 It is a protocol used to access the data on the World
Wide Web (www).
 The HTTP protocol can be used to transfer the data in
the form of plain text, hypertext, audio, video, and so
on.

Features of HTTP:
 Connectionless protocol:
 Media independent:
 Stateless:
 HTTP messages are how data is exchanged between a
server and a client.
 There are two types of messages:
requests - sent by the client to trigger an action on the
server
responses - the answer from the server.
SIMPLE NETWORK MANAGEMENT
PROTOCOL(SNMP)
 It is a protocol which enables network
administrators to manage network devices and to
diagnose network problems.
SIMPLE MAIL TRANSFER PROTOCOL(SMTP):
SMTP is a set of communication guidelines that
allow software to transmit an electronic mail over the
internet
SMTP:

The user agent (UA) prepares the message,

creates the envelope and then puts the message in the
envelope. The mail transfer agent (MTA) transfers this
mail across the internet.
Post Office Protocol 3, or POP3,
is the most commonly used protocol for receiving
email over the internet.
 Transmission Control Protocol (TCP)
is a standard that defines how to establish and
maintain a network conversation by which applications
can exchange data.
is a connection-oriented protocol, which means a
connection is established and maintained until the
applications at each end have finished exchanging
messages.
Functions of TCP
 determines how to break application data into packets
that networks can deliver;
 sends packets to, and accepts packets from, the
network layer;
 manages flow control;
 handles retransmission of dropped or garbled packets,
as it's meant to provide error-free data transmission;
and
 acknowledges all packets that arrive.
User Datagram Protocol (UDP)
The UDP protocol allows the computer
applications to send the messages in the form of
datagrams from one machine to another machine
Features:
 Connectionless Protocol
 No error Detection
 Unreliable Protocol
INTERNET PROTOCOL(IP)
The Internet Protocol (IP) is a set of requirements
for addressing and routing data on the Internet. IP can
be used with several transport protocols, including
TCP and UDP.
Hyper Text Markup Language(HTML)
• HTML is the standard markup language for creating
Web pages
• HTML elements tell the browser how to display the
content
What Are HTML Elements?
An HTML element is defined by a start tag,
some content, and an end tag.
<tagname> Content goes here...</tagname>

Examples of some HTML elements:

• <h1>My First Heading</h1>

• <p>My first paragraph.</p>
FORMATTING TEXT
• HEADER TAG
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading
PARAGRAPH TAG
• <p> element defines a paragraph.
• A paragraph always starts on a new line, and browsers
automatically add some white space before and after a
paragraph.
 HTML Text Formatting Elements

TAG DESCRIPTION

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<sub> Defines subscripted text

<sup> Defines superscripted text

<br> Single line break

<pre> Preserve whitespaces and lines in the text

<center> Make the text appear a the center

<strike> Striked text

<div> Make divisions of sections in the HTML document

HTML – Fonts
<font> tag to add style, size, and color to the text on
your website.
Background color
<body> bgcolor Attribute is used to
define a Background color of a Document.
Displaying EMOJIIIII’s
Displaying images
The <img> tag is used to embed an image in
an HTML page.

<img src=“file location “ alt=“alternate

name" width=“ " height="">

</img>
HTML Links - Hyperlinks
You can click on a link and jump to another
document.

<a href="url"> link text </a>

Lists
HTML lists used to group a set of related
items in lists.
 • Unordered HTML List
▫ Used for simply listing the items.
▫ Starts with <ul> tag. Each list item starts with <li>
tag.

TAG MEANING

<ul>…..</ul> Beginning and end of unordered list

<li>…..</li> Displays bulleted list of items

<ul type=“circle”> Displays circular bullets

<ul type=“disc”> Displays solid round bullets

<ul type=“square”> Displays squared bullets

HTML Ordered Lists
▫ List of items follows some specific sequence.
▫ An ordered list can be numberical/ alphabet.
▫ Starts with <ol> tag.
▫ List of items mentioned in <li> tag.
TAG MEANING

<ol>…..</ol> Beginning and end of ordered list

<li>…..</li> Displays bulleted list of items

<ol type=“1”> Displays Numbered list

<ol type=“a”> Displays alphabetic list

<ol type=“i”> Displays Roman numbered list

HTML Tables
• HTML tables used to arrange data into rows
and columns.
TAG MEANING

<table>…….</table> Defines a table

<caption>….</caption> Defines a table caption

<th>…….</th> Table column heading

<tr>……..</tr> Defines a row in a table

<td>……</td> Defines a cell in a table

 STUDENT TABLE

RNO STUDENT NAME DEPT

101 AAAA CSE

102 BBBB IT

103 CCCC EEE

104 DDDD ECE

 Table Attributes
1. Rowspan Attribute - Merge rows
FIRST SECOND Second

First

THIRD
Third

2. Colspan Attribute - Merge Columns

FIRST THIRD FIRST THIRD

SECOND
SECOND
HTML Table - Cell Padding
• Cell padding is the space between
the cell edges and the cell content.
• By default the padding is set to 0.
HTML Table - Cell Spacing
• Cell spacing is the space between each cell.
• By default the space is set to 2 pixels.
HTML FRAMES
• HTML Frames are used to divide the web
browser window into multiple sections.
• A frameset tag is the collection of frames in the
browser window.
Target in another frame

Sample.html
<html>
<frameset rows="50%,50%">
<frame src="a.html" name="lf">
<frame src="" name="rf">
</frameset>
</html>
a.Html
<html>
<body>
<a href="b.html" target="rf">click meeeeeeeee</a>
</body>
</html>
b.html
<html>
<body>
<a href="b.html" target="rf">click meeeeeeeee</a>
</body>
</html>
HTML FORMS
An HTML form is used to collect user input.
The user input is most often sent to a server for
processing.
ELEMENTS
ELEMETS MEANING
<form>….. </form> to create an HTML form
<input type="text"> Displays a single-line text input field

<input type="button"> Displays a clickable button

<input type="submit"> Displays a submit button (for submitting the
form)
<input type="checkbox"> Displays a checkbox (for selecting zero or more
of many choices)

<input type="radio"> Displays a radio button (for selecting one of

many choices)

<textarea cols=“” rows=“”> Displays a multi-line text input field

LABEL
TEXT BOX
SUBMIT-BUTTON
BUTTON
CHECKBOX
RADIO BUTTON
DROP-DOWN LIST
Image Maps
▫ An image map is an image with clickable areas.
▫ The HTML <map> tag defines an image map.
▫ The areas are defined with one or
more <area> tags.
SEMANTIC ELEMENTS
 A semantic element clearly describes its meaning to both the browser and
the developer.
 Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.
 Examples of semantic elements: <form>, <table>, and <article> - Clearly
defines its content.
Semantic Elements in HTML
In HTML there are some semantic elements that can be used to define different
parts of a web page:
 <article>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <nav>
 <section>
 <summary>
 <time>
 HTML <section> Element
The <section> element defines a section in a document.

Examples of where a <section> element can be used:

 Chapters
 Introduction
 News items
 Contact information
 HTML <article> Element
The <article> element specifies content.

Examples of where the <article> element can be used:

 Forum posts
 Blog posts
 User comments
 Product cards
 Newspaper articles
 HTML <header> Element
The <header> element represents a container for introductory content
or a set of navigational links.

A <header> element typically contains:

 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information
 HTML <footer> Element
The <footer> element defines a footer for a document or section.

A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents
 HTML <nav> Element
The <nav> element defines a set of navigation links.
 HTML <figure> and <figcaption> Elements
 The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.

 The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or as the last
child of a <figure> element.

 The <img> element defines the actual image/illustration

 VIDEO AND AUDIO ELEMENT
 HTML5 features include native audio and video support
without the need for Flash.
 The HTML5 <audio> and <video> tags make it simple to
add media to a website.
 You need to set src attribute to identify the media source
and include a controls attribute so the user can play and
pause the media.
 CSS
 CSS stands for Cascading Style Sheets.

 cascading Style Sheets (CSS) is used to format the layout of a webpage.

 CSS saves a lot of work. It can control the layout of multiple web pages all at once.

TYPES

CSS can be added to HTML documents in 3 ways:

•Inline - by using the style attribute inside HTML elements

•Internal - by using a <style> element in the <head> section

•External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

 Internal /Embedded CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page,

within a <style> element.

 External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each

HTML page
Sample.html style.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
 CSS Selectors
• Simple Selector
• Universal Selector
• Grouping Selector
• Class selector
• Id selector
Simple selector
Universal selector
Grouping Selector
Class selector
Id selector
 RULE CASCADING
When two rules from the same cascade layer , the one that
is defined last in the stylesheet is the one that will be used.
 INHERITANCE
some CSS property values set on parent elements are inherited by
their child elements, and some aren't.
 background-color: any color
 background-image: url("paper.gif")
 background-position: center
 background-attachment: fixed
 background-repeat: repeat-y
 background-size: 300px 100px
BACKGROUND-COLOR
BACKGROUND-IMAGE
BACKGROUND-REPEAT
BACKGROUND-ATTACHMENT
 Border-style:dotted/dashed/solid/double/hidden/none
 Border-top-style:
 Border-color:
 Border-width: px/thick/medium
 Border-image:url(‘’)
BORDER-STYLE & BORDER-COLOR
BORDER-WIDTH
BORDER-IMAGE
BORDER-IMAGE
BORDER-IMAGE
COLOR
Text-align:center/left/right/justify
Direction:rtl/ltr
Text-decoration-line: underline/overline;
Text-decoration-color: red;
Text-decoration-style : double/solid/dashed/dotted
Text-decoration-thickness:5px
Text-transform: lowercase/uppercase/capitalize
Text-indent:50px
Letter-spacing:
Word-spacing:
Line-height:
Text-shadow:
Text-orientation:
 CSS Shadow Effects
With CSS you can add shadow to text and to elements.
 text-shadow
 box-shadow
CSS Text Shadow
 The CSS text-shadow property applies shadow to text.
 In its simplest use, you only specify the horizontal shadow
(2px) and the vertical shadow (2px)
CSS box-shadow Property
 The CSS box-shadow property is used to apply one or more shadows to an
element.
Specify a Horizontal and a Vertical Shadow
 In its simplest use, you only specify a horizontal and a vertical shadow.
 The default color of the shadow is the current text-color.
CSS TRANSITIONS
CSS Transitions
 CSS transitions allows you to change
property values smoothly, over a given
duration.
 To create a transition effect, you must specify two
things:
◦ the CSS property you want to add an effect to
◦ the duration of the effect

◦ transition
◦ transition-delay
◦ transition-duration
◦ transition-timing-function
 transition-timing-function

 ease - specifies a transition effect with a slow

start, then fast, then end slowly (this is default)
 linear - specifies a transition effect with the same
speed from start to end
 ease-in - specifies a transition effect with a slow
start
 ease-out - specifies a transition effect with a
slow end
 ease-in-out - specifies a transition effect with a
slow start and end
 transition-delay
The transition-delay property specifies a
delay (in seconds) for the transition effect.
 CSS transform Property
Value Description
translate(x,y) Defines a 2D translation
translateX(x) Defines a translation, using only the value
for the X-axis
scale(x,y) Defines a 2D scale transformation
scaleX(x) Defines a scale transformation by giving
a value for the X-axis
rotate(angle) Defines a 2D rotation, the angle is
specified in the parameter
rotateX(angle) Defines a 3D rotation along the X-axis
skew(x-angle,y-angle) Defines a 2D skew transformation along
the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along
the X-axis
CSS Animations
CSS Animations
 It allows animation of HTML elements without using
JavaScript or Flash!
 An animation lets an element gradually change from
one style to another.
 You can change as many CSS properties you want, as
many times as you want.
 To use CSS animation, you must first specify some
keyframes for the animation.
 Keyframes hold what styles the element will have at
certain times.
 PROPERTIES
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
The @keyframes Rule
 When you specify CSS styles inside
the @keyframes rule, the animation will gradually
change from the current style to the new style at
certain times.
 The @keyframes CSS at-rule controls the
intermediate steps in a CSS animation sequence by
defining styles for keyframes (or waypoints)
 keyframe rule specify the start or end states of the
animation (that is, 0%/from and 100%/to),