Webauftritt erstellen und veröffentlichen

Du startest mit einer leeren Datei und baust Schritt für Schritt eine mehrseitige Website auf. Zuerst strukturierst du die Inhalte sauber mit HTML, danach gestaltest du sie mit CSS und sorgst mit Flexbox, Grid und Media Queries dafür, dass sie auf dem Smartphone genauso funktioniert wie auf dem Bürobildschirm. Du achtest auf Lesbarkeit, Bildgrössen und Zugänglichkeit. Zum Schluss lädst du die Seite auf einen Webserver, verbindest eine Domain und prüfst das Ergebnis mit Validatoren und Lighthouse.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Inhalte mit semantischem HTML gliedern

   Kompetenz A

   Du wählst für jeden Inhalt das passende Element: header, nav, main, section, article, footer, Überschriften in korrekter Reihenfolge, Listen und Tabellen nur dort, wo sie inhaltlich passen. So verstehen Browser, Suchmaschinen und Screenreader, was auf der Seite wichtig ist.

   Situation

   Die Bäckerei Moser in Thun hat bisher nur einen Facebook-Eintrag und möchte eine einfache Website mit Startseite, Sortiment, Öffnungszeiten und Kontakt.

   Deine Aufgabe

   Lege die HTML-Struktur der Startseite an, bevor irgendetwas gestaltet wird.

   Gutes Ergebnis

   Eine index.html mit header (Logo und nav mit vier Links), main mit einer h1 'Bäckerei Moser, seit 1962', einer section für Tagesangebote als ul und einer table für die Öffnungszeiten Mo bis Sa. Im footer stehen Adresse und Telefonnummer. Die Seite ist ohne CSS bereits logisch lesbar.

   Semantische ElementeÜberschriftenhierarchieBlock- vs. Inline-ElementeAttribute (href, src, alt)Dokumentstruktur (head, body)
