public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add html/css demos for 223015c chapter 1: html basics, widgets, a11y

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:44:12 +02:00
parent 558d0e5ecd
commit a2934f1327
33 changed files with 566 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -2,6 +2,7 @@
build/ build/
*.pdf *.pdf
*.html *.html
!slides/*/assets/demos/**/*.html
.dev-index/ .dev-index/
# Dependencies # Dependencies

24
slides/223015c/01-geschichte-grundlagen-html.md
View File

@@ -877,7 +877,7 @@ Kostenlos freigegeben → darum existiert es
<!-- _header: '' --> <!-- _header: '' -->
<!-- _footer: '' --> <!-- _footer: '' -->
![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg) ![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
<!-- <!--
Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente. Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
@@ -1267,6 +1267,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
# HTML-Tags und Attribute # HTML-Tags und Attribute
![bg right:35%](./assets/demos/tag-attribut.png)
```html ```html
<body> <body>
<p class="wichtig">Das ist ein Absatz.</p> <p class="wichtig">Das ist ein Absatz.</p>
@@ -1298,6 +1300,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
# Vollständiges Grundgerüst # Vollständiges Grundgerüst
![bg right:35%](./assets/demos/grundgeruest.png)
```html ```html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
@@ -1373,10 +1377,10 @@ Accessibility ist eingebaut
--- ---
[]
# Beispiel: Details/Summary # Beispiel: Details/Summary
![bg right:35%](./assets/demos/details-closed.png)
```html ```html
<details> <details>
<summary>Klick mich!</summary> <summary>Klick mich!</summary>
@@ -1390,6 +1394,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
# Beispiel: Details/Summary (geöffnet) # Beispiel: Details/Summary (geöffnet)
![bg right:35%](./assets/demos/details-open.png)
```html ```html
<details open> <details open>
<summary>Klick mich!</summary> <summary>Klick mich!</summary>
@@ -1404,6 +1410,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
# Beispiel: Button # Beispiel: Button
![bg right:35%](./assets/demos/button.png)
```html ```html
<button>Add to favorites</button> <button>Add to favorites</button>
``` ```
@@ -1414,6 +1422,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
# Beispiel: Input/Eingabefeld # Beispiel: Input/Eingabefeld
![bg right:35%](./assets/demos/input.png)
```html ```html
<input <input
type="text" type="text"
@@ -1427,6 +1437,8 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
# Beispiel: Dialog # Beispiel: Dialog
![bg right:35%](./assets/demos/dialog.png)
```html ```html
<dialog open> <dialog open>
<p>Greetings, one and all!</p> <p>Greetings, one and all!</p>
@@ -1629,6 +1641,8 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
# Operable: Bedienbar # Operable: Bedienbar
![bg right:35%](./assets/demos/a11y-focus.png)
**Tastaturzugänglich:** **Tastaturzugänglich:**
```css ```css
/* Fokus-Indikator NIE entfernen! */ /* Fokus-Indikator NIE entfernen! */
@@ -1657,6 +1671,8 @@ Skip-Links: "Zum Hauptinhalt springen"
# Understandable: Verständlich # Understandable: Verständlich
![bg right:35%](./assets/demos/a11y-error.png)
**Sprache angeben:** **Sprache angeben:**
```html ```html
<html lang="de"> <html lang="de">
@@ -1682,6 +1698,8 @@ Fehlermeldungen: konkret, hilfreich, am Feld
# Robust: Technisch solide # Robust: Technisch solide
![bg right:35%](./assets/demos/a11y-semantic.png)
**Semantisches HTML:** **Semantisches HTML:**
```html ```html
<!-- Schlecht --> <!-- Schlecht -->

34
slides/223015c/assets/demos/_frame-template.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: __TITLE__</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">__URL__</span>
</div>
<iframe src="__SRC__"></iframe>
</div>
</div>
</body>
</html>

34
slides/223015c/assets/demos/a11y-error-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-error</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/email-form.html</span>
</div>
<iframe src="./a11y-error.html"></iframe>
</div>
</div>
</body>
</html>

31
slides/223015c/assets/demos/a11y-error.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fehlermeldung</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
label { display: block; margin-bottom: 4px; font-weight: 600; }
input {
font: inherit;
padding: 6px 10px;
width: 100%;
box-sizing: border-box;
border: 2px solid #d63384;
border-radius: 4px;
}
#email-error {
color: #d63384;
font-size: 0.9em;
margin-top: 6px;
}
</style>
</head>
<body>
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" aria-describedby="email-error" value="michael@">
<p id="email-error" role="alert">
Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>
</body>
</html>

BIN
slides/223015c/assets/demos/a11y-error.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

34
slides/223015c/assets/demos/a11y-focus-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-focus</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/focus.html</span>
</div>
<iframe src="./a11y-focus.html"></iframe>
</div>
</div>
</body>
</html>

24
slides/223015c/assets/demos/a11y-focus.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Fokus-Indikator</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
:focus, .is-focused {
outline: 2px solid blue;
outline-offset: 2px;
}
button:focus-visible, button.is-focused {
box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}
button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
</style>
</head>
<body>
<p>Tab-Taste drücken:</p>
<button class="is-focused">Erster Button</button>
<button>Zweiter Button</button>
<button>Dritter Button</button>
</body>
</html>

BIN
slides/223015c/assets/demos/a11y-focus.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

34
slides/223015c/assets/demos/a11y-semantic-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: a11y-semantic</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/klick.html</span>
</div>
<iframe src="./a11y-semantic.html"></iframe>
</div>
</div>
</body>
</html>

31
slides/223015c/assets/demos/a11y-semantic.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>div vs button</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
.bad { color: #b91c1c; }
.good { color: #15803d; }
.button {
display: inline-block;
background: #e5e7eb;
border: 1px solid #9ca3af;
padding: 6px 14px;
cursor: pointer;
border-radius: 4px;
}
button { font: inherit; padding: 6px 14px; }
</style>
</head>
<body>
<h3 class="bad">Schlecht (div)</h3>
<div class="button" onclick="alert('!')">Klick mich</div>
<p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
<h3 class="good">Gut (button)</h3>
<button type="button">Klick mich</button>
<p><small>✅ Tastatur + Screenreader eingebaut</small></p>
</body>
</html>

BIN
slides/223015c/assets/demos/a11y-semantic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

34
slides/223015c/assets/demos/button-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: button</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/button.html</span>
</div>
<iframe src="./button.html"></iframe>
</div>
</div>
</body>
</html>

10
slides/223015c/assets/demos/button.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Button</title>
</head>
<body>
<button>Add to favorites</button>
</body>
</html>

BIN
slides/223015c/assets/demos/button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

34
slides/223015c/assets/demos/details-closed-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-closed</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-closed.html"></iframe>
</div>
</div>
</body>
</html>

13
slides/223015c/assets/demos/details-closed.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary</title>
</head>
<body>
<details>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>

BIN
slides/223015c/assets/demos/details-closed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

34
slides/223015c/assets/demos/details-open-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: details-open</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/details.html</span>
</div>
<iframe src="./details-open.html"></iframe>
</div>
</div>
</body>
</html>

13
slides/223015c/assets/demos/details-open.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Details/Summary (offen)</title>
</head>
<body>
<details open>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
</details>
</body>
</html>

BIN
slides/223015c/assets/demos/details-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

34
slides/223015c/assets/demos/dialog-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: dialog</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/dialog.html</span>
</div>
<iframe src="./dialog.html"></iframe>
</div>
</div>
</body>
</html>

15
slides/223015c/assets/demos/dialog.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dialog</title>
</head>
<body>
<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button>OK</button>
</form>
</dialog>
</body>
</html>

BIN
slides/223015c/assets/demos/dialog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

33
slides/223015c/assets/demos/grundgeruest-frame.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Grundgerüst</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///portfolio/index.html</span>
</div>
<iframe src="./grundgeruest.html"></iframe>
</div>
</div>
</body>
</html>

12
slides/223015c/assets/demos/grundgeruest.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Portfolio von ...</title>
<meta name="description" content="Hier gibt es die besten ..." />
<meta name="og:image" content="https://...." />
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist mein erster Absatz.</p>
</body>
</html>

BIN
slides/223015c/assets/demos/grundgeruest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

34
slides/223015c/assets/demos/input-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: input</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/input.html</span>
</div>
<iframe src="./input.html"></iframe>
</div>
</div>
</body>
</html>

13
slides/223015c/assets/demos/input.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input/Eingabefeld</title>
</head>
<body>
<input
type="text"
maxlength="8"
size="10" />
</body>
</html>

BIN
slides/223015c/assets/demos/input.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

33
slides/223015c/assets/demos/tag-attribut-frame.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Tag mit Attribut</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/absatz.html</span>
</div>
<iframe src="./tag-attribut.html"></iframe>
</div>
</div>
</body>
</html>

10
slides/223015c/assets/demos/tag-attribut.html Normal file
View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Tag mit Attribut</title>
</head>
<body>
<p class="wichtig">Das ist ein Absatz.</p>
</body>
</html>

BIN
slides/223015c/assets/demos/tag-attribut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB