Webgrundlagen | designidee.ch

01 · Grundlagen

«Webbasics 1.0»

Wie das World Wide Web entstand und wie es grundsätzlich funktioniert.

Wichtigste Daten / Facts

Fact 1

Das World Wide Web – kurz Web oder WWW – ist ein über das Internet abrufbares Hypertext-System. Erfunden wurde es von Tim Berners-Lee am CERN in Genf.

Am 30. April 1993 wurde das World Wide Web weltweit zur allgemeinen Benutzung freigegeben.

Fact 2

Der Benutzer kann mit einem Webbrowser Hyperlinks in einem Dokument folgen. Diese führen zu weiteren Dokumenten – unabhängig davon, ob sie sich auf demselben Webserver oder auf einem anderen Server befinden.

Dadurch entsteht ein weltweites Netz aus Webseiten.

Fact 3

Das WWW wird im allgemeinen Sprachgebrauch oft mit dem Internet gleichgesetzt. Das Web ist jedoch jünger und lediglich eine mögliche Nutzung des Internets.

Weitere Internet-Dienste sind beispielsweise E-Mail und FTP.

Die Anfänge des Webs

Browser & Webgeschichte

Merke: Das Web ist nur ein Dienst innerhalb des Internets. Internet und World Wide Web sind also nicht dasselbe.

02 · Adressen

«Protokolle und Domains»

Wie sich eine Webadresse zusammensetzt.

Die URL

Jedes Dokument im Web besitzt eine genaue Adresse: die URL (Uniform Resource Locator).

Sie setzt sich unter anderem aus Protokoll, Domain und Pfad zusammen.

Protokoll & Domain

Protokolle

Das Netzwerkprotokoll steuert die Kommunikation zwischen Rechnern.

Im Web begegnen wir beispielsweise:

HTTP / HTTPS
FTP
SMTP
POP3
IMAP

Top-Level-Domain

Die Endung einer Domain kann ein Land bezeichnen, beispielsweise .ch oder .de, oder eine allgemeine Kategorie wie .com, .org, .net oder .edu.

Weitere Bestandteile

Subdomain

Eine Domain kann mit Subdomains erweitert werden. Diese stehen vor der Hauptdomain und werden durch einen Punkt getrennt.

Beispiel: downloads.webedu.ch

Query

Ein Query String beginnt mit einem Fragezeichen ? und überträgt zusätzliche Informationen.

Beispiel: ?sprache=de

Anker

Ein Anker beginnt mit # und verweist auf eine bestimmte Position innerhalb eines HTML-Dokuments.

Genau dieses Prinzip verwenden wir auch in diesem Inhaltsverzeichnis.

03 · Domain

«Pick your domain»

Dein Name ist Geld wert.

Der Domainname

Eines der wichtigsten Erkennungsmerkmale einer Firma, Organisation oder eines Produktes ist der Domainname.

Domainnamen können zwar auch Umlaute enthalten, diese sollte man jedoch möglichst vermeiden.

Die Bedeutung eines guten Domainnamens ist so gross, dass bei Neugründungen teilweise sogar der Firmenname nach der verfügbaren Domain gewählt wird.

Domain reservieren

Eine Schweizer .ch-Domain kann bei zahlreichen Hosting-Providern registriert werden.

Internationale Domains wie .com, .net oder .org können ebenfalls über Schweizer oder internationale Anbieter registriert werden.

Tipps

Domainname mit oder ohne Bindestrich?
Nicht zu lange Namen verwenden
Abkürzungen nur wenn sinnvoll
Sonderzeichen möglichst vermeiden
Hauptzielgruppe beachten
Aussagekräftige Namen bevorzugen
Weiterleitungen und Aliase sind möglich

Aufgaben

Recherche:

Wo können Domainnamen registriert werden?
Vergleiche die Preise verschiedener Anbieter.
Suche Varianten für einen eigenen aussagekräftigen Domainnamen.
Prüfe verschiedene Domainendungen.

04 · Hosting

«Wo ist dein Host?»

Ein Heim für deine Website.

Hosting / Provider

Damit eine Website dauerhaft im Internet verfügbar ist, benötigt sie einen Hosting-Provider.

Dieser stellt Speicherplatz sowie technische Einrichtungen wie Datenbanken, E-Mail, PHP und weitere Werkzeuge bereit.

Was ist wichtig?

Neben dem Preis spielen vor allem folgende Punkte eine Rolle:

