What is WWW (World Wide Web)?

The term World Wide Web (WWW) was coined by Tim Berners-Lee in 1989 when he invented the system that allowed for linking documents via the internet using hypertext. Here’s a breakdown of the name:

  1. World Wide: This emphasizes the global scope of the system, allowing users worldwide to connect and access information from any location.
  2. Web: The term “web” was chosen because the system’s structure was like a web of interconnected documents. Each document could link to others, creating a vast network of interlinked content, similar to a spider’s web. This metaphor highlighted how the information was interwoven and accessible from any point.

Together, the “World Wide Web” describes a global system of information linked together in a web-like structure.

Tim Berners-Lee is a British computer scientist best known for inventing the World Wide Web in 1989. He created the system while working at CERN (the European Organization for Nuclear Research) to facilitate information-sharing between researchers. His contributions include:

  1. HTML (Hypertext Markup Language): The language used to create web pages.
  2. HTTP (Hypertext Transfer Protocol): The protocol that enables web communication.
  3. URL (Uniform Resource Locator): The addressing system that allows locating web resources.

In 1991, Berners-Lee launched the first website and made the web accessible to the public. (Unfortunately, the original site has been lost, but a recreation is available at the same URL as a historical reference. ) It remains a landmark in the history of the internet as the first-ever website. He is also the founder of the World Wide Web Consortium (W3C), which oversees web standards to ensure the continued openness and development of the web. Berners-Lee’s vision was to create a free and open platform for global communication and knowledge sharing, which has had a profound impact on the internet and digital world today.

He is also known for advocating for privacy and the decentralization of the web, working on projects like the Solid platform to give individuals more control over their data online.

What is HTML?

HTML (Hypertext Markup Language) defines the structure of a web page. It uses tags to format text, create links, insert images, and more.

Key HTML Tags:

  • <html>…</html>: Defines the HTML document.
  • <head>…</head>: Contains metadata and links (e.g., CSS or JavaScript files).
  • <body>…</body>: Contains the content displayed on the page.
  • <h1> to <h6>: Headings (from largest to smallest).
  • <p>: Paragraph of text.
  • <a>: Anchor tag for hyperlinks.
  • <img>: Image tag.

 

Example:

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Welcome to My Webpage</h1>

<p>This is a paragraph of text.</p>

<a href=”https://www.example.com”>Visit Example.com</a>

<img src=”image.jpg” alt=”An image”>

</body>

</html>

 

Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements. CSS can be applied in multiple ways, including inline and linked (external) styles.

 

Inline CSS:

CSS is applied directly to individual elements using the style attribute.

Example:

<p style=”color: blue; font-size: 20px;”>This is a blue paragraph.</p>

 

Linked (External) CSS:

CSS is written in a separate file and linked to the HTML file.

Example of External CSS (styles.css):

p {

color: red;

font-size: 18px;

}

Example of HTML Linking the External CSS:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”styles.css”>

<title>Styled Webpage</title>

</head>

<body>

<h1>Welcome</h1>

<p>This paragraph is styled with external CSS.</p>

</body>

</html>

 

Key Components of CSS Structure

  1. Selectors: These define which HTML elements the styles will apply to. They can target elements by type, class, or ID.
  2. Properties: These are the characteristics you want to change, such as color, font-size, padding, etc.
  3. Values: These specify the exact value you want to assign to a property, such as red, 20px, 5px, etc.

 

Introduction to JavaScript

JavaScript is a programming language used to add interactivity to web pages. It can be included inline within HTML or in an external file.

 

Inline JavaScript:

JavaScript can be embedded directly into the HTML file using the <script> tag.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Interactive Webpage</title>

</head>

<body>

<h1>Click the button below</h1>

<button onclick=”alert(‘Hello, World!’)”>Click Me</button>

</body>

</html>

 

External JavaScript:

JavaScript can also be written in an external file and linked to the HTML file. This approach is cleaner and separates logic from structure.

 

Example of External JavaScript (script.js):

function changeText() {

document.getElementById(“demo”).innerHTML = “Text changed by external JavaScript!”;

}

 

Example of HTML Linking the External JavaScript:

<!DOCTYPE html>

<html>

<head>

