Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:snr:informatik:glf23:webseiten-allgemein [2024/01/09 11:33] – Olaf Schnürer
+++ lehrkraefte:snr:informatik:glf23:webseiten-allgemein [2025/05/05 13:41] (current) – [Trennung von Form und Inhalt] Olaf Schnürer
@@ Line 1: / Line 1: @@
+~~NOTOC~~
+====== Allgemeines zu Webseiten ======
+<WRAP center round todo>
+Gemeinsam, zu Beginn: Geh auf eine beliebige Webseite und analysiere/inspiziere sie (in vielen Browsern geht das per ''F12'' = ''fn''+''f12'' (alternativ per rechter Maustaste und "Inspect"); dann im Menü auf ''Elements'' (in Edge, soweit ich mich erinnere) oder ''Inspector'' (in Firefox) klicken, um die HTML-Datei zu sehen; links oben im Analysebereich gibt es einen Icon ("Pick an element from the page" o.ä. erscheint, wenn die Maus darüber schwebt); diesen Anklicken und dann die Maus über die Webseite bewegen: Sie besteht aus Boxen! Klickt man eine Box an, so wird der entsprechende Code im HTML-File angezeigt).
+</WRAP>
+<WRAP center round box 60%>
+Kurz per
+{{https://en.wikipedia.org/wiki/Client%E2%80%93server_model#/media/File:Client-server-model.svg|Abbildung von Wikipedia: client-server-model}}
+erklärt, was passiert, wenn man eine Webseite aufruft, etwa sbb.ch.
+Dann erklärt, dass jeder Schüler auf dem Server im Tech-Lab ein Verzeichnis bekommt. Darin werden sein:
+  * Datei ''index.html'': Das ist der Standardname für die "Startseite".
+  * weitere HTML-Dateien
+  * CSS-Dateien
+  * Fotos, Audios, Videos, pdfs etc.
+  * (evtl., aber nicht verlangt: JavaScript-Dateien)
+Deswegen bitte im html-Ordner auf dem eigenen Computer für jedes neue Webprojekt eine **neues** Verzeichnis anlegen. Dann kann man den Inhalt leicht auf den Tech-Lab-Server kopieren.
+</WRAP>
+===== HTML =====
+<WRAP center round info>
+HTML ist die Standard-Sprache zur Beschreibung von Webseiten; genauer wird damit der Inhalt von Webseiten samt gewisser struktureller Zusatzinformationen angegeben (z. B. "dies ist ein Textabschnitt"; "dies ist eine Überschrift"; "dies ist ein Link"; "dies ist eine Liste").
+<!-- HTML-Dateien sind reine Textdateien, also Folgen von ASCII- oder Unicode-Zeichen.-->
+  * HTML steht für //Hypertext Markup Language//, übersetzt etwa //Auszeichnungssprache für Text mit (Hyper-)Links//
+</WRAP>
+===== CSS =====
+<WRAP center round info>
+Für die graphische Gestaltung (Schriftarten, Farben, Positionierung) wird die Sprache CSS verwendet.
+<!-- HTML-Dateien sind reine Textdateien, also Folgen von ASCII- oder Unicode-Zeichen.-->
+  * CSS bedeutet //Cascading Style Sheets//, übersetzt etwa //Gestufte Gestaltungsbögen//
+<!-- Was diese Begriffe bedeuten, wird später erklärt.-->
+Hier kann man sehen, wie derselbe Inhalt (= dieselbe HTML-Datei) in verschiedenen Stilen (alias CSS-Dateien) aussieht:
+https://www.w3schools.com/whatis/demo_css.htm
+</WRAP>
+<WRAP center round info>
+Wenn man im Internet surft, bittet der Web-Browser den gewünschten Web-Server (etwa einen Server der SBB oder der Kanti) um eine HTML-Datei und zeigt diese dem Benutzer nach Erhalt an. Meist wird zusätzlich noch eine CSS-Datei übermittelt, die angibt, wie der Inhalt der HTML-Datei graphisch dargestellt werden soll.
+</WRAP>
+===== Statische vs. dynamische Webseiten =====
+<WRAP center round info>
+Mit HTML und CSS kann man //statische// Webseiten erstellen (mit ein wenig Interaktion). Wenn man wirklich //dynamische//, also interaktive Webseiten erstellen möchte, die auf Eingaben des Benutzers reagieren, kann man dafür beispielsweise JavaScript (oder PHP, ...) verwenden.((JavaScript läuft auf dem Rechner des Benutzers, PHP auf dem Server des Webseitenanbieters.))
+Im Rahmen des Webprojekts beschränken wir uns auf statische Webseiten, also auf Webseiten, die mit HTML und CSS geschrieben sind.
+(Es freut mich aber natürlich, wenn jemand besonders schnell ist und auch JavaScript verwendet.)
+</WRAP>
+===== Trennung von Form und Inhalt =====
+<WRAP center round info>
+In klassischen Medien (Bücher, Zeitungen, Zeitschriften) sind Inhalt und Form vom Verlag fest vorgegeben und nach Erstellung der Druckvorlage untrennbar verbunden (klassisch hat ein Schriftsetzer die Druckvorlage erstellt).
+Heutzutage liest man Bücher oder Artikel oft auf elektronischen Geräten (Handy, Laptop, E-Reader). Dort kann man oft die Form (etwa Schriftart, Schriftgrösse, Farben) relativ leicht den eigenen Wünschen anpassen, obwohl der Inhalt derselbe ist.
+Auch sollte heutzutage der Inhalt adaptiv sein in dem Sinne, dass er auf verschiedenen Medien korrekt angezeigt werden kann (Hoch- oder Querformat auf dem Handy oder anderen Anzeigegeräten mit unterschiedlichen Abmessungen).
+Auch dafür ist es sinnvoll, den Inhalt von der Form zu trennen.
+Dieses Gesttaltungsprinzip heisst Trennung von Inhalt und Form.
+Bei der Webprogrammierung wird
+  * der Inhalt in HTML und
+  * die Form in CSS beschrieben.
+</WRAP>