Grundbegriffe und Erklärungen für Webdesigner

In diesem Artikel werden die grundlegenden Script und Markup Sprachen aufgezählt und beschrieben. Jeder Webdesigner kennt die folgenden Sprachen, doch nicht jeder weiß was sie sind. Die Liste richtet sich vor allem an Anfänger um einen einfachen Überblick über die Basics zu geben.

XHTML

XHTML steht für Extensible HyperText Markup Language und ist eine von der W3C empfohlene Auszeichnungssprache für Webseiten, welche auf der Syntax von XML basiert. XHTML kann dabei auch als Erweiterung von HTML gesehen werden, es soll damit eine strengere Strukturierung der Webseiten geschaffen werden.

Die Unterschiede finden sich jedoch im Detail, so sollte bei XHTML jeder Tag einen Endtag besitzen, Attribute in Anführungszeichen gesetzt und alle Tags klein geschrieben werden. Konnte der Webenwickler bei HTML einen Zeilenumbruch mit dem <BR>-Tag angeben, so soll bei XHTML die Formatierung folgendermaßen aussehen: <br></br> oder die Kurzform <br />.

Ziel von XHTML war es, XML und HTML miteinander zu vereinigen, um klare Strukturen im Web zu schaffen.

CSS

CSS steht für Cascading Style Sheets und bezeichnet Stilvorlagen für die Darstellung von Webseiten. Dabei wird versucht Stil (Layout) und Inhalt voneinander zu trennen, indem die Stilbeschreibung in einer eigenen CSS-Datei abgelegt wird. Im HTML-Dokument selbst werden die Bereiche, die einen eigenen Stil bekommen sollen, mittels CSS-Klassen formatiert.

Hier ein Beispiel für die CSS-Formatierung einer Überschrift:

HTML:

<h1>Ich bin eine rote Überschrift</h1>

CSS

h1 {
	font-family: Arial, Verdana;
	font-size: 16px;
	font-color: #ff0000;
}

Die Referenz auf das Style Sheet geschieht im HTML Code über folgendes Statement:

<link href="style.css" rel="stylesheet" type="text/css" />

Der Vorteil von CSS liegt auf der Hand; durch die Trennung von Inhalt und Layout können Änderungen leicht durchgeführt werden. Will der Webentwickler zum Beispiel die Farbe der Überschrift von Rot auf Grün ändern, so muss er dies nur in der CSS-Datei ausbessern. Eine Änderung sämtlicher HTML-Seiten, welche die Überschrift beinhalten, ist dadurch nicht notwendig.

Früher wurde die Grundstruktur von Webseiten mittels Tabellen gestaltet. CSS soll in Zukunft Tabellen ablösen und, auch im Sinne der Barrierefreiheit, die Gestaltung von Webseiten übernehmen.

DOM

DOM steht für Document Object Model und bezeichnet einen weiteren Standard des W3C. Es ist eine plattform- und sprachunabhängige Schnittstelle für den Zugriff auf XML- und XHTML-Dokumente. Über DOM lässt sich ein Dokument als Baumstruktur mit hierarchischer Verschachtelung der Elemente auffassen. Über die DOM-API des Webbrowsers ist es möglich, auf die einzelnen Elemente zuzugreifen und diese dynamisch zu manipulieren (bearbeiten, auswerten oder löschen). Die Manipulation geschieht dabei mittels der Skriptsprache JavaScript.

Eine der berühmtesten JavaScript Libraries zur DOM manipulation ist jQuery.

XML

XML steht für Extensible Markup Language und ist eine Auszeichnungssprache für die Abbildung von hierarchisch strukturierten Daten, welche hauptsächlich für den Austausch von Daten verwendet wird. Die XML-Datei weist dabei einen logischen Aufbau in Form einer Baumstruktur auf. Die Nutzdaten werden dabei von Tags eingeschlossen, um diese zu klassifizieren. Dadurch wird auch gleich ein Nachteil von XML ersichtlich: XML-Dokumente besitzen aufgrund der vielen Tags einen riesigen Overhead, welcher oftmals mehr Speicher in Anspruch nimmt als die Nutzdaten selbst. Trotzdem erfreut sich XML in der IT-Branche großer Beliebtheit und findet auch im Web einen breit gefächerten Einsatz wie zum Beispiel bei RSS-Feeds oder Webservices.

<?xml version="1.0" encoding="UTF-8"?>
<adressbuch>
	<kontakt>
		<name>Pascal Bajorat</name>
		<ort>Berlin</ort>
		<website>www.pascal-bajorat.com</website>
	</kontakt>
	<kontakt>
		<name>Sascha Rudolph</name>
		<ort>Berlin</ort>
		<website>www.rudolph-sascha.de</website>
	</kontakt>
</adressbuch>

JavaScript

JavaScript ist eine von der Firma Sun Microsystems entwickelte, clientseitige Programmiersprache, welche in Webseiten zur Anwendung kommt und im Webbrowser ausgeführt wird. Popups, Rollover-Effekte bei Bildern und Validierung von Benutzereingaben zählen dabei zu den Hauptanwendungen von JavaScript. Es lassen sich jedoch auch einfache Spiele und komplexe Navigationselemente in JavaScript realisieren.

JavaScript weist eine Namensähnlichkeit mit der objektorientierten Programmiersprache Java auf, sollte jedoch nicht mit dieser verwechselt werden, da diese nur geringe Gemeinsamkeiten besitzen.

Im Folgenden findet sich ein Beispiel für ein JavaScript, welches in HTML eingebettet wird. Bei einem Klick auf den „Klick mich an“-Button wird die Nachricht „Du hast mich angeklickt“ im Webbrowser ausgegeben.

<script language="javascript" type="text/javascript">
function zeigeMeldung()
{
window.alert("Du hast mich angeklickt");
}
</script>
<button onclick="zeigeMeldung();">Klick mich an</button>

Ein Nachteil von JavaScript ist, dass der User es im Webbrowser deaktivieren kann.

AJAX

Traditionelle Webanwendungen übermitteln ihre Daten synchron. Dies bedeutet, dass der User eine (HTTP-)Anfrage sendet und danach wartet, bis der Webserver seine Antwort an den Webbrowser schickt, erst dann kann wieder eine erneute Anfrage vom User verschickt werden. Dadurch wirken traditionelle Webseiten eher langsam, statisch und wenig interaktiv.

Moderne Web 2.0-Anwendungen hingegen benutzen AJAX, um die Seiten interaktiver zu gestalten. Das Besondere dabei ist die asynchrone Datenübertragung. Dabei können innerhalb einer Webseite Daten angefordert und angezeigt werden, ohne die gesamte Seite neu laden zu müssen. Durch diese Möglichkeit wirken Webseiten wesentlich dynamischer als traditionelle Webseiten ohne AJAX. Webanwendungen werden dadurch immer ähnlicher zu Desktop-Anwendungen und bieten diesen immer mehr Konkurrenz.

Ein bekanntes Beispiel für eine der ersten AJAX-Webanwendungen ist Google Suggest. Hier werden, nachdem der User einen Buchstaben eines Suchbegriffes eingetippt hat, automatisch (dynamisch) entsprechende Suchvorschläge angezeigt. Die Technik dahinter ist recht simpel. Jeder Tastendruck wird mit dem JavaScript Event-Handler onkeyup abgefangen, per XMLHttpRequest wird ein Objekt generiert und mit dem Wert der gedrückten Taste an den Google Server geschickt. Dieser durchsucht seine Datenbank und schickt das Ergebnis an den Webbrowser zurück. Der Webbrowser aktualisiert daraufhin mittels JavaScript, CSS und Document Object Model (DOM) das Listenfeld, in welchem die Suchvorschläge angezeigt werden.