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?
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).
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?
Which HTTP method is used to submit data to be processed to a specified resource?
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.
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
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?
What is the primary difference between HTTP and HTTPS?
Which of the following is the primary purpose of HTTPS?
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?
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?
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?
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?
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;
}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?
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.
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.
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.
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?
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>
Click the button below to try out the script:
Which language is primarily used to define the structure and content of a webpage?
Which language is primarily used to style the appearance of a webpage, including colors and fonts?
Review: Fill in the Blanks
HTTP follows a model of communication. In this model, a (usually a web browser) sends requests to web , and the servers respond with the requested resources such as web pages, images, or files. When communicating with a web server, two types of methods are usually used: GET and POST. The GET method is used to retrieve data from the server, while the POST method is used to submit data to be processed to a specified resource.
HTTP is a 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 or session tokens. Furthermore, Hypertext Transfer Protocol Secure (HTTPS) is an extension of the standard HTTP and is used for secure communication over the internet, providing features such as encryption to protect data and authentication to ensure that the user is communicating with the intended recipient.
Complete! Ready to test your knowledge?
HTTP
- Introduction to HTTP
- Client Server Model
- HTTP Methods
- Stateless Protcol
- Cookies
- HTTPS
HTML
- Introduction to HTML
- HTML Elements
- Example HTML Page
CSS
- Introduction to CSS
- Selectors and Declarations
- Example CSS Sheet
- Inline Stylesheet
- Embedded Stylesheet
- External Stylesheet
Javascript
- Introduction to Javascript
- Example Script