<title>Interactive Webpage with External JavaScript</title>

<script src=”script.js”></script>

</head>

<body>

<h1>Click the button to change the text:</h1>

<p id=”demo”>This is some text.</p>

<button onclick=”changeText()”>Change Text</button>

</body>

</html>

This example shows how to link an external JavaScript file to make the webpage interactive.

 

JavaScript Example: A Simple Calculator

<!DOCTYPE html>

<html>

<head>

<title>Simple Calculator</title>

<script src=”calculator.js”></script>

</head>

<body>

<h1>Simple Calculator</h1>

<input type=”number” id=”num1″ placeholder=”Enter first number”>

<input type=”number” id=”num2″ placeholder=”Enter second number”>

<button onclick=”calculate()”>Add Numbers</button>

<p id=”result”></p>

</body>

</html>

 

Example of External JavaScript (calculator.js):

function calculate() {

var num1 = parseInt(document.getElementById(‘num1’).value);

var num2 = parseInt(document.getElementById(‘num2’).value);

var result = num1 + num2;

document.getElementById(‘result’).innerHTML = “Result: ” + result;

}

 

MORE RELATED EXAMPLES:

 

Changing the text on the page

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Simple JavaScript Example</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#message {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>

<h1>Welcome to My Web Page!</h1>
<button onclick=”changeMessage()”>Click Me</button>
<p id=”message”>Hello, world!</p>

<script>
// JavaScript function to change the message text
function changeMessage() {
document.getElementById(“message”).textContent = “You clicked the button!”;
}
</script>

</body>
</html>

This example demonstrates basic interaction and DOM manipulation, a fundamental concept in JavaScript for web design.

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of a web page so that programming languages like JavaScript can interact with and manipulate it. The DOM treats a web page as a tree of objects (nodes), where each HTML element, attribute, or piece of content becomes a node.

 

Changing the Background Color

This example shows how to change the page’s background color when a button is clicked.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Change Background Color</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>

<h1>Click to Change Background Color</h1>
<button onclick=”changeColor()”>Change Color</button>

<script>
function changeColor() {
document.body.style.backgroundColor = “lightblue”;
}
</script>

</body>
</html>

 

Changing the background color sequentially to an array of colors:

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Change Background Color</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
            margin-top: 50px;
        }
        button {
            padding: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Click to Change Background Color</h1>
    <button onclick=”changeColor()”>Change Color</button>
    <script>
        // Array of colors to cycle through
        const colors = [“lightblue”, “red”, “lightgreen”, “yellow”, “purple”, “orange”];
        let currentColorIndex = 0;
        function changeColor() {
            // Change the background color to the current color in the array
            document.body.style.backgroundColor = colors[currentColorIndex];
            // Move to the next color in the array
            currentColorIndex++;
            // If we reach the end of the array, start over from the beginning
            if (currentColorIndex >= colors.length) {
                currentColorIndex = 0;
            }
        }
    </script>
</body>
</html>

 

 

 

Explanation: When the button is clicked, the changeColor() function sets the backgroundColor of the page’s body to lightblue.

Displaying an Alert Box

This example will show how to display a message to the user in an alert box when they click a button.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Alert Example</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px;
font-size: 18px;
}
</style>
</head>
<body>

<h1>Click the Button to See an Alert</h1>
<button onclick=”showAlert()”>Show Alert</button>

<script>
function showAlert() {
alert(“Hello! This is an alert box.”);
}
</script>

</body>
</html>

 

Explanation: Clicking the button triggers the showAlert() function, which displays a popup alert box with the message "Hello! This is an alert box.".

Hiding and Showing Content

This example demonstrates how to hide and show a paragraph when a button is clicked.

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Show/Hide Content</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px;
font-size: 18px;
}
#content {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>

<h1>Click to Show or Hide Content</h1>
<button onclick=”toggleContent()”>Show/Hide</button>
<p id=”content”>This is some hidden content that you can show or hide.</p>

<script>
function toggleContent() {
var content = document.getElementById(“content”);
if (content.style.display === “none”) {
content.style.display = “block”;
} else {
content.style.display = “none”;
}
}
</script>

</body>
</html>

 

