SELF-Treffen in Mannheim 2025
SELFHTML wird 30 Jahre alt!
Die Mitgliederversammlung findet am 24.05.2025 um 10:00 statt. Alle Mitglieder und Interessierte sind herzlich eingeladen.
Davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein. → Veranstaltungs-Ankündigung.
Beispiel:HTML-Scroll-Snap.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One-Pager mit Scroll-Snap</title>
<style>
@media (prefers-reduced-motion: no-preference){
html, body {
margin: 0;
padding: 0;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scroll-padding: 0;
}
section{
scroll-snap-align: start;
scroll-margin: 0;
}
}
html, body {
position: relative;
}
section{
background: #fff;
min-height: 100vh;
padding: 2.5em;
}
#navigation {
position: fixed;
top: 0;
left: calc(50% - 20em);
z-index: 99;
margin: 0 auto;
padding: 1em;
width: 40em;
background: transparent;
list-style: none;
}
#navigation li {
float: left;
height: 2em;
text-align: center;
margin: 0;
background: gold;
border: thin solid #204960;
border-radius: .5em;
line-height: 150%;
font-family: Arial bold, Helvetica, sans-serif;
margin: 0 0 0 1em;
}
#navigation li a,
#navigation li a:link,
#navigation li a:visited {
text-decoration: none;
display: block;
height: 2em;
color: #204960;
font-weight: bold;
padding: 0.1em 1em;
}
#navigation li a:hover,
#navigation li a:focus,
#navigation li a:active {
background: #204960;
color: gold;
border-radius: .5em;
}
section > * {
max-width: 40em;
margin: 0.5em auto;
}
section h2 {
font-size: 4em;
text-align: center;
line-height: 2rem;
-webkit-backface-visibility: hidden;
}
section p {
text-align: justify;
-webkit-backface-visibility: hidden;
}
/* Colored sections */
#part_1{
background: #fffbf0;
}
#part_2{
background: #ebf5d7;
}
#part_2 img,
#part_5 img {
float: right;
margin-left: 1em;
}
#part_3{
background: #ffebe6;
}
#part_4{
background: #e6f2f7;
}
@media screen and (max-width: 32em) {
section h2 {
font-size: 2em;
}
section p {
width: 90%;
left: 5%;
margin-top: 0;
}
}
</style>
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="#part_1">Startseite</a></li>
<li><a href="#part_2">HTML</a></li>
<li><a href="#part_3">CSS</a></li>
<li><a href="#part_4">JavaScript</a></li>
<li><a href="#part_5">SVG</a></li>
</ul>
</nav>
<section id="part_1" tabindex="1">
<h2>Webdesign</h2>
<p>Im modernen Webdesign kommt den verschiedenen Webtechniken jeweils eine bestimmte Rolle zu.</p>
<ul>
<li><a href="#part_2">HTML</a> legt fest, <strong>was</strong> auf der Seite stehen soll (struktureller Aufbau einer Webseite)</li>
<li><a href="#part_3">CSS</a> legt fest, <strong>wie</strong> es dargestellt werden soll (Formatierung & Gestaltung)</li>
<li><a href="#part_4">JavaScript</a> legt fest, was <strong>passieren</strong> soll. (interaktive Elemente) .</li>
</ul>
<p><img src="https://wiki.selfhtml.org/images/7/78/HTML-CSS-JS.svg" alt="Trennung von Zuständigkeiten - Separation of Concerns"></p>
</section>
<section id="part_2" tabindex="2">
<h2>HTML</h2>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" width="200" alt="HTML5-Logos">Eine solche Auszeichnungssprache hat die Aufgabe, die logischen
Bestandteile eines textorientierten Dokuments zu beschreiben. Als
Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische
Elemente eines textorientierten Dokuments, wie Überschriften,
Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche
auszuzeichnen. </p>
</section>
<section id="part_3" tabindex="3">
<h2>CSS</h2>
<p>Bei Cascading Stylesheets handelt sich um eine unmittelbare
Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt
sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner
HTML-Elemente.</p>
<p>Mit Hilfe von Stylesheets können Sie beispielsweise
festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem
Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie
oberhalb dargestellt werden.</p>
<p><code></code></p><pre><code>Überschrift {
Schriftgröße: 24 Punkt;
Abstand-unten: 16 Punkt;
Rahmenfarbe-oben: grün;
Rahmenart-oben: doppelt
}</code></pre><p></p>
</section>
<section id="part_4" tabindex="4">
<h2>JavaScript</h2>
<p>JavaScripte haben Zugriff auf das Browserfenster und das darin
angezeigte HTML-Dokument. Ihre wichtigste Aufgabe besteht darin, auf
Benutzereingaben im Dokument zu reagieren (z.B. klickt der Benutzer auf
ein Element oder gibt einen Text in ein Formularfeld ein). JavaScripte
können daraufhin Änderungen im gegenwärtig angezeigten HTML-Dokument
vornehmen. Diese Änderungen finden nur im Browser, genauer gesagt im
Arbeitsspeicher des Rechners statt, während das Dokument auf dem
Web-Server unangetastet bleibt.</p>
<p>
Die Änderungen können sowohl den Inhalt als auch die Darstellung des
Dokuments betreffen. Auf diese Weise kann ein Dokument interaktiv und
»dynamisch« gestaltet werden. Das bedeutet, es kann auf Benutzereingaben
reagieren und sich ändern, ohne dass ein neues Dokument vom Web-Server
abgerufen werden muss. Beispielsweise können Zusatzinformationen
eingeblendet werden, sobald der Anwender mit der Maus auf ein bestimmtes
HTML-Element klickt. </p>
</section>
<section id="part_5" tabindex="5">
<h2>SVG</h2>
<p><img src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" width="200" alt="HTML5-Logos">SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format.
Damit lassen sich in allen Viewport-Auflösungen gestochen scharfe
Grafiken darstellen.</p>
<p>Man sollte es einsetzen, wenn sich die meisten Bildelemente
mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit
oder eine Dynamik gewünscht ist.</p>
</section>
</body></html>
