Scribd
Upload
197 views15 pages

It3401 Webessentials

The document outlines a presentation on web essentials, covering topics such as the history of the internet, web basics, web browsers, and client-server communication. It includes a simple interactive login form example and a YouTube video on how websites work. The presentation aims to provide a foundational understanding of how the internet and web technologies function.

Uploaded by

Vijaya Narayanasamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
197 views15 pages

It3401 Webessentials

The document outlines a presentation on web essentials, covering topics such as the history of the internet, web basics, web browsers, and client-server communication. It includes a simple interactive login form example and a YouTube video on how websites work. The presentation aims to provide a foundational understanding of how the internet and web technologies function.

Uploaded by

Vijaya Narayanasamy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 15

IT3401- WEB ESSENTIALS

02/05/25 1
Outline of the Presentation
 Internet Overview
 Brief history of the internet
 Web basics
 World Wide Web
 Web Browsers
 Web Servers
 Clients Servers Communication
 Request and response between client and server
 Example: How Websites and Webpages work
 Program: Simple Interactive Login Form
 YouTube Video- How Websites Work
Internet Overview

Internet
Collection of Computers & other Peripherals
Brief history of the internet
USA DOD-1969 (ARPANET)
ARPANET
USENET-1979
CSNET-1980
BITNET-1981
NSFNET-1985
WWW-1989
NREN-1992
INTRANET -1994
Web basics
World Wide Web
Vast collection of interconnected documents and other resources, accessible through the
internet.

Information Space-URIs

Key characteristics of the World Wide Web

Hypertext: Web pages use hypertext, which allows you to click on links to jump from
one page to another related page.

Uniform Resource Locator (URL): Each web page has a unique address called a URL
(Uniform Resource Locator).
This allows you to easily find and access specific pages using your web browser.

Example
Web basics(Cont..)
Hypertext Transfer Protocol (HTTP): HTTP is the
communication protocol that defines how web browsers and servers
interact to exchange information.

Web browser: A web browser is a software application that allows


you to access and navigate the web.

Example
Chrome, Firefox, Safari, and Edge.
Web basics(Cont..)
Web Servers
A Web Server is a program that processes network requests from users and serves them
with files that create web pages.

Web servers are computers used to store HTTP files which make up a website..

Website
A Website is a collection of web pages and related content that is identified by a
common domain name and published on at least one web server.

Websites are typically dedicated to a particular topic or purpose, such as news,


education, commerce, entertainment, or social networking
Clients Servers Communication
Real Time Examples
•Email: email client (the client) sends the
email to an email server (the server).
•The email server delivers it to the
recipient's email server.
•The recipient's email client then retrieves
the email from the server

•Online banking: your web browser (the


client) sends a request to the bank's web
server (the server).
• The server sends you the information you
requested.- your account balance &
transaction history.

•Online gaming: your gaming client (the


client) sends your input to the game server
(the server).
• The server updates the game state based
Example:How Websites and Webpages Work
Program:Simple Interactive Login Form
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1>Login Form</h1>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="submit">Login</button>
</form>
Program: Simple Interactive Login Form(Cont...)

<div id="message" style="display: none;"></div>


<script>
document.getElementById('loginForm').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent form submission

// Get form data


var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
Program: Simple Interactive Login Form(Cont...)
// Check credentials
if (username === 'user' && password === 'password') {
document.getElementById('message').innerText = 'Login successful!';
document.getElementById('message').style.color = 'green';
} else {
document.getElementById('message').innerText = 'Invalid username or password.';
document.getElementById('message').style.color = 'red';
}
document.getElementById('message').style.display = 'block'; // Display message
});
</script>
</body>
</html>

Output
YOUTUBE VIDEO

How Websites Work


THANK YOU

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy