From Mario’s archive to your browser
1997 → Today.
The wish to build stayed. The way we build changed.
Explore three patterns found in the preserved MAoB 1997 files. Compare a newly authored illustration of each old idea with a modern example, then look at the code.
Archive evidence, new demonstrations. The historical excerpts below come directly from the supplied files. Both previews are simplified examples created for this lesson, not screenshots or restorations of the original website. The original archive remains a separate historical document.
The width is capped by the available space. For a wider view, choose one version. Each preview reports its actual width.
COMPARISON 01
From separate frames to one document
Give the page a structure that travels with its content.
The archived frameset uses rows="20,*" and loads menu.htm and main.htm as separate frame documents. The demonstration below illustrates that split; it does not run a frameset.
Both versions are shown.
What should I notice?
In this modern example, the links and the main content belong to the same document. nav and main describe the regions. Wrapping navigation and Grid adapt the arrangement as the available width changes.
Frames did not require every page to have a fixed width. The 640px width here is an intentional teaching choice, not a measured property of the original archive. Semantic HTML describes the structure; CSS controls the layout.
Read the historical excerpt and modern code
Historical excerpt · index.htm
<frameset rows="20,*" border="0" frameborder=0 framespacing=0 >
<frame src="menu.htm" name="menu" border="0" frameborder=0 framespacing=0 scrolling=no noresize marginwidth="0" marginheight="0">
<frame src="main.htm" name="main" border="0" frameborder=0 framespacing=0 scrolling=auto noresize>
</frameset>The excerpt is displayed as text. The reconstructed preview uses new demonstration markup.
Modern example · HTML
<header>
<nav aria-label="Main navigation">
<a href="#intro">Home</a><a href="#projects">Projects</a><a href="#about">About</a>
</nav>
</header>
<main>
<h1 id="intro">Portfolio: Mario V.W.B.R. Obst</h1>
<p>ScreenDesign, Internet Layout & WebHosting</p>
<section id="projects">
<h2>A place for ideas</h2>
<div class="cards">
<p class="card">Structure the content.</p>
<p class="card">Give the ideas room.</p>
</div>
</section>
<section id="about">
<h2>Keep exploring</h2>
<p>One document. Meaningful regions. A layout that adapts to its available width.</p>
</section>
</main>
<footer>A newly authored learning example.</footer>Modern example · shared CSS
* { box-sizing: border-box; }
body { margin: 0; background: #20212a; color: #efedf6; font: 1rem/1.7 system-ui, sans-serif; }
a { color: #ffad66; }
:focus-visible { outline: 3px solid #80eee0; outline-offset: 4px; }
header, main, footer { padding: 20px; }
header, footer { background: #282934; }
nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
main { max-width: 65ch; margin-inline: auto; }
h1 { margin-top: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 16px; }
section + section { margin-top: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.card { padding: 16px; background: #423025; border: 1px solid #77513c; border-radius: 8px; }
.reading { font-size: clamp(1rem, 2.5vw, 1.2rem); }
details { border: 1px solid #777582; border-radius: 8px; padding: 16px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 16px 0 0; }
Try it yourself
Choose Today only, then make the preview narrow. Follow Projects and About. Explain which HTML element describes the main content and which CSS rule changes the card arrangement.
Keep exploring: Semantic landmarks · CSS Grid · Responsive design
COMPARISON 02
From font tags to reusable CSS
Keep the words. Make their presentation easier to change.
main.htm contains a FONT element with FACE="verdana,arial,helvetica" and SIZE=2. The teaching illustration below uses the same kind of element; its text is newly written.
Both versions are shown.
What should I notice?
The modern HTML contains headings and paragraphs rather than font elements. The shared CSS sets the font, a proportional line height and a maximum reading width. One rule can update several paragraphs.
Old HTML can wrap text too. CSS alone does not guarantee readability: font size, line length, contrast, spacing and the reader’s own settings still need consideration. The two palettes here help distinguish the teaching examples; they are not a claim that dark backgrounds are inherently better.
Read the historical excerpt and modern code
Historical excerpt · main.htm
<FONT FACE="verdana,arial,helvetica" SIZE=2>The excerpt is displayed as text. The reconstructed preview uses new demonstration markup.
Modern example · HTML
<main class="reading">
<h1>Portfolio: Mario V.W.B.R. Obst</h1>
<p>A website begins with something worth sharing. A small idea can become a useful page.</p>
<p>In this example, HTML describes the paragraphs. CSS sets their type, spacing and readable measure in one place.</p>
<p>Try the narrow preview. The text keeps room to breathe while its lines adapt.</p>
</main>Modern example · shared CSS
* { box-sizing: border-box; }
body { margin: 0; background: #20212a; color: #efedf6; font: 1rem/1.7 system-ui, sans-serif; }
a { color: #ffad66; }
:focus-visible { outline: 3px solid #80eee0; outline-offset: 4px; }
header, main, footer { padding: 20px; }
header, footer { background: #282934; }
nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
main { max-width: 65ch; margin-inline: auto; }
h1 { margin-top: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 16px; }
section + section { margin-top: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.card { padding: 16px; background: #423025; border: 1px solid #77513c; border-radius: 8px; }
.reading { font-size: clamp(1rem, 2.5vw, 1.2rem); }
details { border: 1px solid #777582; border-radius: 8px; padding: 16px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 16px 0 0; }
Try it yourself
Compare the two versions at a narrow width. In the modern CSS, find font, line-height and max-width. Which changes the size, which the space between lines, and which the reading measure?
Keep exploring: Readable typography · CSS custom properties
COMPARISON 03
From a browser-specific handler to details
Let the HTML element supply the opening and closing behaviour.
The archive uses checkExpand(), event.srcElement and document.all to locate a related element and toggle its display. The example below illustrates that effect with a native button; it does not execute the historical handler.
Both versions are shown.
What should I notice?
The modern details element keeps its disclosure behaviour without a script. Focus the summary with Tab and use Enter or Space to open it. Its open attribute represents the current state.
The reconstructed 1997 idea uses a contemporary native button so the comparison itself remains usable. It is not a test of the original handler’s keyboard support. details is a disclosure element, not a replacement for every menu, dialog or interface.
Read the historical excerpt and modern code
Historical excerpt · main.htm
function checkExpand() {
if (""!=event.srcElement.id) {
var ch = event.srcElement.id + "Child"
var el = document.all[ch]
if (null!=el) el.style.display = "none" == el.style.display ? "" : "none"
event.returnValue=false
}
}The excerpt is displayed as text. The reconstructed preview uses new demonstration markup.
Modern example · HTML
<main>
<h1>Portfolio: Mario V.W.B.R. Obst</h1>
<details>
<summary>Please read</summary>
<p>This new demonstration reveals a related panel using native HTML. No click handler is needed to open or close it.</p>
</details>
</main>Modern example · shared CSS
* { box-sizing: border-box; }
body { margin: 0; background: #20212a; color: #efedf6; font: 1rem/1.7 system-ui, sans-serif; }
a { color: #ffad66; }
:focus-visible { outline: 3px solid #80eee0; outline-offset: 4px; }
header, main, footer { padding: 20px; }
header, footer { background: #282934; }
nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
main { max-width: 65ch; margin-inline: auto; }
h1 { margin-top: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; }
h2 { font-size: 1.25rem; }
p { margin: 0 0 16px; }
section + section { margin-top: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.card { padding: 16px; background: #423025; border: 1px solid #77513c; border-radius: 8px; }
.reading { font-size: clamp(1rem, 2.5vw, 1.2rem); }
details { border: 1px solid #777582; border-radius: 8px; padding: 16px; }
summary { cursor: pointer; font-weight: 700; }
details p { margin: 16px 0 0; }
Try it yourself
Open and close the Today panel with the keyboard. Then find the modern HTML that supplies that behaviour. What would remain if you removed JavaScript from a page containing this element?
Keep exploring: Details and summary · Keyboard and focus
YOUR TURN TO CHANGE THE CODE
From comparing to repairing.
Try three editable missions and see whether your changes solve the stated goal.
Where this story comes from
Read Mario’s web journey or visit the preserved MAoB 1997 archive (new tab). Historical file names, later updates and recollections are explained in the journey.