Components of the World Wide Web

Introduction to the World Wide Web

Unlike the Internet, which is a global network of interconnected computer and network devices (hardware), the World Wide Web (WWW) is a system of interconnected documents and resources (software) that are accessed over the internet using web browsers. It encompasses various components that work together to facilitate the exchange of information and enable users to navigate and interact with web content.

The key components of the World Wide Web include:

1. Web Pages
2. Web Browsers
3. Uniform Resource Locator (URL)
4. Web Servers
5. Hypertext Transfer Protocol (HTTP)
6. Hyperlinks
7. Domain Names
8. Internet Protocol (IP) Address
9. HTML/CSS/JavaScript
10. Web Standards and Protocols
11. Search Engines
12. Cookies

Webpages

Web pages are the basic building blocks of the web. They are documents written in languages like HTML (Hypertext Markup Language) that can contain text, images, videos, hyperlinks, and other multimedia elements.

Common components of a webpage include:

Header

The header typically includes the website’s logo, navigation menu, and sometimes a search bar. It provides essential information and navigation options for users.

Content

The main content area contains the text, images, videos, and other multimedia elements that convey the primary message of the web page.

Sidebar

Some web pages have a sidebar that displays additional information, related links, or secondary navigation options.

Footer

The footer appears at the bottom of the page and often contains copyright information, contact details, and links to privacy policies and terms of use.

Navigation Menus

Navigation menus help users move around the website and access different sections or pages.

Images and Media

Images, videos, and other multimedia elements enhance the visual appeal and engagement of the web page.

Forms

Web pages may include forms to collect user input, such as login forms, contact forms, or search boxes.

Call to Action (CTA)

CTAs are buttons or links that prompt users to take specific actions, such as signing up for a newsletter or making a purchase.

Social Media Links

Web pages often include social media icons or links that connect users to the website’s social media profiles.

Meta Tags

Meta tags provide metadata about the web page, such as its title, description, and keywords, used by search engines and social media platforms.

Web Browsers

Web browsers are software applications that allow users to access and view web pages on the internet. Examples include Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari.

Here are the key components of web browsers:

User Interface

The user interface is what users interact with. It includes the address bar, back and forward buttons, bookmarks, tabs, and other tools for navigation and managing the browsing experience.

Rendering Engine

The rendering engine is responsible for parsing and displaying web content. It interprets HTML, CSS, and other web technologies to render the visual elements of web pages.

JavaScript Engine

The JavaScript engine executes and interprets JavaScript code on web pages, enabling interactivity and dynamic content.

Networking Stack

The networking stack manages the communication between the browser and web servers. It handles HTTP requests and responses to load web pages and fetch resources.

Browser Engine

The browser engine coordinates the interactions between the rendering engine, JavaScript engine, and user interface components.

Cache

Browsers use a cache to store previously accessed resources, like images and scripts, to speed up page loading and reduce server requests.

Cookies Manager

The cookies manager handles the storage and management of HTTP cookies, including reading and setting cookies from web pages.

History Manager

The history manager keeps track of the user’s browsing history, allowing them to go back and revisit previously visited pages.

Bookmark Manager

The bookmark manager enables users to save and organize their favorite web pages for easy access.

Download Manager

The download manager handles the downloading of files from the internet and manages the download queue.

Security Components

Browsers include security features like SSL certificate management, phishing protection, and safe browsing to protect users from malicious websites and potential threats.

Plugins/Add-ons

Browsers can support plugins or add-ons that extend their capabilities, allowing users to add features, block ads, or enhance privacy.

Preferences/Settings

The preferences or settings panel allows users to customize various aspects of the browser, such as privacy settings, appearance, and search engine preferences.

Unique Resource Locators

An URL (Uniform Resource Locator) is a web address that specifies the location of a resource on the internet. It consists of several components that provide essential information for locating and accessing the resource. Here are the key components of an URL:

1. Scheme/Protocol: The scheme or protocol indicates the method used to access the resource. Common schemes include “http://” and “https://” for web pages, “ftp://” for file transfer, and “mailto://” for email addresses.
2. Domain/Host: The domain or host identifies the location of the resource on the internet. It can be a website’s domain name or IP address. For example, in “https://www.example.com,” “www.example.com” is the domain.
3. Port: The port number specifies the communication endpoint for the resource. It is optional and is usually omitted for standard web browsing (port 80 for HTTP and port 443 for HTTPS).
4. Path: The path represents the specific location or file on the server that the client wants to access. It indicates the structure and organization of the resource on the server.
5. Query: The query component allows parameters to be sent to the server. It typically follows a question mark ‘?’ and includes key-value pairs to specify additional information for the resource.
6. Fragment: The fragment, also known as the anchor or hash, identifies a specific section or element within the resource, typically used for linking to a specific part of a long web page.

