Lesson 6.3: The Internet and the World Wide Web

Introduction

Welcome to Lesson 6.3! In this lesson, we will explore the differences and connections between the Internet and the World Wide Web. 🌐 More than just tech jargon, understanding these concepts will help you navigate the digital world effectively.

Learning Objectives:

By the end of this lesson, students will be able to:

Distinguish between the Internet as infrastructure and the Web as a service.
Describe how a web page is requested and delivered using URLs and the client-server model.
Explain fundamental web technologies: HTML, CSS, and JavaScript.
Understand the basics of cloud computing and the transition from local to hosted services.
Differentiate the Internet from the World Wide Web.

The Internet vs. The World Wide Web

What is the Internet? 🤔

The Internet is a vast network of interconnected computers that communicate with each other using standard protocols. Think of it as a global highway system for data. 📶 It allows computers from different locations to share information.

What is the World Wide Web? 🌍

The World Wide Web (often just called “the Web”) is a service that operates on the Internet. It includes all the websites you visit, the videos you watch, and the online stores where you shop. The Web uses the Internet to transfer and display content to users.

In short, while the Internet is the infrastructure, the Web is one of its many services!

How a Web Page is Requested and Delivered

Client-Server Model 🔄

When you want to view a webpage, your computer (the client) sends a request to a web server. The server processes this request and sends back the requested webpage.

Here's how it works step by step:

Entering a URL: When you type a URL (e.g., https://www.example.com) in your browser, you are initiating a request. The URL is made up of several parts:

Protocol: (e.g., http or https)
Domain name: (e.g., www.example.com)
Path: (e.g., /page1)

DNS Resolution: The browser connects to a Domain Name System (DNS) server which converts the domain name into an IP address.
Request to Server: The browser then sends an HTTP request to the web server at that IP address.
Server Response: The web server processes the request and sends back the content of the page, usually in HTML format.
Rendering the Page: The browser receives the HTML content, processes it, and displays the webpage.

Example:

Let's say you want to visit a site like www.pizzahut.com. Here’s what happens behind the scenes:

You enter www.pizzahut.com in your browser.
The DNS resolves it to an IP address, say 192.0.2.1.
Your browser sends a request to 192.0.2.1.
The server at that address sends back the HTML.
Your browser renders the page, and you see the Pizza Hut menu on your screen! 🍕

Web Technologies: HTML, CSS, and JavaScript

HTML: The Structure of Web Pages

HTML (HyperText Markup Language) is the foundational language for creating web pages. It provides the structure. For example, you might use the following HTML snippet to create a simple page:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Welcome to My Page!</h1>
    <p>This is my first web page.</p>
</body>
</html>

CSS: Styling the Web

CSS (Cascading Style Sheets) is used alongside HTML to style web pages. While HTML creates the page structure, CSS adds colors, layouts, and fonts. Here’s how you could style the above page:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    font-size: 2em;
}
p {
    font-family: Arial;
}

JavaScript: Making it Interactive

JavaScript is a programming language that adds interactivity to web pages. For instance, you can create a button that shows an alert when clicked:

document.getElementById('myButton').onclick = function() {
    alert('Hello, students!');
};

Together, HTML, CSS, and JavaScript form the backbone of the Web, allowing for everything from basic text presentation to complex web applications!

Cloud Computing

What is Cloud Computing? ☁️

Cloud computing is the delivery of computing services over the Internet (“the cloud”). This includes everything from servers and storage to databases and software.

Why the Shift to Cloud?

Cost-Effective: It reduces the expenses of maintaining local hardware.
Scalability: Cloud services can easily scale according to demand.
Accessibility: Services are accessible from anywhere with an Internet connection, promoting remote work and learning.

Example of Cloud Services

Storage: Services like Google Drive and Dropbox allow you to store files online.
Software as a Service (SaaS): Platforms like Google Workspace and Microsoft 365 provide applications over the Internet.

Conclusion

In this lesson, students learned about:

The distinction between the Internet and the Web, where the Internet is the infrastructure, and the Web is a service running on it.
The process of how web pages are requested and delivered using the client-server model.
The essential web technologies like HTML, CSS, and JavaScript that enable the creation and functioning of websites.
The rise of cloud computing, moving from local storage and applications to hosted services in the cloud.

Study Notes

The Internet is a global network; the Web is a service operating on it.
A URL consists of a protocol, domain name, and path.
The client-server model involves a web browser sending requests to a server.
HTML structures web pages; CSS styles them; JavaScript adds interactivity.
Cloud computing provides services over the Internet, leading to cost savings and scalability.