Die Entwicklungsumgebung

Die richtige Entwicklungsumgebung zu wählen, stellt einen ganz wesentlichen Aspekt eines jeden Projektes dar. Tatsächlich gibt es nicht diese eine perfekte Umgebung, sondern vielmehr eine passende zu jedem Projekt. Für die HTML Tutorials bedarf es keiner Versionskontrolle, noch einer automatischen FTP-Anbindung. Aus diesem Grund genügt der Notepad++-Editor. Unter folgendem Link, kann er heruntergeladen und installiert werden:

https://notepad-plus-plus.org/download/

Notepad++ ist einer der beliebtesten Entwicklungsumgebungen für kleine bis mittelgroße Projekte, da er nicht nur Standardfunktionen, wie die farbliche Kennzeichnung von Codesegmenten oder einer einstellbaren Formatierung des Quellcodes hat, sondern auch eine Vielzahl an Plugins, mit denen der Editor problemlos zu einem starken Programm erweitert werden kann, das auf die eigenen Bedürfnisse zugeschnitten ist. Folgende maßgebliche Funktionen enthält Notepad++:

  • Einstellbare Codefärbung (Code highlighting)
  • Einstellbares zusammenklappen des Codes (Code folding)
  • Suche durch Regular Expressions
  • Automatische Vervollständigung von Codesegmenten (Intellisense)
  • Unterstützung von mehreren Sprachen

Die Begriffe Homepage, Webseite und Website

Oftmals wird bei Gesprächen um das World Wide Web mit Wörtern um sich geworfen, die leider nicht immer stimmend sind. Tatsächlich versteht man aber meistens aus dem Kontext heraus, was gemeint ist. Dennoch müssen die drei folgenden Wörter sinnlich voneinander getrennt werden:

Unterschied: Homepage, Webseite, Website - CodingLab

Mit dem Begriff Homepage kommen die meisten Menschen durcheinander. Dabei liegt die Bedeutung bereits in der Übersetzung. Aus dem Englischen "home" (zu Hause) und "page" (Seite) wird "homepage" (Hausseite bzw. Startseite). Man ist also auf jeder Domain "zu Hause" angekommen, wenn man auf die Startseite einer Domain gelangt. Folglich hat jede Website auch nur eine Homepage.

Eine Webseite beschreibt ein einzelnes Webdokument. Hierbei kann es sich um eine direkte Datei mit der Endung .html handeln oder um Dokumente, die in dynamischen Websprachen geschrieben sind (.php, .aspx), welche meistens in einer .html-Datei resultieren. Wusstest Du, dass Du Dir diesen Text gerade auf einer Webseite anschaust?

Das Wort Website kann auch mit den Wörtern Internetpräsenz bzw. Webpräsenz übersetzt werden. Mit diesen Synonymen wird die Bedeutung des Wortes relativ klar. Mit "Website" meint man die Gesamtheit aller Webseiten einer Domain.

Wie kommt die Website auf den Bildschirm?

Um im Internet zu surfen benutzen die meisten Menschen einen sogenannten Webbrowser. Mithilfe eines solchen Programms, kann man sich Webseiten anzeigen lassen und heutzutage noch viel mehr. Was passiert, wenn Du in deinem Browser den Link www.Coding-Lab.de anklickst, soll hier in nicht allzu großem Detail erläutert werden:

  1. Für den Menschen leicht zu merken, sind selbstverständlich einfache Wörter, wie z. B. Coding-Lab. Deswegen ist es erlaubt Webseiten mittels dieser sogenannten Domains anzusteuern. Bei den heutigen Browsern reicht es aus, den richtigen Domainnamen inklusive der richtigen Domainendung (.de) anzugeben.
  2. Der Browser selber braucht allerdings eine IP-Adresse, die er auf einem bestimmten Port ansprechen will. Dafür schickt er zunächst die Domain coding-lab.de an den Nameserver (DNS-Server) des Providers. Dieser löst die Domain in die IP-Adresse des Zielrechners auf, denn auf irgendeinem Rechner, muss die Webseite ja liegen.
  3. Als nächstes versucht der Browser die IP-Adresse auf dem Port 80 oder Port 443 anzusprechen. Einen Port, kann man sich wie eine von tausenden Türen für einen einzigen Raum vorstellen. Aber nur ein paar dieser Türen sind für einen bestimmten Zweck geöffnet. Für den Zweck "Anfrage einer Webseite" mittels HTTP ist standardmäßig der Port 80 festgelegt. Für die Anfrage mittels HTTPS ist der Port 443 vorbelegt.
  4. Der Zielrechner bekommt nun die Anfrage und hat die Möglichkeit diverse Aufgaben zu tätigen. Beispielsweise können Sicherheitschecks durchgeführt werden, ob der Anfragensteller überhaupt die Berechtigung hat, die Webseite anzufragen. Weiterhin wird geprüft, ob ein bestimmtes Dokument direkt angefragt wurde (mit Endung) oder ein Ordner. In letztem Fall wird nach vorgegebenen Dokumenten gesucht (dazu weiter unten mehr). Wurde ein Dokument angefragt, dass in einer dynamischen Websprache programmiert wurde (PHP oder ASP.NET) wird diese jetzt auf dem Server ausgeführt. Die daraus resultierende HTML-Datei wird zurückgeschickt.
  5. Als letztes parsed der Browser die HTML-Datei und zeigt diese am Bildschirm an. Dabei bemerkt er, ob er noch Bilder und nachzuladende Dateien benötigt (Javascript, Stylesheets, etc.) und fragt diese erneut an.