Speicherplatz
Anzahl Domains
E-Mail-Konten
Datenbanken
verfügbare PHP-Versionen
SSL-Zertifikate
Backupmöglichkeiten
Support

Begrenzte Datenbanken oder E-Mail-Konten sind bei modernen Hostingangeboten häufig nicht mehr sinnvoll.

Hosting einrichten

Domainname reservieren
Hosting für den Domainnamen einrichten
DNS-Einträge beziehungsweise Nameserver hinterlegen
E-Mail, FTP und Datenbanken einrichten
SSL-/TLS-Zertifikat installieren
benötigte PHP-Version einstellen

Aufgabe: Suche mindestens drei Hosting-Angebote und vergleiche:

Preis
Speicherplatz
Domainnamen
E-Mail-Adressen
Datenbanken

05 · Einstieg Dateigrundlagen

«Dateigrundlagen»

Die Basis jeder Website und Webapplikation.

Direkt im Hosting arbeiten

Eine Website liegt auf einem Hosting-Provider. Über ein Administrationssystem wie Plesk können Dateien, Datenbanken, E-Mail-Adressen und weitere Dienste verwaltet werden.

Dateien & Ordner

Dateiverwaltung

Die erste Anlaufstelle ist das Verzeichnis Dateien. Dort befindet sich die Ordnerstruktur der Website.

index.html / index.php

Die Startseite eines Verzeichnisses trägt üblicherweise den Dateinamen index.html oder index.php.

Bitte Ordnung halten:
Für unsere Klasse verwenden wir ein eigenes Verzeichnis. Dateien und Bilder werden sauber strukturiert abgelegt.

Absolut oder relativ?

Pfade zu Dateien wie Bilder oder Dokumente können absolut sein oder relativ https://www.webedu.ch/lehrplan.pdf (absolut) ../dokumente/lehrplan.pdf (relativ)

Verwendung:
Innerhalb eines Webprojekts solltest du relative pfade zu deinen Verzeichnissen und Dateien verwenden. Bei Verlinkung auf externe Dokumente und Bilder (auf einem anderen Hosting oder Webserver) sicher absolute. Externe Frameworks (wie Google Schriften, JavaScript-Libraries, usw.) werden absolut eingebunden.

Achtung Fallen!

Bei Dateinamen und Webadressen unbedingt auf eine saubere Schreibweise achten:

Klein-/Grossschreibung beachten
möglichst keine Sonderzeichen
keine Umlaute in Dateinamen
keine Leerzeichen

Ein Leerzeichen wird in URLs beispielsweise häufig als %20 dargestellt.

Dies macht Probleme:
Bitte achte immer auf die Benennung und Schreibweise deiner Dateien...

Hände hygiene.jpg (Umlaute, Leerzeichen und Gross/KleinSchreibung)
haende_hygiene.jpg (mit Underline getrennt, umlaute umgeschrieben)

06 · HTML

«HTML-Basics?»

Die Grundlagen jeder Website.

HTML-Seitenbeschreibungssprache

Eine Website benötigt eine Struktur, damit ein Browser weiss, wo sich welche Informationen befinden.

Mit HTML-Tags werden beispielsweise folgende Elemente definiert:

Überschriften
Absätze
Bilder
Links
Tabellen
Videos
Audio
Formulare

HTML bedeutet HyperText Markup Language.

HTML-Grundgerüst

Jede HTML-Seite besitzt bestimmte Grundelemente.

<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Meine Website</title>
</head>

<body>

    Inhalt der Website

</body>

</html>

Vereinfacht besteht eine Website aus <head> und <body>.

HTML im Browser

Mit den Entwicklerwerkzeugen eines Browsers lässt sich der HTML-Code einer Website direkt untersuchen (rechte Maustaste oder F11).

07 · HTML-Cheatsheet

«HTML-Basics?»

Die Grundlagen jeder Website.

HTML-Seitenbeschreibungssprache

Eine Website benötigt eine Struktur, damit ein Browser weiss, wo sich welche Informationen befinden.

Mit HTML-Tags werden beispielsweise folgende Elemente definiert:

Überschriften
Absätze
Bilder
Links
Tabellen
Videos
Audio
Formulare

HTML bedeutet HyperText Markup Language.

HTML-Cheatsheet

Jede HTML-Seite besitzt bestimmte Grundelemente.

Was macht was?

Folgende Webtechniken werden wir lernen.

Wichtig: HTML beschreibt die Struktur und Bedeutung der Inhalte. Für die Gestaltung verwenden wir CSS, für Interaktionen unter anderem JavaScript.