Example

URL: https://www.example.com:8080/path/to/resource?param1=value1&param2=value2#section1

Components:

• Scheme: “https://”
• Domain/Host: “www.example.com“
• Port: “8080”
• Path: “/path/to/resource”
• Query: “?param1=value1&param2=value2”
• Fragment: “#section1”

Web Servers

Web servers are computers or software that store and serve web pages and other resources to clients (web browsers) upon request. They handle HTTP requests and responses.

How Web Pages are Served Video

 

HyperText Transfer Protocol

HTTP is the foundation of data communication on the web. It is a protocol that defines how messages (requests and responses) are formatted and transmitted between clients and servers.

HTTP (Hypertext Transfer Protocol) is an application layer protocol used for transmitting and receiving data over the internet. It serves as the foundation of data communication for the World Wide Web, enabling web browsers to request web pages and resources from web servers. Here are the key characteristics and features of the HTTP protocol:

1. Client-Server Model: HTTP follows a client-server model, where the client (typically a web browser) sends requests to the server, and the server responds with the requested data or resources.
2. Stateless Protocol: HTTP is stateless, meaning that each request from the client to the server is treated independently, without any knowledge of previous requests. This is why web applications often use cookies or other mechanisms to maintain user session information.
3. Request-Response Model: HTTP operates on a request-response model. The client sends an HTTP request to the server, specifying the method (e.g., GET, POST, PUT, DELETE), the resource (e.g., URL or path), and other optional headers and data. The server then processes the request and returns an HTTP response, which includes a status code, headers, and the requested data.
4. Uniform Resource Locators (URLs): URLs are used to identify and locate resources on the internet. They consist of the protocol (e.g., “http://” or “https://”), domain name, port number (optional), path, query parameters, and fragment.
5. Methods: HTTP defines several request methods, each serving a different purpose. Common methods include:
   • GET: Retrieve data from the server (e.g., requesting a web page).
   • POST: Send data to the server to be processed (e.g., submitting a form).
   • PUT: Update a resource on the server.
   • DELETE: Remove a resource from the server.
6. Status Codes: HTTP responses include status codes that indicate the outcome of the request. Common status codes include 200 (OK – successful request), 404 (Not Found – resource not found), and 500 (Internal Server Error – server error).
7. Header Fields: HTTP requests and responses can include header fields that provide additional information about the request or response, such as content type, cache control, and user-agent (identifying the client’s software).
8. Security: HTTP is not secure on its own. To secure data transmission, HTTPS (HTTP Secure) is used, which adds an extra layer of encryption (SSL/TLS) to protect sensitive data during communication.

Hyperlinks

Hyperlinks are clickable links that connect web pages and resources together. They enable users to navigate from one page to another and are a fundamental aspect of web navigation.

There are several types of hyperlinks commonly used in web development:

Text Links

These are hyperlinks embedded within text content. Users can click on specific words or phrases, and they will be redirected to the linked destination.

Image Links

Image links are hyperlinked images. When users click on the image, they are taken to the linked web page or resource.

Navigation Links

These are typically found in website navigation menus and provide users with access to various sections or pages within a website.

Inline Links

Inline links are often used within paragraphs or text blocks to provide additional context or related information. Clicking on the inline link takes the user to the referenced source.

Anchor Links

Anchor links are used to navigate within the same webpage, allowing users to jump to specific sections on the page. They are often used in long articles or pages with a table of contents.

Email Links

Email links, also known as “mailto” links, allow users to open their email client with a pre-filled email address when clicked. For example, clicking on “Contact Us” may open the user’s email application with the recipient’s email address pre-filled.

External Links

These links point to resources or web pages outside the current website’s domain. Clicking on an external link takes users to a different website.

Internal Links

Internal links, on the other hand, direct users to other pages within the same website or domain.

Relative Links

Relative links specify a destination relative to the current page’s location. They are useful for internal linking within a website.

Absolute Links

Absolute links provide the full URL of the destination, including the protocol (e.g., “http://” or “https://”). They are used for external linking or when the destination is on a different domain.

Domain Names

Domain names are human-readable addresses used to identify and access websites on the internet. They serve as a more user-friendly alternative to numerical IP addresses, making it easier for people to remember and navigate to websites. A domain name typically consists of two main parts:

Second-Level Domain (SLD)

This is the primary part of the domain name and represents the name of the website or the organization. For example, in the domain name “example.com,” “example” is the second-level domain.

Top-Level Domain (TLD)

This is the last part of the domain name and indicates the type or category of the website. Common TLDs include “.com,” “.org,” “.net,” “.edu,” “.gov,” and country-specific TLDs like “.uk” for the United Kingdom or “.de” for Germany.

Domain names are registered through domain registrars, and the registration process typically involves paying a fee and providing contact information. Once registered, the domain name becomes unique and cannot be used by anyone else during the registration period.

Internet Protocol Addresses

An IP address is a numerical label assigned to each device connected to a computer network, enabling it to be identified and communicate with other devices on the internet.

There are two types of IP address in use IPv4 and IPv6.

IPv4 (Internet Protocol version 4)

This is the older and more widely used version of IP addresses. It consists of 32 bits and is expressed in the format of four sets of numbers separated by periods, such as “192.168.1.1.” IPv4 addresses have a limited number of unique combinations, which led to the need for the adoption of IPv6.

IPv6 (Internet Protocol version 6)

This is the newer and more advanced version of IP addresses. It uses 128 bits, allowing for a significantly larger number of unique addresses compared to IPv4. IPv6 addresses are expressed in a hexadecimal format, such as “2001:0db8:85a3:0000:0000:8a2e:0370:7334.”

HTML, CSS & JS

HTML, CSS, and JavaScript are three essential technologies used in web development. They serve distinct roles and work together to create dynamic and visually appealing websites. HTML provides the structure, CSS handles the presentation and layout, and JavaScript adds interactivity and dynamic elements to web pages.

HTML (Hypertext Markup Language) – Page Structure

HTML is the foundation of web pages and defines the structure and content of a webpage. It consists of various elements, each represented by tags, that provide meaning and organization to the content. These elements include headings, paragraphs, images, links, lists, forms, and more. HIt provides the skeleton of a webpage and serves as the backbone for other technologies like CSS and JavaScript.

CSS (Cascading Style Sheets) – Page Presentation

CSS is a style sheet language that complements HTML by controlling the presentation and layout of web pages. With CSS, developers can define how HTML elements should appear on the screen, including attributes like colors, fonts, margins, padding, and positioning. By using CSS, developers can apply styles to multiple web pages, making it easier to maintain and update the overall appearance of a website.

JavaScript – Page interactivity & dynamic behaviour

JavaScript is a high-level programming language that adds interactivity and dynamic behavior to web pages. It allows developers to create interactive features like sliders, pop-up dialogs, form validation, and animations. JavaScript runs in the web browser, enabling it to respond to user actions and manipulate the webpage’s content on the client-side.

Standards & Protocols

These are rules and guidelines set by organizations like the World Wide Web Consortium (W3C) to ensure consistency and compatibility across different web technologies and browsers.

Common web protocols examples

• Hypertext Transfer Protocol – how web page data should be transferred across the internet
• File Transfer Protocol – how files should be transfer
• Post Office Protocol – a protocol for receiving emails

Search Engines

Search engines like Google, Bing, and Yahoo index web pages and provide users with a way to search for specific information on the web.

Search engines have the following key features:

• Indexing: Collects and organizes web page data.
• Keyword-Based Search: Uses keywords to find relevant content.
• Ranking Algorithm: Ranks results based on relevance.
• SERPs: Displays search results on the results page.
• Page Previews: Offers summaries of web page content.
• Advanced Search Filters: Allows query refinement.
• Autocomplete and Suggestions: Assists users while typing.
• Personalization: Tailors results to individual users.
• Image and Video Search: Provides media-specific results.
• Voice Search: Supports voice-activated queries.
• Mobile Compatibility: Optimized for mobile devices.
• Security and Privacy: Ensures user data protection.

Cookies

Web page cookies, also known as HTTP cookies or browser cookies, are small pieces of data stored on a user’s web browser by websites. They serve various purposes, including remembering user preferences, enhancing user experience, and tracking user behavior for analytics and marketing purposes. There are different types of cookies based on their characteristics and functions:

Session Cookies

Session cookies are temporary cookies that are stored in the browser’s memory only during a user’s browsing session. They are used to maintain session-specific information, such as login credentials or items in a shopping cart, and are deleted once the browser is closed.

Persistent Cookies

Persistent cookies are stored on the user’s device for a specified duration, even after the browser is closed. They are used to remember user preferences and settings, such as language preferences or theme choices, across multiple browsing sessions.

First-Party Cookies

First-party cookies are set by the website the user is currently visiting. They are used to collect and remember user-specific data for that particular website.

Third-Party Cookies

Third-party cookies are set by external domains or websites that are different from the website the user is currently visiting. These cookies are often used for tracking user behavior across multiple websites for advertising and analytics purposes. These are the most problematic cookies in terms of privacy and tracking.

Same-Site Cookies

Same-Site cookies are used to prevent certain types of CSRF (Cross-Site Request Forgery) attacks by restricting cookie access to the same site from which they originated.