Explanation: The toggleContent() function shows or hides the paragraph by changing its display style between "none" and "block".

Changing Text Color

This example shows how to change the text color of a paragraph using JavaScript.

 

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Change Text Color</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px;
font-size: 18px;
}
#text {
margin-top: 20px;
font-size: 24px;
}
</style>
</head>
<body>

<h1>Click to Change Text Color</h1>
<button onclick=”changeTextColor()”>Change Color</button>
<p id=”text”>This is a colorful paragraph.</p>

<script>
function changeTextColor() {
document.getElementById(“text”).style.color = “red”;
}
</script>

</body>
</html>

 

Explanation: When the button is clicked, the changeTextColor() function changes the color of the paragraph text to red using the style.color property.

 

Absolute Paths and Relative Paths

In web design, absolute paths and relative paths are used to specify the location of resources (such as images, links, or scripts) on a webpage. Understanding the difference between them is important for correctly linking resources within a website or from external sources.

1. Absolute Path

An absolute path is a complete URL that points to a specific location on the web. It includes the full domain name and file path, starting from the root (the protocol, domain, and everything down to the file or resource).

Example of Absolute Path:

<img src="https://www.example.com/images/logo.png" alt="Logo">

In this example, https://www.example.com/images/logo.png is an absolute path. It specifies the exact location of the image file on the example.com server, starting from the protocol (https), the domain (www.example.com), and the directory (/images/) where the file (logo.png) is stored.

Characteristics of Absolute Path:

  • Always includes the protocol (http:// or https://) and domain name.
  • Points to a specific location on the web, which can be an external or internal resource.
  • Useful when linking resources from other websites or when you want the link to work regardless of where the current page is located.

2. Relative Path

A relative path is a path that describes the location of a file or resource relative to the current page or file. It does not include the full domain or protocol, so it depends on the current location of the page.

Types of Relative Paths:

  • Relative to the current directory: It references files in the same folder or subfolders of the current document.
  • Relative to the parent directory: It references files by going up one or more levels in the folder hierarchy.

Example of Relative Path:

If you’re working on a webpage located at https://www.example.com/about/index.html, and you want to reference an image stored in the /images/ folder, you can use a relative path:

<img src="../images/logo.png" alt="Logo">

In this case:

  • ../ means “go up one level” (from /about/ to /).
  • /images/logo.png is the path relative to the current location (/about/index.html).

Example of Relative Path (Same Directory):

<img src="logo.png" alt="Logo">

This path assumes the image logo.png is located in the same directory as the HTML file.

Characteristics of Relative Path:

  • Does not include the domain name or protocol.
  • Easier to use for internal resources when navigating between pages or files within the same website.
  • More flexible when the site is moved to another domain or the structure is maintained.
  • Can break if the directory structure changes without updating the paths.

Clear Comparison with Examples

Let’s assume you are working on a website located at https://www.mywebsite.com/, and you are linking to an image located at https://www.mywebsite.com/images/logo.png.

  1. Absolute Path Example:
    <img src="https://www.mywebsite.com/images/logo.png" alt="Logo">
    • This will always point to the same file, no matter where the current HTML file is located or where the site is moved.
  2. Relative Path Example (Same Directory): If your HTML file is in the /images/ folder, and the logo.png image is in the same folder, you would write:
    <img src="logo.png" alt="Logo">
  3. Relative Path Example (Going Up a Directory): If your HTML file is in a subfolder like /about/, but the image is located in /images/, you would write:
    <img src="../images/logo.png" alt="Logo">
    • ../ moves up one level from /about/ to /, then goes into the /images/ directory to find logo.png.

Summary of Key Differences:

Absolute Path Relative Path
Full URL, including protocol and domain name. Partial URL, relative to the current document.
Always points to the same location, no matter where the HTML file is. Can change depending on where the HTML file is located.
Used when linking to external websites or external resources. Used to link internal resources within the same website.
Example: https://www.example.com/images/pic.jpg Example: ../images/pic.jpg

When to Use Absolute vs. Relative Path:

  • Absolute Path: Use when linking to external resources or ensuring the link works independently of your page’s location.
  • Relative Path: Use for linking internal resources (within the same site) to make maintenance easier and avoid hardcoding full URLs.