web programming & scripting

Overview of Internet Technology
• Internet
• Website
• WWW
• Server
• Client
• IP Address
• TCP/IP Protocol
Swapnali Pawar

Internet
The Internet is the global system of interconnected computer
networks that uses the Internet protocol suite (TCP/IP) to
communicate between networks and devices
Swapnali Pawar

How Internet Works
Swapnali Pawar

https://www.submarinecablemap.com/
Swapnali Pawar

WWW
The World Wide Web (WWW), commonly known as the Web, is
an information system where documents and other web resources are
identified by Uniform Resource Locators (URLs, such
as https://example.com/), which may be interlinked by hyperlinks,
and are accessible over the Internet
Swapnali Pawar

Client Server Architecture of Internet
Swapnali Pawar

By October of 1990, Tim had written the three fundamental technologies that remain the
foundation of today’s web (and which you may have seen appear on parts of your web
browser):
HTML: HyperText Markup Language. The markup (formatting) language for the web.
URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify
to each resource on the web. It is also commonly called a URL.
HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from
across the web.
History
Swapnali Pawar

Server, Client, IP Address,TCP/IP Protocol
TCP/IP protocols -
TCP/IP is a family of communication protocols used to connect computer systems in a
network. It is named after two of the protocols in the family: Transmission Control Protocol
(TCP) and Internet Protocol (IP). Hypertext Transfer Protocol (HTTP) is a member of the
TCP/IP family.
IP address-
Each server or client on a TCP/IP internet is identified by a numeric IP (Internet Protocol)
address. The two types of IP address are the IPv4 (IP version 4) address and the IPv6 (IP
version 6) address.
Swapnali Pawar

Website
A set of related web pages located under a single domain name,
typically produced by a single person or organization.
Web Application:
The applications which will provide services over the web are called web
applications.
Eg: twitter , gmail.com, facebook.com,
Swapnali Pawar

Web Application
Every web application contains 2 main components
1) Front-End
2) Back-End
1. Front end:
It represents what end user is seeing on the website.
We can develop front end components by using :
HTML,CSS,JS,BootStrap,jQuery etc
2. Back end:
It is technology which is used to decide what to show to end user on the
front end.
back end is responsible to generate required response
That response should be displayed to the end user by using front end.
Java,Python,SQL,Oracle,Flask,Django etc.
Swapnali Pawar

Detail Study of HTML
1. What is HTML
2. History
3. Creating installing viewing and checking web
pages
4. TAGS
5. Core HTML elements
6. Presentation & Layout
Swapnali Pawar

HTML
HTML is the standard markup language for creating Web pages.
What is HTML?
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 elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc
Swapnali Pawar

Structure of HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Swapnali Pawar

HTML Tags
1.HTML Comment
<!—This is HTML comment-->
2.Title
<head>
<Title> Mysite Title</Title>
</head>
3.Paragraph
<p>
My paragraph is here…….
</p> Swapnali Pawar

5.Bold & Italic
<b>Bold</b> For bold
<i> Italic</i> For Italic
6.Advanced Tags
<Strong> For bold </Strong>
<em> For Italic </em>
4.Paragraph
<p>My paragraph is here…….</p>
<p> First Line </p>
<p> Second line </p>
<p> Third Line </p>
Swapnali Pawar

7. HTML Lists-
1.Ordered List
2.Unordered List
1.Ordered List-All Items will be displayed with Numbers
<ol>
<li>Pizza</li>
<li>Burger</li>
<li>Tea</li>
</ol>
2.Unordered List- All Items will be displayed with bullet symbols
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Rubber</li>
</ul> Swapnali Pawar

8.Div & Span – We can use div & span tags to group related tags
into single unit. This tags generally used with css.
<div class=“group1”>
<h1> Hello friends……..</h1>
<p> Good Afternoon…… </p>
</div>
9. Span – This tag is exactly same as div tag except that it is inline
<p> This is <span> Inline Tag </span> used in other tags</p>
10. Img – This tag is used to display image.
<img src=“photo,jpg” alt=“Image will be uploaded soon….”>
Swapnali Pawar

11. Hyperlink – Used to navigate to another page or link.
<a href=“https://facebook.com”>Facebook</a>
12.Background Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Good Morning...</p>
13.Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Welcome to...</p>
<p style="color:MediumSeaGreen;">Web Programming...</p>
Swapnali Pawar

14.Table-
HTML tables allow web developers to arrange data into rows and
columns
<table>
<thead>
<th>Roll No</th>
<th>Student Name</th>
<th>Marks</th>
</thead>
<tr>
<td>101</td>
<td>Swapnali</td>
<td>76%</td>
</tr>
</table>
Swapnali Pawar

Html Example
<html>
<head>
<Title>Web Programming</Title>
</head>
<body>
<center>
<h1 style="background-color:DodgerBlue;">Web Programming & Scripting A1</h1>
<h2 style="color:Tomato;">Html Basics practical Sessions...</h2>
<hr>
<br>
<img src=https://images.unsplash.com/photo-1507238691740-
187a5b1d37b8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzJ8fHdlYiUyMHByb2dyYW1taWd8ZW58MHx8
MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60 alt="uploded soon..." height="300"
width="400">
<hr>
<table border=2>
<thead>
<th>Technology</th>
<th>Resourses</th>
</thead>
<tr>
<td>HTML</td>
<td><a href="https://www.w3schools.com/html/">html</a></td>
</tr>
<tr>
<td>CSS</td>
<td><a href="https://www.w3schools.com/css/default.asp"> css</a></td>
</tr>
<tr>
<td>BOOTSTRAP</td>
<td><a href="https://getbootstrap.com/">bootsrap</a></td>
</tr>
</table>
<hr>
</center>
</body>
</html>
Swapnali Pawar

HTML Sample Page
Swapnali Pawar

Student Activity
Experiment 1 – To create webpage using basic Html tags.
Create personal webpage with your academic information and
your photo like resume
Useful Resources-
1. https://atom.io/
2. https://www.w3schools.com/html/
3. https://unsplash.com/
4. https://in.000webhost.com/
Swapnali Pawar

web programming & scripting

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie web programming & scripting

Ähnlich wie web programming & scripting (20)

Mehr von Swapnali Pawar

Mehr von Swapnali Pawar (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

web programming & scripting