Allgemeines zu Webseiten
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).
Kurz per Abbildung von Wikipedia: client-server-model erklärt, was passiert, wenn man eine Webseite aufruft, etwa sbb.ch.
Dann erklärt, dass jede® 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.
HTML
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 steht für Hypertext Markup Language, übersetzt etwa Auszeichnungssprache für Text mit (Hyper-)Links
CSS
Für die graphische Gestaltung (Schriftarten, Farben, Positionierung) wird die Sprache CSS verwendet.
- CSS bedeutet Cascading Style Sheets, übersetzt etwa Gestufte Gestaltungsbögen
Hier kann man sehen, wie derselbe Inhalt (= dieselbe HTML-Datei) in verschiedenen Stilen (alias CSS-Dateien) aussieht:
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.
Statische vs. dynamische Webseiten
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.1)
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.)