Courses Edexcel iGCSE Computer Science Networks & the internet HTTP, HTML, CSS & Javascript

HTTP, HTML, CSS & Javascript

Introduction to HTTP

Hypertext Transfer Protocol(HTTP) is a foundational protocol used for communication on the World Wide Web that enables the transfer of data and documents between web servers and web clients (typically web browsers), allowing users to access and interact with web content.

HTTP was developed in the early 1990s by Tim Berners-Lee, the inventor of the World Wide Web, as part of the broader set of technologies that underpin the web.

What does HTTP stand for?

{"answers": {"A": "HyperText Transport Protocol", "B": "HyperText Transmission Process", "C": "HyperText Transfer Package", "D": "HyperText Transfer Protocol"}, "question_text": "What does HTTP stand for?", "correct_answer": "D"}

Client Server Model

HTTP follows a client-server model of communication.

In this model, a client (usually a web browser) sends requests to web servers, and the servers respond with the requested resources (such as web pages, images, or files).

{"keyword": "HTTP Response", "definition": "A message from a server containing status information and requested data in reply to a client request."}

HTTP Methods

When communicating with a web server 2 types of methods are usually used:

GET

The GET method is used to retrieve data from the server. When you make a GET request to a resource, the server sends back the requested data in the response body. GET requests should not have any side effects on the server; they should only retrieve data.

The GET method is used when loading a web page or response

POST

POST is used to submit data to be processed to a specified resource. It can be used to create new resources on the server, submit form data, or trigger other state-changing actions. POST requests can have side effects on the server.

The POST method is used when submitting a form.

What is the HTTP method used to retrieve information from a server?

{"answers": {"A": "DELETE", "B": "PUT", "C": "POST", "D": "GET"}, "question_text": "What is the HTTP method used to retrieve information from a server?", "correct_answer": "D"}

Which HTTP method is used to submit data to be processed to a specified resource?

{"answers": {"A": "PUT", "B": "POST", "C": "DELETE", "D": "GET"}, "question_text": "Which HTTP method is used to submit data to be processed to a specified resource?", "correct_answer": "B"}

Stateless Protcol

HTTP is a stateless protocol, meaning that each request from a client to a server is independent, and the server does not retain any knowledge of previous requests from the same client.

To maintain session state, web applications often use techniques like cookies or session tokens.

In a stateless protocol, each request from a client to a server is treated as an [[independent]] transaction.

{"cloze_text": "In a stateless protocol, each request from a client to a server is treated as an [[independent]] transaction."}

Cookies

Cookies are small pieces of data that websites send to a user's web browser and store on the user's computer or device.

They can be used for:

Session management - maintaining items in a shopping cart.
Personalisation - such as display language choice
Tracking - Tracking user behavior across websites
Authentication - keeping a user logged into a website
Advertisements - Used to deliver personalised adverts based on browsing behavior

HTTP cookies are used to [[store]] information on a user's computer.

{"cloze_text": "HTTP cookies are used to [[store]] information on a user's computer."}

{"keyword": "Tracking Cookie", "definition": "A cookie used to track the browsing behavior of the user across different websites."}

HTTPS

Hypertext Transfer Protocol Secure(HTTPS) is an extension of the standard HTTP and is used for secure communication over the internet.

HTTPS provides:

encryption - data can't be read if intercepted
data integrity - data can't be tampered with
authentication - ensuring that the user is client is communicating with the intended recipient.

In the acronym HTTPS, what does the 'S' represent?

{"answers": {"A": "Secure", "B": "Server", "C": "Standard", "D": "Simple"}, "question_text": "In the acronym HTTPS, what does the 'S' represent?", "correct_answer": "A"}

What is the primary difference between HTTP and HTTPS?

{"answers": {"A": "HTTPS uses a different port number than HTTP", "B": "HTTPS is used exclusively for static websites", "C": "HTTPS encrypts data to provide secure communication", "D": "HTTPS requires special client software to access"}, "question_text": "What is the primary difference between HTTP and HTTPS?", "correct_answer": "C"}

Which of the following is the primary purpose of HTTPS?

{"answers": {"A": "Improving website loading speed", "B": "Authenticating the identity of a website and encrypting data transmitted between a client and a server", "C": "Encrypting data transmitted between a client and a server", "D": "Preventing denial-of-service attacks"}, "question_text": "Which of the following is the primary purpose of HTTPS?", "correct_answer": "B"}

Introduction to HTML

Hypertext Markup Language is the standard markup language used to create web pages. It forms the foundation of virtually every web page on the internet, providing the structure and content for displaying text, images, links, multimedia, and more in a web browser. Here's an introduction to HTML:

HTML is not a programming language; instead, it is a markup language. This means it is used to structure and format content on web pages rather than to perform computations or logic.

What is the primary purpose of HTML in web development?

{"answers": {"A": "To manage server-side data processing", "B": "To add interactive behavior to webpage elements", "C": "To style and visually format webpage content", "D": "To create and structure the content of a webpage"}, "question_text": "What is the primary purpose of HTML in web development?", "correct_answer": "D"}

HTML Elements

HTML (Hypertext Markup Language) includes a wide range of elements that allow you to structure and format content on a web page.

Here are the top 10 most commonly used HTML elements:

<div>: A container for grouping and styling content.
<a>: Creates hyperlinks for navigation.
<p>: Defines paragraphs of text.
<img>: Embeds images.
<ul> and <ol>: Create lists (bulleted or numbered).
<li>: Represents list items.
<h1>, <h2>, ... <h6>: Headings for text structure.
<span>: Inline container for styling or scripting.
<form>: Creates user input forms.
<input>: Form control for various input types.

Which HTML tag is used to create a hyperlink?

{"answers": {"A": "", "B": "", "C": "", "D": "

Example HTML Page

<!DOCTYPE html>
<html>
<head>
    <title>My Simple HTML Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>  
    <p>This is a paragraph of text. </p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p>Here is an image:</p>
    <img src="https://via.placeholder.com/150" alt="Sample Image">
    
    <p>Click <a href="https://www.example.com">here</a> to visit Example.com.</p>
</body>
</html>

What does HTML stand for?

{"answers": {"A": "Hyper Text Makeup Language", "B": "Hyper Tool Markup Language", "C": "Hyper Text Markup Language", "D": "Hyperlinks and Text Markup Language"}, "question_text": "What does HTML stand for?", "correct_answer": "C"}

Introduction to CSS

Cascading Style Sheets(CSS) is a fundamental technology used for styling and formatting web documents. It complements HTML (Hypertext Markup Language) by defining how web content should be presented and visually displayed in web browsers.

CSS can be added to a HTML page in the form of :

inline-css
embedded css
external css

What does the acronym CSS stand for in web development?

{"answers": {"A": "Creative Style Sheets", "B": "Cascading Style Sheets", "C": "Custom Style Syntax", "D": "Computer Style Sheets"}, "question_text": "What does the acronym CSS stand for in web development?", "correct_answer": "B"}

Selectors and Declarations

CSS uses selectors to target HTML elements and declarations to define the style rules for those elements. A declaration consists of a property and a value.

h1 {
    color: blue;
}

The [[selectors]] determine which elements a style rule applies to.

{"cloze_text": "The [[selectors]] determine which elements a style rule applies to."}

Example CSS Sheet

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Style headings */
h1 {
    color: #333;
}

/* Style paragraphs */
p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

Which CSS property is used to change the text color of an element?

{"answers": {"A": "background-color", "B": "font-size", "C": "text-align", "D": "color"}, "question_text": "Which CSS property is used to change the text color of an element?", "correct_answer": "D"}

Inline Stylesheet

Inline styles are applied directly to individual HTML elements using the style attribute.

<p style="color: blue; font-size: 16px;">This is a blue paragraph with a custom font size.</p>

Pros:

Quick and easy to implement for individual elements.
Useful for making small, one-off styling changes.

Cons:

Can result in code repetition if applied to multiple elements.
Not well-suited for maintaining consistent styles across multiple pages.

An [[inline]] style sheet is used to apply styles to a specific HTML element.

{"cloze_text": "An [[inline]] style sheet is used to apply styles to a specific HTML element."}

Embedded Stylesheet

Embedded styles are defined within the HTML document using a <style> element in the document's <head> section.

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is a blue paragraph with a custom font size.</p>
</body>

Pros:

Allows for styling multiple elements within a single HTML document.
Provides better organization and separation of concerns compared to inline styles.

Cons:

Styles are still within the HTML document, so they are not reusable across multiple pages.
May become unwieldy as styles become more complex.

To use an [[embedded]] style sheet, the style element is used within the head section of an HTML document.

{"cloze_text": "To use an [[embedded]] style sheet, the style element is used within the head section of an HTML document."}

External Stylesheet

External styles are stored in separate .css files and linked to HTML documents using the <link> element.

<!-- In the HTML document's head section -->
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

/* In the external CSS file (styles.css) */
p {
    color: blue;
    font-size: 16px;
}

Pros:

Promotes clean separation of HTML and CSS, enhancing code maintainability.
Enables the reuse of styles across multiple HTML documents.
Easier to manage and update styles in larger projects.

Cons:

Requires an additional HTTP request to load the external CSS file.
Not suitable for making quick, one-off style changes for individual elements.

{"keyword": "external CSS", "definition": "A separate CSS file that is linked to an HTML document using the 'link' element."}

Introduction to Javascript

JavaScript is a versatile and widely used programming language that plays a fundamental role in web development. It was created to make web pages more interactive by allowing developers to add dynamic behavior and interactivity to websites

JavaScript is primarily a client-side scripting language, which means it runs in the web browser of the user. This enables it to manipulate and interact with the Document Object Model (DOM) of web pages, allowing for real-time updates and user interactions without requiring communication with the web server.

Which language is responsible for adding interactivity to websites?

{"answers": {"A": "JavaScript", "B": "CSS", "C": "HTML", "D": "Ruby"}, "question_text": "Which language is responsible for adding interactivity to websites?", "correct_answer": "A"}

Example Script

<!DOCTYPE html>
<html>
<head>
    <title>Hello, World! Popup</title>
</head>
<body>
    <button id="showPopupButton">Click Me</button>
    <script>
        // Get a reference to the button element
        var button = document.getElementById("showPopupButton");
        // Add a click event listener to the button
        button.addEventListener("click", function () {
            // Display a popup alert with "Hello, World!"
            alert("Hello, World!");
        });
    </script>
</body>
</html>