2. 2

   Layout und Design mit CSS umsetzen

   Kompetenz B

   Du trennst Inhalt und Gestaltung konsequent: Farben, Schriften, Abstände und Layout stehen in einer externen CSS-Datei. Du nutzt Selektoren gezielt, verstehst das Box-Modell und baust Layouts mit Flexbox und Grid statt mit Tabellen oder festen Pixelpositionen.

   Situation

   Die Gemeinde Wettingen möchte für ihren Ferienpass eine Übersichtsseite mit zwölf Kurskacheln (Bild, Titel, Alter, Preis in CHF).

   Deine Aufgabe

   Gestalte die Kacheln als gleichmässiges Raster und definiere die Gemeindefarben zentral.

   Gutes Ergebnis

   In style.css stehen die Farben als CSS-Variablen (--farbe-primaer: #005ca9). Die Kacheln liegen in einem Grid mit 'grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))' und einem Abstand von 1.5rem. Jede Karte nutzt Flexbox, damit der Preis immer unten steht.

   Selektoren und SpezifitätBox-ModellFlexboxCSS GridCSS-VariablenEinheiten (rem, %, vw)
3. 3

   Die Website für Smartphone, Tablet und Desktop anpassen

   Kompetenz C

   Du arbeitest nach Mobile First: Zuerst funktioniert die Seite auf einem schmalen Bildschirm, danach erweiterst du das Layout mit Media Queries für grössere Geräte. Du setzt den Viewport-Meta-Tag und testest im Gerätemodus der DevTools.

   Situation

   Beim Treuhandbüro Keller & Partner in St. Gallen beschweren sich Kundinnen, dass auf dem Handy die Navigation aus dem Bildschirm ragt und man seitlich scrollen muss.

   Deine Aufgabe

   Mach die Seite auf einem iPhone mit 375 px Breite benutzbar, ohne die Desktop-Ansicht zu verschlechtern.

   Gutes Ergebnis

   Die Navigation ist auf kleinen Bildschirmen untereinander angeordnet, ab 768 px per Media Query nebeneinander. Bilder haben 'max-width: 100%', die Spalten des Leistungsangebots stapeln sich unter 600 px. In den DevTools gibt es bei keiner Breite mehr einen horizontalen Scrollbalken.

   Mobile FirstMedia QueriesBreakpointsViewport-Meta-Tagflexible Bilder
4. 4

   Seiten zugänglich und schnell machen

   Kompetenz D

   Bilder bekommen aussagekräftige alt-Texte, Farben haben genug Kontrast, Formularfelder sind mit label verbunden und die Seite ist mit der Tastatur bedienbar. Bilder komprimierst du auf eine sinnvolle Grösse, damit die Seite auch im Zug mit schwachem Netz schnell lädt.

   Situation

   Das Regionalspital Emmental will eine Infoseite für Besuchende. Viele davon sind älter, einige nutzen einen Screenreader. Die Fotos vom Fotografen sind je 6 MB gross.

   Deine Aufgabe

   Prüfe die Seite auf Zugänglichkeit und Ladezeit und behebe die wichtigsten Mängel.

   Gutes Ergebnis

   Die Fotos sind auf 1600 px Breite skaliert und als WebP gespeichert (je ca. 180 KB). Alle Bilder haben alt-Texte wie 'Haupteingang mit Besucherparkplatz', der graue Text auf weissem Grund wurde auf ein Kontrastverhältnis über 4.5:1 abgedunkelt. Lighthouse zeigt bei Barrierefreiheit 96 statt 71 Punkte.

   alt-TextFarbkontrast (WCAG)Tastaturbedienunglabel und forBildformate (WebP, SVG)Ladezeit
5. 5

   Ein benutzerfreundliches Kontaktformular erstellen

   Kompetenz D

   Du baust Formulare mit passenden Eingabetypen (email, tel, date), Pflichtfeldern und klaren Beschriftungen. Die Browser-Validierung fängt grobe Fehler ab, und du weisst, dass die Daten für den Versand einen Dienst oder ein Backend brauchen.

   Situation

   Die Velowerkstatt Pedalo in Winterthur möchte, dass Kundschaft online einen Servicetermin anfragen kann.

   Deine Aufgabe

   Erstelle ein Formular für Name, E-Mail, Telefon, Wunschdatum, Art des Services und eine Nachricht.

   Gutes Ergebnis

   Ein form mit input type='email' und type='date' (min auf das heutige Datum gesetzt), einem select für 'Kleiner Service CHF 89 / Grosser Service CHF 159', required bei Name und E-Mail und einem Hinweis zur Datenschutzerklärung. Der Versand läuft über einen Formulardienst wie Formspree.

   form, input, labelEingabetypenrequired, patternGET vs. POSTFormulardienst
6. 6

   Die Website auf einem Webserver veröffentlichen

   Kompetenz E

   Du lädst die Dateien per SFTP oder Git-Deployment auf einen Hosting-Anbieter, verbindest eine Domain über DNS-Einträge und sorgst dafür, dass die Seite nur über HTTPS erreichbar ist. Du weisst, welche Angaben in der Schweiz auf eine geschäftliche Website gehören.

   Situation

   Die Bäckerei Moser hat die Domain baeckerei-moser.ch bei Infomaniak registriert und ein kleines Webhosting für ca. CHF 6 pro Monat gebucht.

   Deine Aufgabe

   Bring die fertige Website online, sodass sie unter https://baeckerei-moser.ch erreichbar ist.

   Gutes Ergebnis

   Die Dateien liegen per SFTP im Verzeichnis 'web' des Hostings, die Domain zeigt mit einem A-Record auf den Server, ein Let's-Encrypt-Zertifikat ist aktiv und http leitet auf https um. Auf der Seite gibt es ein Impressum und eine kurze Datenschutzerklärung nach revDSG.

   WebhostingSFTPDomain und DNS (A-Record, CNAME)HTTPS / TLS-ZertifikatImpressum und Datenschutzerklärung

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Aylin ist im 1. Lehrjahr als Informatikerin Applikationsentwicklung bei der Codehaus Biel AG, einem Softwarehaus mit 30 Mitarbeitenden. Ein kleines Bäckerei-Café in Nidau hat bisher nur eine Facebook-Seite und möchte endlich eine eigene Website mit Angebot, Öffnungszeiten und Catering-Anfrage. Ihre Berufsbildnerin überträgt Aylin den Auftrag als erstes eigenes Kundenprojekt.

1. Kapitel 1

   Inhalt zuerst

   Die Inhaberin schickt ihre Texte per E-Mail: Angebot, Öffnungszeiten, Catering und Kontakt. Aylin baut daraus vier Seiten mit header, nav, main und footer und stellt die Öffnungszeiten als Tabelle dar. Der W3C Validator meldet sieben Fehler, darunter fehlende alt-Attribute und Listeneinträge ohne ul. Die Browser-Erweiterung HeadingsMap zeigt zusätzlich zwei h1-Überschriften auf derselben Seite. Nach der Korrektur ist die Struktur sauber, obwohl noch keine einzige CSS-Zeile existiert.

   Ziel 1

2. Kapitel 2

   Farben aus dem Logo

   Aylin übernimmt Brotbraun und Creme aus dem Logo als CSS-Variablen und baut die Navigation mit Flexbox. Die Angebotskarten sind jedoch unterschiedlich hoch, und die Abstände springen von Karte zu Karte. In den DevTools sieht sie, dass die Höhe vom Textumfang abhängt und einzelne Absätze eigene Margins mitbringen. Mit einem Grid-Layout, gap und einheitlichen Abständen stehen alle Karten bündig nebeneinander.

   Ziel 2

3. Kapitel 3

   Auf dem Handy der Chefin

   Die Inhaberin öffnet die Testversion auf ihrem iPhone und sieht winzige Schrift und eine Tabelle, die über den Rand hinausragt. Aylin stellt fest, dass der Viewport-Meta-Tag fehlt, und baut die Seite nach Mobile First mit Breakpoints bei 600 und 960 Pixel um. Die Öffnungszeiten erscheinen auf schmalen Bildschirmen jetzt als Liste statt als Tabelle. Im Gerätemodus der DevTools prüft sie fünf verschiedene Breiten.

   Ziel 3

4. Kapitel 4

   Die Catering-Anfrage

   Für Catering-Anfragen baut Aylin ein Formular mit Datum, Personenzahl ab 10, Name und E-Mail, jeweils mit label, passendem Eingabetyp und required. Lighthouse zeigt danach nur 54 Punkte bei der Performance, weil die Fotos je 4 MB gross sind. Mit Squoosh wandelt sie die Bilder in WebP um und kommt auf rund 180 KB pro Bild. Nach einer Kontrastanpassung stehen Performance bei 93 und Barrierefreiheit bei 96 Punkten, und die Seite lässt sich vollständig per Tab-Taste bedienen.

   Ziel 5Ziel 4

5. Kapitel 5

   Live unter der eigenen Domain

   Zuerst stellt Aylin eine Testversion über GitHub Pages online, damit die Inhaberin sie auf dem Handy prüfen kann. Danach lädt sie die Website per SFTP zu Infomaniak hoch, doch die Domain zeigt noch zwei Stunden später die alte Baustellenseite. Mit nslookup findet sie einen veralteten A-Record, den sie korrigiert. Zum Schluss aktiviert sie HTTPS mit Let's Encrypt und ergänzt Impressum und Datenschutzerklärung.

   Ziel 6

1. 1

   HTML-Grundgerüst und Struktur

   ca. 3 Std.

   Du lernst, wie ein HTML-Dokument aufgebaut ist, und strukturierst Inhalte, ohne dich um das Aussehen zu kümmern.

   • Eine Vereinswebsite (Turnverein, Musikgesellschaft) als reinen Text skizzieren und in HTML umsetzen
   • Die Seite mit dem W3C-Validator prüfen und alle Fehler beheben
   • Mit der Erweiterung 'HeadingsMap' die Überschriftenhierarchie kontrollieren

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   Gestalten mit CSS

   ca. 4 Std.

   Du verbindest eine externe CSS-Datei und lernst Selektoren, Box-Modell und Typografie kennen. Danach baust du die ersten Layouts mit Flexbox.

   • Farben und Schriften als CSS-Variablen definieren
   • Im DevTools-Tab 'Computed' Margin, Border und Padding einzelner Elemente untersuchen
   • Eine Navigation und eine Kartenreihe mit Flexbox umsetzen

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Grid und Responsive Design

   ca. 4 Std.

   Du baust ein Seitenlayout mit CSS Grid und machst es mit Media Queries fit für alle Bildschirmgrössen.

   • Ein Layout mit Kopf, Seitenleiste, Inhalt und Fuss in Grid umsetzen
   • Die Seite Mobile First umbauen und zwei Breakpoints festlegen
   • Im Gerätemodus der DevTools auf 360, 768 und 1280 px testen

   Trainiert Kompetenz B2C1C2

   Lernziel23

4. 4

   Formulare, Bilder und Zugänglichkeit

   ca. 4 Std.

   Du ergänzt ein Kontaktformular, optimierst Bilder und prüfst die Seite auf Barrierefreiheit.

   • Ein Anfrageformular mit fünf Feldern und Browser-Validierung bauen
   • Bilder mit Squoosh skalieren und als WebP exportieren
   • Die ganze Seite nur mit der Tab-Taste bedienen und Kontraste mit dem WebAIM Contrast Checker prüfen

   Trainiert Kompetenz D1D2

   Lernziel54

5. 5

   Online stellen

   ca. 3 Std.

   Du veröffentlichst die Website zuerst kostenlos über GitHub Pages und spielst danach den Ablauf mit Hosting, Domain und DNS durch.

   • Projekt in ein Git-Repository legen und über GitHub Pages veröffentlichen
   • Mit 'nslookup' oder dig die DNS-Einträge einer bekannten .ch-Domain abfragen
   • Impressum und Datenschutzhinweis für die eigene Seite schreiben

   Trainiert Kompetenz E1E2

   Lernziel6

6. 6

   Abschlussprojekt: Website für einen Kleinbetrieb

   ca. 6 Std.

   Du setzt eine drei- bis vierseitige Website für ein fiktives oder echtes KMU von der Skizze bis zur Veröffentlichung um.

   • Wireframe auf Papier oder in Figma skizzieren
   • Umsetzen, mit Lighthouse prüfen und mindestens 90 Punkte bei Barrierefreiheit erreichen
   • Die Seite einer Kollegin auf dem eigenen Handy zeigen und Feedback einarbeiten

   Trainiert Kompetenz A3C3D3E3

   Lernziel1346

HTML

Auszeichnungssprache, die den Inhalt und die Struktur einer Webseite beschreibt.

CSS

Sprache für die Gestaltung von Webseiten: Farben, Schriften, Abstände und Layout.

Semantisches HTML

HTML-Elemente nach ihrer Bedeutung einsetzen, nicht nach ihrem Aussehen.

Media Query

CSS-Regel, die nur unter bestimmten Bedingungen gilt, z.B. ab einer Bildschirmbreite von 768 px.

Mobile First

Vorgehen, bei dem zuerst die Darstellung für kleine Bildschirme gebaut und danach für grössere erweitert wird.

Barrierefreiheit

Gestaltung, die auch Menschen mit Seh-, Hör- oder motorischen Einschränkungen die Nutzung ermöglicht.

DNS

Verzeichnisdienst, der Domainnamen in IP-Adressen übersetzt.

Webhosting

Gemieteter Speicherplatz auf einem Webserver, über den eine Website im Internet erreichbar ist.

HTTPS

Verschlüsselte Variante von HTTP, abgesichert durch ein TLS-Zertifikat.

Passende Module