Undertec Blog

Online HTML-Kurs (Teil 21): Zusätzliche Seiteninformationen mit den meta-Tags

Wed, 10 Mar 2010 00:15:56 +0100

Mit den -Tags die ihre Verwendung im Head-Bereich haben, werden spezielle Meta-Informationen über die Seite wie Autor, Stichworte zum Seiteninhalt, etc. angegeben. Dabei sind die Informationen weniger für den Benutzer gedacht, sondern viel eher für spezielle Programme wie Suchmaschinen oder Intranet-Anwendungen. Die Meta-Informationen sind für den normalen Nutzer nur im Quelltext lesbar und werden vom Browser ansonsten nicht dargstellt. Außer den Informationen, können sich in den Meta-Einträgen aber auch Anweisungen für den Browser befinden, dazu später aber mehr.

Erst einmal ein Beispiel für die Informationen, die man in den Meta-Angaben hinterlegen kann:

      Dies ist der Titel



















   Diese Seite enthält alle wichtigen Meta-Angaben.

In obigen Beispiel werden zwei Attribute benutzt, um die Meta-Angaben zu machen.

Zum einen das name-Attribut, welches den Namen der Meta-Informationen, die folgen, angibt. Diese Namen kann im Prinzip jeder festlegen wie er will. Allerdings gibt es eine Reihe von Namen, die eigentlich von allen verwendet werden. Diese Namen und die damit verbundenen Informationen sind als großer Block in obigem Beispiel zusammengefasst. Beachten sollte man dabei, dass alles kleingeschrieben wird, da das name-Attribut Groß- und Kleinschreibung berücksichtigt.
Darunter folgt eine Meta-Angabe die selbst definiert worden ist. Welche Meta-Angaben man verwendet oder auch nicht, kann jeder selbst entscheiden.

Das andere Attribut ist das content-Attribut. Wie der Name schon sagt, ist der Wert des Attributes der Inhalt, der in Verknüpfung mit den name-Attribut wiedergegeben werden soll.

Im Beispiel oben ist noch eine Sache wichtig, nämlich die "name=robots"-Angabe, die leer gelassen wurde. Im Gegensatz zu den anderen Meta-Angaben, bei denen jede Suchmaschinen selbst entscheiden kann, was sie berücksichtigt, berücksichtigen fast alle Suchmachinen dieses Attribut.
Mit ihm kann nämlich angegeben werden, ob die Seite indiziert werden soll oder ob zum Beispiel Links nachgegangen werden soll. In nachfolgender Tabellen stehen entsprechende Wertepaare:

Wert	Beschreibung
content="index, follow"	Indizieren und Links folgen
content="index, nofollow"	Indizieren und Links NICHT folgen
content="noindex, nofollow"	NICHT indizieren und Links NICHT folgen
content="noindex, follow"	NICHT indizieren aber Links folgen
content="noarchive, nosnippets"	NICHT Archivieren und KEINE Seitenauszüge wiedergeben (nur Google)

Neben all diesen Informationen kann aber wie oben schon erwähnt auch Anweisungen geben:

      Dies ist der Titel














   Diese Seite enthält alle wichtigen Meta-Angaben, die als Erweiterung des HTTP-Headers gesehen werden können.

Anstatt des name-Attributs wird nun das http-equiv-Attribut eingesetzt. In Kombination mit entsprechendem Inhalt, kann man gewisse Schalterchen im HTTP-Protokoll oder im Browser umlegen.

Eine Beschreibung der Schalter findet sich in folgender Tabelle:

http-equiv	Wert	Beschreibung
cache-control	no-cache	Verbietet das Zwischenspeichern
content-language	z.B. de	Gibt die Sprache des Inhalts an
content-script-type	z.B. text/javascript	Gibt an welcher Skript-Typ global verwendet wird
content-style-type	z.B. text/css	Gibt an, welche Sytlesheet-Sprache eingesetzt wird
content-type	Z.B. text/html; charset=ISO-8859-1	Gibt an in welchem Zeichensatz der Inhalt der Seite ist
expires	z.B. Mon, 01 Jan 2099 00:00:00 GMT	Nach diesem Datum wird das Dokument beim Besuch nicht aus dem Zwischenspeicher des Browsers gelesen
pragma	no-cache	Verbietet das Zwischenspeichern auf Proxy-Servern
refresh	Zeit in Sekunden, eventuell Webadresse	Zwingt den Browser zum Neuladen der Seite nach x Sekunden, oder zum Wechsel auf eine andere Seite nach x Sekunden

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Online HTML-Kurs (Teil 20): Blockcontainer mit dem div-Tag

