Webprogrammierung — 1. Lektion

Einführung

Beim Surfen im Internet werden mit einem Browser Dateien von einem Server angefordert und dargestellt. Daher nennt man die Seite auch Client. Üblicherweise wird im Browser eine URL angegeben, die verschiedene Bestandteile hat: welches Protokoll zur Datenübertragung verwendet werden soll (z.B. http oder https), den Namen des angesprochenen Servers und den Namen der angeforderten Datei. Wenn etwas davon nicht explizit angegeben wird, werden Standardwerte genommen.

Zum Beschreiben, was wie im Browser dargestellt werden soll, dienen verschiedene Sprachen. Wir werden hier nacheinander eine Einführung in die folgenden Sprachen geben.

Clientseitig

HTML

Hyper Text Markup Language – Sprache zum Strukturieren des darzustellenden Inhaltes (Abschnitte, Überschriften, Links, Listen, Tabellen u.a.)

CSS

Cascading Style Sheets – Sprache zum Gestalten des Aussehens und der Platzierung des Inhaltes

JavaScript

Sprache zum Programmieren von Webseiten, so dass Inhalte abhängig von der Umgebung (z.B. IP-Adresse des Besuchers, Uhrzeit des Clientrechners) dargestellt werden oder sich dynamisch (z.B. durch Interaktion mit dem Besucher der Webseite) ändern

Serverseitig

PHP

Sprache zum Programmieren eines Webservers, so dass Inhalte erst beim Anfordern einer Seite erstellt werden (z.B. Daten aus Datenbank lesen, Nutzereingaben verarbeiten u.a.)

Erstellen einer Webseite

Folgenden Text in einem Editor eingeben, unter dem Namen index.html speichern, dann mit einem Browser öffnen!
Notepad++: unter dem Menü-Punkt „Kodierung“ den Eintrag „UTF-8“ auswählen, vom Menü-Punkt „Datei“ den Eintrag „Speichern unter...“ auswählen, dort „Hyper Text Markup Language file“ auswählen und als Dateinamen index.html eingeben

Formatierung erscheint nicht wie gewollt → Strukturierung muss explizit mitgeteilt werden
Elemente des Dokumentes werden durch Wörter der Sprache HTML ausgezeichnet, durch sogenannte HTML-Tags (tag, engl., = Kennzeichnung)

Grundgerüst einer Webseite

Die „erste“ Seite sollte in einer Datei namens index.html stehen. Alle weiteren sollten in Dateien abgespeichert werden, die ebenfalls die Endung html haben.

<!DOCTYPE html> <!-- Erklärung des Dokument-Typs und der verwendeten Sprachdefinition -->
<html lang=de> <!-- Anfang der Webseiten-Beschreibung -->
¦
  <head> <!-- Anfang der Daten über die Webseite -->
    <title> ... </title> <!-- Fenstertitel -->
    <meta charset=utf-8> <!-- Zeichenkodierung -->
  </head> <!-- Ende der Daten über die Webseite -->
  <body> <!-- Anfang des Inhaltes -->
  ¦
    <h1> ... </h1> <!-- Überschrift -->
    <p> ... </p> <!-- Absatz (engl. paragraph) -->
  </body> <!-- Ende des Inhaltes -->
</html> <!-- Ende der Webseiten-Beschreibung -->

HTML-Texte validieren

Browser sind unterschiedlich „fehlertolerant“ → besser Seiten erstellen, die der Sprache entsprechen

Direkteingabe von Texten: https://validator.w3.org/#validate_by_input

Überschriften

Sechs Abstufungen, sollten auch in dieser Reihenfolge ohne Sprünge verwendet werden, Aussehen kann später verändert werden

Horizontale und vertikale Abstände

Leerzeichen und Zeilenumbrüche nur zur Trennung von Wörtern; größerer horizontaler Abstand mittels &nbsp;, Zeilenumbruch mit <br>

Verweise auf andere Stellen

Durch einen Klick kann man zu anderen Stellen im selben Dokument oder auf andere Seiten gelangen, ohne sich „hinsuchen“ zu müssen → Hyperlinks

Sprungziel (Anchor, engl., = Anker) mit a-Tag festlegen
Attribut id angeben, um eine Stelle zu bezeichnen (eindeutig auf der Seite)
Attribut href (hyper reference) angeben, um auf ein Ziel zu referenzieren
Attribut target mit Wert _blank belegen, um Seite in einem neuen Fenster zu öffnen

Weitere Arten

Texte hervorheben

Fettdruck

Kursivdruck

Verhalten von <strong> und <em> ist nicht bei jedem Browser gleich, aber vom Nutzer definierbar
Verhalten von <b> und <i> sollten nicht verändert werden
Zum Überlagern von Wirkungen dürfen Tags verschachtelt, aber nicht kreuzweise verschränkt werden!

Sonderzeichen

Jedes Zeichen der Unicode-Tabelle kann im Editor durch die Folge
Und-Zeichen (&), Doppelkreuz (#), Unicode-Zahlenwert des Zeichens und Semikolon (;)
dargestellt werden. Es wird vom Browser als das gewünschte Zeichen angezeigt.
Unicode-Tabelle: http://www.unicode-table.com/de/
Für manche Zeichen gibt es auch „Namen“.