Unterschied der Dateiendungen .html und .htm

Beide Dateiendungen beziehen sich auf ein Dokument, dass mit der Auszeichnungssprache HTML strukturiert ist. Früher (zu Zeiten von DOS und Co.) war es jedoch nicht erlaubt Endungen mit mehr als drei Zeichen zu benutzen. Aus diesem Grund haben Webdokumente, die aus früheren Zeiten stammen noch die Endung .htm und Dokumente aus der heutigen Zeit .html.

Da Webbrowser HTML-Parser enthalten, die diese Dateien verarbeiten können, ist es vollkommen egal, ob es sich um ein HTML-Dokument handelt, dass auf dem Rechner zu Hause liegt oder auf einem Server im Internet.

Warum ist der Standardname für Webdokumente index ?

Viele Dokumente im Internet tragen den Namen index.html. Dieser Trend folgt allerdings keiner Regel, sondern ist vielmehr eine Art Konvention. Um diese Konvention zu verstehen, muss man zwischen zwei grundlegenden Arten der Browser-Anfrage unterscheiden:

  • Anfrage eines spezifischen Webdokuments mit Namensangabe:
    • www.Coding-Lab.de/index.php
  • Anfrage eines Webdokuments ohne Namensangabe:
    • www.Coding-Lab.de/
BeschreibungBeispiel
Anfrage eines spezifischen Webdokuments mit Namensangabewww.Coding-Lab.de/index.php
Anfrage eines Webdokuments ohne Namensangabewww.Coding-Lab.de/

Gibt man den ersten Link in die Adressleiste des Browser ein, so stellt der Browser eine Anfrage an den Server und bezieht sich auf genau dieses Dokument: index.php. Der Nachteil dieser Variante ist, dass dieses Dokument auf dem Server eventuell gar nicht mehr existiert. Dies kann daraus resultieren, dass die Datei auf dem Webspace verschoben oder gelöscht wurde.

Mit dem zweiten Link stellt der Browser es dem Server sozusagen frei, welche Datei er zurückgibt, da er lediglich nach einem Ordner (in diesem Fall der obligatorische root-Ordner) auf dem Server fragt. Nun kommt der ganz entscheidende Aspekt: Der Server sucht anhand einer hierarchisch angeordneten Liste verschiedener Standardnamen nach der richtigen Datei, die zurückgegeben werden soll. Diese Liste kann selber konfiguriert werden, wobei nicht immer index.html oder index.php als erstes gelistet sein müssen. Gerade bei Seiten, die mit ASP.NET erstellt wurden, wird oftmals default.aspx als erste Wahl genommen.

Eine einfache HTML Struktur

Ein jedes Dokument, dass mit HTML ausgezeichnet wird, benötigt eine grundlegende Struktur, die der HTML-Parser benötigt, um diese Datei ordnungsgemäß zu verarbeiten. Diese sieht wie folgt aus:

  • Html
  • Ergebnis
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Eine einfache Webseite</title> </head> <body> <h1>CodingLab</h1> </body> </html>

Zunächst braucht jedes Dokument eine Beschreibung welchen Typs es ist. Natürlich könnte man jetzt sagen, dass das ganze bereits mit der Endung eines Dokuments getan ist, doch dem ist leider nicht so, wenn wir Parser haben, die diese Dokumente verarbeiten müssen. Aus diesem Grund müssen wir unser Dokument ein wenig genauer beschreiben und achtet man jetzt auf die erste Zeile des obigen Codes so fallen folgende zwei Informationen auf:

BeschreibungBeispiel
Da HTML aus SGML entstanden ist, wird für das Dokument zwingend eine Referenz zur DTD benötigt, da der Parser wissen muss, nach welchen Regeln, das Dokument verarbeitet werden soll."http://www.w3.org/TR/html4/strict.dtd"
Weiterhin ist die Version von HTML zu finden, mit der das Dokument strukturiert ist.HTML 4.01

Obwohl HTML nicht aus SGML entstand und somit auch keine Referenz zur Dokumenttypdefinition (DTD) benötigt, finden wir in HTML5 ein stark vereinfachten DOCTYPE: <!DOCTYPE html>. Als nächstes folgt das HTML-Element <html></html>, in welchem wir den Head-Bereich <head></head> und den sichtbaren Body-Bereich <body></body> haben.

Während wir im Head-Bereich generelle Informationen zur Webseite festlegen, Skripte und Stylesheets einbinden und auch den Titel <title></title> der Seite setzen, so finden wir im Body-Bereich den gesamten sichtbaren Bereich. Beispielsweise eine Überschrift mit dem Inhalt "Coding-Lab": <h1>Coding-Lab</h1>