Mon, 08 Mar 2010 00:32:49 +0100

Mit dem

-Tag lassen sich Blockcontainer definieren. Dabei werden aber anders als beim

-Tag keine Absätze oder ähnliches gemacht. Das

-Tag dient also nur dazu, die Seiteninhalte in Blöcke einzuteilen. Das

-Tag wird später wenn wir zu CSS kommen noch eine sehr wichtige oder sogar die zentrale Rolle bei der Seitengestaltung spielen.

      Dies ist der Titel






   Dieser Seiteninhalt bildet einen logischen Block.




   Dieser Seiteninhalt bildet den nächsten Block.

Obwohl das
-Tag den Inhalt nur logisch zusammenfassen soll, kann man ihm mittels des align-Attributs eine Ausrichtung des Inhalts mitteilen: right (rechts), left (links), center (zentriert) oder justify (blocksatzmäßig).

Ein weiteres nützliches Attribut ist das id-Attribut mit dem man die Blöcke benennen kann. Diese Benennung spielt nachher bei CSS noch eine wichtige Rolle, da wir so die Gestaltung eines Blocks direkt an einen einzelnen Block binden können.

Zum Inhaltsverzeichnis des Online HTML-Kurs.

Online HTML-Kurs (Teil 19): Skripte einbinden

Sat, 06 Mar 2010 00:26:38 +0100

Skripte haben oft die Aufgabe interaktiv mit einem Nutzer zu interagieren, was einer normalen Webseite so nicht vergönnt ist. Die einzige Interaktion die eine Webseite beherrscht, ist das zur Verfügung stellen von Links und Inhalten. Ein Skript hingegen kann in der Lage sein, mit dem Benutzer zu kommunizieren, zum Beispiel beim Aufruf eines Formulars oder einer interaktiven Anwendung, die wie ein normales Programm funktionieren kann.

Als Skriptsprache wird eigentlich immer Javascript eingesetzt, welche sich aber in vielen Teilen von der Programmiersprache Java unterscheidet (siehe dazu auch http://de.wikipedia.org/wiki/JavaScript#Entwicklung).

Eine andere Möglichkeit interaktiv zu werden, besteht natürlich in der Möglichkeit CGIs einzusetzen, welche über Formulare, Meta-Angaben, Links oder Server-Side-Includes aufgerufen werden können (siehe dazu http://de.selfhtml.org/servercgi/cgi/cgihtml.htm#cgi_aufrufe). Hierfür werden oft Programmiersprachen wie Perl oder PHP eingesetzt. Diese unterscheiden sich aber grundlegend vom Einsatz von Java-Script, da sie nicht über das

Dabei steht zwischen der Start- und Endmarke der Quellcode in Java-Script geschrieben. Verwendet wurde hierbei das type-Attribut, in welchem angegeben wird, in welcher Sprache der Quellcode vorlegt. In Unserem Fall liegt der Quellcode als ASCII-Text vor und ist in Java-Script geschrieben.

Ein weiteres Attribut, welches im Beispiel nicht verwendet wird, ist das defer-Attribut. Es gibt an, ob das Skript Output an das HTML-Dokument zurückliefert oder nicht. Liefert es keine Ausgabe, so kann der Browser die Ausführung aufschieben. Die beiden Werte für dieses Attribut sind "false" (das Script wird sofort ausgewertet) und "true" (die Auswertung wird aufgeschoben).

In obigen Beispiel wurde das Script im body-Bereich eingebunden. Es kann aber genauso gut auch im Head-Container untergebracht werden.

Eine andere Alternative Skripte einzubinden, bietet folgende Möglichkeit:

      Dies ist der Titel

In diesem Beispiel wird ein Skript eingebunden, welches als gesonderte Datei auf dem Server liegt. Dies hat den Vorteil, dass man den Code innerhalb der Datei mehrmals einsetzen kann, ohne dass man in immer wieder in das HTML-Dokument schreiben muss. Auch kann man so externe Skripte aufrufen, die zum Beispiel als Analyse-Werkzeuge für die eigene Homepage dienen können (z.B. Statistiktools wie Google Analytics).

Sollten Skripte einmal vom Browser nicht unterstützt werden, so kann man sich mit dem

Dabei muss man zwischen zwei Fällen unterscheiden. Einmal kann der Browser gar keine Skripte ausführen, dann werden alle