A webpage typically consists of 3 types of files:
Content in this case refers to headings, paragraphs, buttons, links, images and so on. Styling content changes how the content is rendered; this includes typography, spacing, layout and color. JavaScript introduces interactivity - when certain conditions are met, it can change the structure and style of content.
This is a simple webpage. The HTML boilerplate was copied from the Odin Project 1. An example project from W3Schools was used for the counter 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Counter</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<h1>What is this?</h1>
<p>This is a simple webpage that counts the number of times a button was clicked.</p>
<h2>How does it work?</h2>
<p id="listing">
The HTML defines this text, the image above and the button below. <br>
CSS adds styling so it looks nice. <br>
JS changes the text when the button is clicked. <br>
</p>
<h1>Clicker</h1>
<button onclick="increaseCount()">Click me!</button>
<br>
<span>
<p class="count-display">This button has been pressed </p>
<p id="count">0</p>
<p class="count-display"> times.</p>
</span>
</body>
</html>
The background and text color are inverted by the DarkReader extension.
:root {
text-align: center;
background-color: #181A1B;
}
h1 {
font-family: "Brush Script MT", cursive;
color: #D38693;
margin-bottom: 3px;
}
h2 {
color: #89B482;
}
p {
color: #7DAEA3;
}
button {
font-family: "Impact", fantasy;
background-color: #D3869B;
border-color: #3C333B;
padding: 10px;
margin: 10px;
border-radius: 8px;
}
#listing {
text-align: left;
display: flex;
justify-content: center;
}
.count-display, #count {
display: inline;
}
// Declare the counter
let count = 0;
// Function to display the counter
function updateCount() {
document.getElementById("count").innerHTML = count;
}
// Function to increase the counter
function increaseCount() {
count++;
updateCount();
}
simple webpage
Client-Side vs Server-Side RectJS, Angular, PHP, Springboot
images
inlining - SingleFile
warc
For archiving purposes, one area of complexity is that the webpage is not monolithic; the webpage contains links to assets it requires. A local copy will have to acquire these assets and rewrite the links to refer to the local assets.
Scope: Static webpages and webpages with client-side JS.
resolution
]]>