Onlinemagazin: devmag.net » HTML

XHTML Einführung

Thiemo — Thu, 18 Dec 2008 10:00:00 +0000

XHTML - das neue HTML? Wo liegen die Unterschiede zwischen XHTML und HTML? Wieso überhaupt XHTML?

Die wohl letzte HTML-Version, die es geben wird, ist die Version 4.0.1. Damit versucht das W3C, die Entwicklungen von Webseiten völlig auf die neue Datenformatsprache XML (XML = Erweiterbare Auszeichnungssprache) mit all den Erweiterungen umzulenken. XML ist universell. Ein Programmierer kann sich über XML ein "eigenes" HTML erstellen. Er kann definieren, welche Elemente und Attribute es geben soll und wie diese im Browser dargestellt werden sollen.
XML stammt wie auch HTML direkt von SGML ab. SGML ist die komplexeste aller Auszeichnungssprachen. HTML ist nur daraus abgeleitet. XML spielt schon einen großen Teil von SGML.

Warum XHTML?

XHTML (XHTML = Erweiterbare Hypertext Auszeichnungssprache), der Nachfolger von HTML, basiert direkt auf XML. XHTML ist also nicht mehr von SGML, sondern direkt von XML abgeleitet worden.
XHTML ist keine komplett neue Sprache. Vielmehr gibt es noch die Elemente, die es zuvor auch in HTML gegeben hat mit dem Unterschied, dass man sich bei XHTML jetzt an die komplexen Regeln von XML halten muss.

XHTML soll eine Zwischenstufe von HTML zu XML sein. Damit versucht das W3C, den Übergang auf XML so leicht wie möglich zu machen. Durch XHTML werden einem die strengen XML-Syntaxregeln näher gebracht, da ein XHTML-Dokument nur gültig ist, wenn man diese Regeln einhält.

Zudem ist ein XHTML-Dokument noch durch XML-Eigenschaften erweiterbar. Durch den Verweis auf fremde Element-Definitionen, sogenannte Namespaces, ist es möglich, XML direkt in XHTML zu verwenden.

Weitere Informationen zum Thema XHTML finden Sie bei HTML-World!

Wie sieht ein XHTML-Dokument aus?

Ein typisches XHTML-Dokument könnte wie folgt aussehen:

XHTML

Dieses Dokument ist ein XHTML Dokument.

Wer schon einmal mit XML zu tun hatte, erkennt ähnliche Strukturen. In der ersten Zeile wird mit dem darauf verwiesen, dass es sich bei dem Dokument um eine Art XML-Dokument handelt. In der zweiten Zeile kommt dann der Verweis auf die DTD (Dokument Type Definition).
In ihr werden die einzelnen verwendeten Elemente definiert. Ein Element, das hier nicht definiert ist, darf nicht verwendet werden.

Es gibt drei Typen von XHTML DTDs:

Der Verweis auf die XHTML - Strict DTD: Das XHTML-Dokument darf keine CSS und keine Frames verwenden.

Der Verweis auf die XHTML - Transitional DTD: Bei ihr dürfen CSS, jedoch keine Frames verwendet werden.

Mit dieser DTD dürfen Frames verwendet werden.

Nun aber zurück zu unserem XHTML-Dokument. Auffällig ist vor allem das Wurzelelement.

Durch das Attribut xmlns="" wird auf einen Namespace verwiesen.
Dieser muss beim Wurzelelement (also ) gesetzt werden und auf die Adresse http://www.w3.org/1999/xhtml verweisen. Hiermit erkennt der Browser das Wurzelelement.

Was man wissen muss...

In XHTML werden wie auch in XML, CSS und JavaScript, Tags oder Befehle die Zeichenkombinationen wie <, &, ]]> oder -- enthalten nicht oder nicht korrekt interpretiert.
Diese Codes oder Anweisungen können zum einen in externen JavaScript- oder CSS-Dateien ausgelagert werden, zum anderen besteht die Möglichkeit diese Elemente zu "verstecken".

.
Wie Sie hier sehen, wird der wirkliche Code zwischen versteckt. Sie können innerhalb dieses Bereiches die angesprochenen Zeichen verwenden, sie werden nicht interpretiert.
Es ist nicht möglich, mehrere CDATA-Bereiche ineinander zu verschachteln.
Gängige Browser mit XHTML Unterstüzung haben jedoch noch Probleme mit den CDATA-Bereichen. Deshalb empfiehlt sich die Auslagerung der Skripte oder Stylesheets.

Sonderzeichen sind in XHTML, wie auch in XML, ein Problem. In XML gelten die Sonderzeichen als HTML-Entities. So kennen Sie bestimmt den Entity ä. Dieser darf in XHTML Dokumenten nicht mehr verwendet werden. Stattdessen müssen die Unicode-Werte der Zeichen verwendet werden. Weiter unten finden Sie einen Link zu einem Unicode ABC.

XHTML ist erweiterbar...

Ganz im Sinne von XML ist XHTML eine erweiterbare Markupsprache. In der Document Type Definition (DTD) befinden sich die Definitionen jedes verwendbaren Elements und Attributs.
Jeder Programmierer oder XHTML-Anwender kann eigene Elementdefinitionen schreiben und in XHTML einsetzten. Man kann sich XHTML also selbst gestalten. Dies ist der erste Schritt zu einem Internet aus XML...

Weiterführende Links:
XHTML Syntax-Regeln

Logische Beziehungen in HTML

Thiemo — Wed, 19 Nov 2008 10:00:00 +0000

In HTML gibt es zwei Arten von Verweisen. Normale Hyperlinks, sowie logische Beziehungen zu anderen Quellen, also anderen Dokumenten.
Hyperlinks verbinden visuell einzelne HTML Dateien. Über diese Hyperlinks kann der Benutzer dann zwischen den einzelnen Seiten navigieren. Logische Beziehungen werden im Bereich definiert.
Sie verbinden einzelne Unterseiten mit einfachen Pfadangaben. Auch für Suchmaschinen sind diese logischen Verbindungen eine willkommene Verbesserung. Mit ihnen kann sie schneller erkennen, was z.B. die Index-Seite ist, wo ein Glossar bzw. Wörterbuch liegt, oder wo sich das Inhaltsverzeichnis
befindet.
Die Definition von Verweisen wird noch von wenigen Browsern interpretiert. Ist der Browser jedoch Kompatibel, dann zeigt er eine Leiste an, mit der man auf die angegeben Dateien zugreifen kann, so kann die Benutzerfreundlichkeit einer Seite um einiges gesteigert werden.

Diese logischen Beziehungen können jedoch noch viel weitreichender verwendet werden. So kann man über diese Beziehungen schnell eine automatische Sitemap der gesamten Inhalte einer Seite erzeugen, anhand von den Quellangaben in den jeweiligen Dateien.

Logische Beziehungen erzeugen:

Der Aufbau dürfte den meisten schon bekannt sein, über diese Beziehungen werden ausgelagerte Stylesheet-Dateien eingebunden, oder auf diese Verwiesen.

Dem Befehl müssen standardmäßig einige Attribute gegeben werden- Zum einen das rel – Attribut, welches den Typ der Beziehung angibt. In dem ref – Attribut wird die Datei über einen relativen, oder absoluten Pfad angegeben, mit
welcher diese Datei verknüpft ist.
Das title – Attribut ist dann wichtig, wenn der Browser die Beziehungen korrekt interpretiert. Über das title-Attribut wird die Beschriftung des Linkes, oder Buttons angegeben, welche der Browser erzeugt. Mit dem Attribut "hreflang" kann zusätzlich die Sprache des Dokumentes angegeben werden. Hierbei werden die normalen Länderkürzel verwendet.
Mit dem charset – Attribut kann noch der Zeichensatz, welcher vom Dokument, auf welches verwiesen wird, angegeben werden.

Die wichtigsten Beziehungen

Wo sich das Inhaltsverzeichnis befindet.

Die nächste Seite, z.B. bei Artikeln mit mehreren Teilen.

Zum Anfang, zur Startseite z.B. bei einer Artikelserie der erste Teil, oder das Vorwort.

Die Vorhergehende Seite.

Die Position einer Stichwortliste, in der alle auf der Seite auftretenden Stichworte gelistet sind.

Verweis auf das Glossar, indem die verwendeten Begriffe erläutert werden

Verweis auf die Seite die das Copyright eindeutig definiert.

Die Beziehung zu einer Hilfe – Seite.

Verweis auf das Kapitel bzw. auf den Themenbereich, zu welchem das
Dokument gehöhrt.

title="Nuten von Logischen Verweisen">
Der Verweis auf eine Untersektion innerhalb einer Seite. Dies kann auch
ein Verweis auf eine Textmarke bzw. einen Anker sein.

Verweis auf das verwendete Stylesheet, die wohl bekannteste Form der
logischen Verweise, zum einbinden eines Stylesheets.

Verweis auf einen allgemeinen Orientierungspunkt. Das kann ein
Inhaltsverzeichnis, ein Index-Datei, oder auch die Startseite sein.

title="Inhalt auf Server2">
Der Verweis z.B. zu einem anderen Server, welcher den gleichen Inhalt
bereitsstellt.

Logische Beziehungen machen in gewisser Hinsicht Sinn. Sie ersetzen ein normales Menü zwar nicht, jedoch kann direkt definiert werden, zu welchen Dokumenten eine Beziehung herrscht.

Weiterführende Links:
Logische Textauszeichnungen

HTML Squeezer – HTML Code optimieren

HTML mit Zeit – HTML+Time

HTML Copyright Wizard

Thiemo — Mon, 10 Nov 2008 10:00:00 +0000

Mit dem HTML Copyright Wizard können Sie ihren HTML Quellcode so zerstückelln, dass er von bestimmt keinem Quellcode-Dieb wieder zusammengesetzt werden kann.
Der HTML Copyright Wizard ist ein Shareware-Programm. Die Testversion lässt sich unter http://www.muweb.net herunterladen. Der Programmierer Stefan Muller (devmag.net Autor) verspricht, das der HTML Copyright Wizard die gleiche Arbeit leistet, wie vergleichbare teure Produkte.

Nach der Installation der Software kann man direkt loslegen. Der gesamte Verschlüsselungsprozess ist in drei Schritte unterteilt. Im ersten Schritt muss man die einzelnen Dateien, die verschlüsselt werden sollen, auswählen.

Auswahl der einzelnen Dateien

Im zweiten Schritt müssen Sie dann die einzelnen Formen der Verschlüsselung auswählen.
Bei der Auswahlmöglichkeit des Nativen HTML Cripplings werden die Zeichen des Quelltextes in ihre ASCII Codes umgewandelt. Ein Leser versteht den Quellcode dann nur noch kaum.
Durch die Option "Quelltextzange" werden überflüssige Zeilenumbrüche entfernt. Dadurch wird das Lesen um einen weiteren Faktor erschwert.
Ist die Verschlüsselung über JavaScript aktiviert, werden die einzelnen Absätze über JavaScript ausgegeben. Dadurch erkennt ein Webeditor wie Frontpage zwar das Script, kann aber keine HTML Quellcode ausgeben, da dieser verschlüsselt im JavaScript versteckt ist und über die document.write-Anweisung wieder ausgegeben wird. Nur im Browser wird also das korrekte Ergebnis angezeigt.

Die nächsten zwei Optionen haben keine wirkliche Funktionalität. Durch die Option "Überflüssige Zeilenumbrüche" werden zum Begin und zum Ende des Quelltextes Zeilenumbrüche eingefügt. So manch ein Quellcode-Gucker denkt nämlich nicht daran, den Scrollbalken zu betätigen. Die Anzahl der eingefügten Zeilen kann weiter unten angegeben werden.
Die Option "Fake-Meldung" ist ebenfalls nur ein kleiner Trick. Dabei wird eine Fehlermeldung zu Begin des Dokumentes eingefügt. Diese soll den Quellcode-Gucker ein wenig abschrecken...

Auswahl der Optionen für die Verschlüsselung

Die nächsten drei Optionen sind eigentlich auch nicht wirklich von großem Nutzen. Zum einen kann die Rechte-Maustaste deaktiviert werden, der Druck des Dokumentes verhindert werden, und auch die Textauswahl, also das markieren eines Textes verhindert werden. Hierzu schreibt der HTML Copyright Wizard ein entsprechendes JavaScript in den Quellcode, welches diese Funktionen verbietet.

Im letzten Schritt, dem Schritt 3 können Sie die Dateien nun mit ihren Optionen verschlüsseln lassen. Wichtig ist, dass Sie die Backup-Funktion aktiviert haben, da eine einmal verschlüsselte Datei nicht wieder entschlüsselt werden kann...
In der Shareware-Version fügt der HTML Copyright Wizard automatisch einen Verweis auf das Programm in den Quellcode ein.
Allgemein ist der Funktionsumfang des Programms sehr groß, deshalb denken wir, dass die Registrierungsgebühr von lediglich 5€ doch aufgebracht werden kann.
http://www.muweb.net

Weiterführende Links:
HTML Squeezer – HTML Code optimieren

Logische Beziehungen in HTML

HTML mit Zeit – HTML+Time

Moderne Tabellendefinitionen in HTML

Thiemo — Tue, 07 Oct 2008 10:00:00 +0000

Tabellendefinitionen im Wandel der Zeit. Mit dem HTML 4.0 Standard gibt es drei neue Tags, die die Definition einer Tabelle um einiges leichter und übersichtlicher machen.
HTML ist manchmal ein Buch für sich. So treten bei der Definition von Tabellen im Allgemeinen immer wieder vermeintlich unerklärbare Fehler auf. Auch das W3C hat dies erkannt, und drei neue Tags entwickelt. Mit ihnen kann man den "Tabellen-Kopf", den "Tabellenkörper", und den "Tabellenfuss" genauer definieren.

Ein Beispiel

Die obere Zelle
Der Inhalt
Die untere Zelle

Das Ergebnis sieht aus wie eine Tabelle die über diesen Code erstellt wurde:

Obere Zelle Der Inhalt Die untere Zelle

Wie Sie sehen ist der Code um einiges modularer aufgebaut, der Tabellenkopf, der Tabellenkörper sowie der Tabellenfuss sind ein getrennter Teil der Tabelle. Das macht die Tabelle viel dynamischer.
Bisher wurde Tabellen erst angezeigt, sofern der HTML Quellcode komplett geladen wurde. Mit einer solchen Definition werden die einzelnen Bereiche geladen und auch angezeigt.
Der Tabellenkopf wird immer Oben angezeigt, auch wenn er am untersten definiert wurde, der Körper befindet sich immer zwischen Kopf und Fuss.
Browser, die diese Tags noch nicht verstehen zeigen die Tabelle dennoch wie gewohnt an.

Weiterführende Links:
Haarlinien Tabellen

HTML Kurs – Tabellen

HTML Code optimieren, andere Ansätze

Mit freundlichen Grüßen, die DTD!

Thiemo — Sat, 28 Jun 2008 10:00:00 +0000

Ist ihre Webseite HTML und CSS konform? Die Überprüfung mit den Validatoren des W3C kann Überraschungen mit sich bringen. Wenn die korrekte Angabe einer DTD fehlt, dann bekommt man gar kein Ergebnis zu sehen. Oder ist ihnen vielleicht schon aufgefallen, dass neue Browser ihre Seite nicht korrekt anzeigen, wenn Sie keine DTD angeben? In diesem Artikel wird gezeigt, wie Sie DTDs angeben, und was an ihnen so wichtig ist.
Wissen Sie, ob Sie Ihre Webseiten nach den W3C-Standards für HTML und CSS programmiert haben? Wenn Sie versuchen, den Quellcode Ihrer Seiten mit den Validatoren des World Wide Web Contortiums (W3C) zu prüfen, werden Sie feststellen, dass die Validatoren nur dann Ergebnisse liefern, wenn eine richtige Dokumententyp-Definition (DTD) auf der Seite angegeben wurde. Oder vielleicht ist Ihnen aufgefallen, dass moderne Browser Webseiten etwas anders darstellen, wenn eine gültige DTD angegeben wurde. In diesem Beitrag erfahren Sie, warum eine DTD wichtig für eine "saubere" Programmierung sind und welche DOCTYPEs funktionieren.

DTD und Browser

Nach den HTML- und XHTML-Spezifikationen des W3C ist die Dokumententyp-Definition eine Information, die einer Webzugangssoftware (z.B. Browser) die Version von (X)HTML der aufgerufenen Seite angibt (vgl. http://www.w3.org/TR/html401/sgml/dtd.html). So können Browser oder Validatoren die Definition des Dokumententyps herunterladen und entsprechend auf das Dokument anwenden. Die DTD ist eine entscheidende Angabe, um ein (X)HTML-Dokument korrekt zu interpretieren.

Eine gültige DTD ist eine Voraussetzung für die richtige Darstellung von Webseiten in W3C-konformer Browsern, wie z.B. Mozilla/Netscape 6, MSIE5 (nur Mac) oder MSIE6 (für Windows). Ohne die Angabe einer gültigen DTD werden dieselben Browser die Webseiten nach älteren und z.T. auch fehlerhaften Spezifikationen interpretiert, wodurch spezifische Bugs der einzelnen Browser zum Vorschein kommen. In diesem Fall könnte es passieren, dass CSS nach den Möglichkeiten eines 4er Browsers oder JavaScript auf der Basis von MS-DOM (MSIE) oder einer obskuren Basis (Mozilla/Netscape 6) verarbeitet wird.

Opera - auch ein W3C-konformer Browser - arbeitet anders und versucht von vorneherein, Webseiten nach dem aktuellen Standard zu interpretieren. Auch wenn der Opera-DOM noch nicht perfekt ist, ist dieser Ansatz wohl der bessere.

Gültige DTDs

Da die DTD eine wichtige Angabe in Webseiten ist (keine Validierung ohne gültige DTD) und weil das W3C führend in der Formulierung von Webstandards ist, liegt die Vermutung nahe, dass der W3C die verschiedenen DTDs auch erläutert. Diese Vermutung ist falsch. Auf den Seiten des W3C stehen Vorschläge, Entwürfe und Spezifikationen, die von Spezialisten für Spezialisten geschrieben sind. Zwischendurch findet man auch ein Tutorial, aber die Hinweise auf DTDs, und damit sind auch wirklich "Hinweise" gemeint, sind auf den W3C-Seiten gut verteilt und müssen mühsam recherchiert werden. Sie finden Angaben zu bestimmten DTDs oder DOCTYPEs, und Beispieladressen für DTDs sind relativ statt absolute angegeben, womit ein Kopieren und Einfügen in die eigenen Webseiten ohne vorherige Anpassung zwecklos ist.

Die Dokumententyp-Angabe wird mit eingeleitet. Zum Beispiel, auf vielen Websites werden Sie folgende DTD finden, der von den W3C-Seiten einfach kopiert wurde:

Die angegebene Adresse für die DTD lautet hier "DTD/html4/loose.dtd" und bezieht sich natürlich auf die Website www.w3.org. Ohne die vollständige (absolute) Adresse wird die Definition auf der eigenen Website gesucht!

Die richtige DTD lautet:

Mit der Angabe der vollständigen Adresse wird dem Browser oder anderer Zugangssoftware mitgeteilt, an welche Stelle im Web die Definition des Dokumententyps zu finden ist und kann entsprechend heruntergeladen werden. Dann kann die Seite nach den aktuellen Standards verarbeitet und angezeigt werden.
Die gültigen DTDs
Die Dokumententyp-Angabe muss für HTML-Seiten ganz zu Anfang einer Webseite, also noch vor dem einleitenden HTML-Element stehen:

... ... ... ...

Bei XHTML gehört die DTD zwischen der XML-Deklaration und dem einleitenden HTML-Element:

... ... ... ...

Dokumententypen für HTML 4

Für den aktuellen HTML-Standard (Version 4.01) gibt es drei Dokumententypen: "strict", "transitional" und "frameset".
HTML 4.01 strict.
Im HTML-Dokumententyp "strict" werden ausschliesslich Strukturierungselemente im HTML-Quelltext zugelassen. Durch die Verlagerung der Angaben zur Formatierung und Layout auf Style-Sheets werden die HTML-Seiten extrem schlank (z.B. HTML-Attribite wie align oder border bei Grafiken werden aus einem Style-Sheet entnommen). Auch einige Elemente wie z.B. APPLET sind längst veraltet und gehören nicht mehr zum empfohlenen Standard (hier wird das OBJECT-Element empfohlen). Mit der Durchsetzung Standard-konformer Browser ist der Umstieg auf den Standard mehr als vertretbar geworden!

Der Dokumententyp "strict" für HTML sieht dann wie folgt aus:

HTML 4.01 transitional
Der Dokumententyp "transitional" (Übergang) erlaubt den Einsatz von HTML-Attributen und -Elementen, die streng genommen nach den derzeitigen Standards nur über Style-Sheets zu definieren wären. Das liegt daran, dass manche noch eingesetzte Browser wie Netscape 4 mit Style-Sheets nicht richtig umgehen können und deshalb Formatierungen tatsächlich im Text angegeben werden müssen, damit sie interpretiert werden können. Die angesprochene DTD heisst dann "loose" (locker) und, wie der Name schon andeutet, erlaubt sie Abweichungen von den Standards. Es handelt sich dabei um frühere Standards, die seit einigen Jahren vom W3C verworfen wurden.

HTML 4.01 frameset
Dieser Dokumententyp ist praktisch identisch mit dem Dokumententyp "transitional", nur werden die HTML- und BODY-Elemente anders definiert. Das BODY-Element wird nicht angezeigt und wird durch FRAMESET ersetzt. Immer, wenn Sie Framesets in einer Seite definieren, sollten am Anfang der Seite folgende DTD stehen:

XHTML 1.0
Für XHTML 1.0, das im Prinzip dasselbe wie HTML 4.01 ist, nur auf der Basis von XML anstatt SGML, gibt es in Analogie zu den HTML4-Dokumententypen auch die drei DTDs "strict", "transitional" und "frameset":

XHTML 1.1
XHTML 1.1 orientiert sich nicht mehr an HTML 4.01. Deshalb gibt es hierfür nur noch eine DTD:

Weitere Tipps
Bei (X)HTML handelt es sich um eine Sprache, die ohne Konventionen leicht in "Mundarten" ausarten kann, genauso wie in der gesprochenen Sprache auch.

Beispielsweise hat Netscape in der Version 4.xx kaum Unterstützung für Style-Sheets und die Standards des W3C berücksichtigt, was ihn nicht nur zu einem schlechten Browser macht, sondern letzten Endes zum Rückgang des Marktanteils von über 75% in 1996 auf fast 7% heute führte (Netscape 6 basiert wieder auf Standards und unterstützt den DOM von Netscape 4 nicht mehr, wodurch Netscape 4 zum echten Sondering unter Browsern wird). Wenn Sie also nach Standards programmieren wollen, dann empfiehlt es sich, auf die identische Darstellung in Netscape 4 zu verzichten. Das Prinzip von HTML und CSS, nämlich die Trennung von Inhalt und Layout, ist sonst nicht möglich.

In Ihrer Weberstellungs-Software sollten Sie aber überprüfen, ob er DOCTYPE unterstütz wirdt und, wenn ja, was die Standardeinstellung ist. Oft werden DTDs unbekannter Art unterstützt, zumindest werden sie nicht vom W3C gepflegt. Oder sie enthalten denselben Fehler wie viele Webseiten auch: die erforderliche Webadresse für dle DTD ist unvollständig. Das Ergebnis beim Einfügen von DOCTYPE ist eine fehlerhafte Interpretation der Seiten.

Sprechen Sie auch die Hersteller Ihres Software-Pakets an und bitten Sie sie, in zukünftigen Updates der Software dieses Problem zu beheben. Möglicherweise erfahren Sie auch, wie Sie eine solche Voreinstellung auch selbst vornehmen können.

Jan Eric Hellbusch hat zum Thema "Barrierefreies Webdesign" das Buch -Barrierefreies Webdesign - im KnowWare-Verlag veröffentlicht. Weitere Informationen zum Thema finden Sie auf seiner Homepage

http://www.barrierefreies-webdesign.de/

No related posts.

Browserweiche mit Conditional Comments

Thiemo — Wed, 18 Jun 2008 10:00:00 +0000

Eine Browserweiche nur für den InternetExplorer? Dieser bietet seit der Version 5.0 mit den Conditional Comments eine Möglichkeit Inhalte speziell für ihn anzuzeigen, Netscape und die anderen zeigen dann gar nichts an.
Es gibt viele Möglichkeiten eine Browserweiche zu erstellen, sei es mit JavaScript, PHP, oder SSI. Eine Browserweiche mit JavaScript hat ohnehin die Schwäche, das sie zu sehr von der Clientseite (also vom Browser) abhängt. Wer mit einer Browserweiche über SSI oder PHP arbeitet, muss oft die gesamte Dateistruktur verändern, die Dateitypen umbennen. Das ganze ist zu aufwendig.

Mit dem InternetExplorer 5.0 wurden die Conditional Comments, was soviel wie "bedingte Kommentare" bedeutet, eingeführt.
Die Syntax dieser Conditional Comments ist also fast mit normalen Kommentaren gleichzusetzen, nur das der InternetExplorer diese Kommentare interpretieren kann.

Nur Besucher mit dem Internet Explorer Version 5 oder höher sehen jetzt einen devmag.net Button.

Alle älterene Browser interpretieren den Code als normales Kommentar, und zeigen nichts an.
Conditional Comments sind vor allem dann wichtig, wenn Sie z.B. CSS Eigenschaften, wie die Filter des InternetExplorers, oder Scripte speziell für den InternetExplorer vor anderen Browsern "verstecken" wollen.

Conditional Comments haben noch eine erweitere Syntax, so kann man auch zwischen den verschiedenen Versionen des InternetExplorers unterscheiden.

Hierbei stehen ihnen einige Vergleichsoperatoren, wie bei anderen Programmiersprachen zur Verfügung.

Operator

Bedeutung

Übersetzung

!

nicht

not

lt

kleiner als

less than

lte

kleiner oder gleich als

less than or equal

gt

größer als

greater than

gte

größer oder gleich als

greater than or equal

Mit den Conditional Comments können Sie ihre Seite für Besucher mit anderen Browsern um einiges Benutzerfreundlicher gestalten, sie sollten diese Möglichkeit auf jeden Fall in Betracht ziehen, wenn Sie ihre Seite optimieren.

Weiterführende Links:
SSI – Browserweiche

Short Conditional if-Anweisungen

HTML Squeezer – HTML Code optimieren

Thiemo — Sun, 01 Jun 2008 10:00:00 +0000

Mit einem kleinen Werkzeug, dem HTML Squeezer lässt sich ein HTML Dokument auf schnelle Art und Weise "schlanker" machen, und somit richtig Geld sparen.
Das Shareware Programm "HTML Squeezer" von Andreas Wulf ist ein tolles Tool, mit dem sich der HTML Code so manch einer Webseite optimieren lässt, und sich so die Dateigröße und auch die Ladezeit verringert.
Dabei ist die Verwendung von HTML Squeezer sehr einfach und übersichtlich. HTML Squeezer optimiert den HTML Code in mehreren Formen. Zum einen werden Leerzeichen, Kommentare sowie unötige Attribute oder gar Tags entfernt, aber auch HTML Tags durch andere, kürzere Tags ausgetauscht.

Zunächst muss der Ordner angegeben werden, in dem die HTML Dateien, deren Code optimiert werden soll. Dabei kann man einen kompletten Ordner, mit Unterverzeichnissen, oder nur bestimmte Dateien angeben. In der unregistrierten Shareware-Version können lediglich 6 Dateien auf einmal optimiert werden.

Auswahl des Startverzeichnisses bzw. der Dateien

Mit einem Klick auf den Button "HTML optimieren", wird der Code von den Dateien optimiert.
Zuvor sollte man sich jedoch die Optionen anschauen, um etwaige Probleme, die nach einer Optimierung aufgetreten könnten, zu vermeiden.

Auswahl der Optimierungsoptionen

Hierbei kann man, wie Sie sehen, die Leerzeilen, die Leerzeichen sowie Kommentare und auch nicht notwendige Anführungszeichen entfernen lassen. Laut dem W3C sollen jedoch die Attribute in Anührungszeichen stehen.
Bei den Tags ist es nur logisch, auf diese Funktionalität zurückzugreifen. Ein Text, der mit ausgezeichnet ist, wird Fett gedruckt. Das gleiche erreicht man jedoch auch mit dem Tag "".
Und schon hat man das ein oder andere Zeichen gespart.

Weitere Funktionen

HTML Squeezer bietet noch weitere Funktionen. So kann man, nur zur Sicherheit, die Dateien vor einer Optimierung sicherstellen, falls doch Komplikationen auftreten sollten, oder die Ergebnisse in einen anderen Ordner kopieren.
Eine weitere tolle Option ist, das man das Ergebnis aus einer Optimierung direkt auf einen FTP Server übertragen lassen kann. Hierbei müssen die FTP Einstellungen im Menüpunkt "Ausgabe" gesetzt werden.

Das Ausgabeverzeichnis bzw. den FTP Server wählen

Bei den Einstellungen für den FTP Server müssen die Adresse des FTP Servers, ihr Benutzername, sowie das Passwort (diese Daten müssten Sie von ihrem Webhoster erhalten haben), und das Ausgabeverzeichnis auf dem Server angegeben werden.

Die FTP Einstellungen im HTML Squeezer

Das Ausgabeverzeichnis muss nicht angegeben werden, wenn Sie die Dateien im Verzeichnis ihrer Startseite kopieren wollen.

Als besonderes Schmankerl hat der HTML Squeezer noch die Anzeige einer Statistik. In ihr wird angegeben, um wieviel der Prozent die Dateigröße verringert worden ist. Bei 25% kann das ganz schon kostensparend sein, wenn man an die Trafficgebühren denken muss.

Allgemein kann man sagen, das der HTML Squeezer ein tolles kleines Tool ist. Für nur 15 € Registrierungsgebühr kann man den HTML Squeezer ohne Einschränkungen benutzen. (tf)

HTML Squeezer

Weiterführende Links:
HTML Code optimieren, andere Ansätze

PHP Code in HTML Dateien ausführen

Sauberer HTML – Code

Galerie der (Tabellen) Layouts

Thiemo — Wed, 28 May 2008 10:00:00 +0000

Es gibt so rund drei bis vier Layoutformen im Internet. Nach einer dieser Formen ist fast jede Website aufgebaut. Wie ein solches Layout mit HTML aussieht und erstellt wird erfahren Sie hier.
Der Klassiker

Die wohl älteste Layoutform im Web sieht in etwa so aus. Die Bereiche sind fest abgesteckt, und bieten einen festen Rahmen für die Inhalte. Gerade in den ersten Jahren im Webdesign hat sich diese Form bewährt.

Das klassische Layout

Was vielleicht für diese Form sprach war vor allem die Einfachheit der Handhabung, zudem ist diese Form sehr kompatibel mit Frames.
Aus ihr kann man leicht eine Frame-Struktur machen, und die Inhalte übertragen.

Der Code für ein solches Layout ist recht einfach. Es besteht aus einer Tabelle mit insgesamt 2 Zeilen und drei Zellen.
Standardmäßig werden in der Breite 750 Pixel und in der höhe 500 Pixel für das Rohdesign gewählt.

Der Code

Logo + Werbebanner
Menü Inhalt

Wie man sieht hatte auch in dieser alten Layout-Form die Werbung ihren Platz.

Mal anders...

In letzter Zeit hat sich eine neue Layout-Form etabliert. Nicht wie im klassischen Layout gibt es eine Menüleiste, sondern zwei, die auch entsprechend genutzt werden. Hierbei fallen die zwei Menüleisten ein wenig "schmaler" aus. Die zweite Menüleiste (meist die Rechte) wird oft für kleine Werbebuttons, oder für Newsletter-Formulare verwendet.

Eine neuere Form

Auch hiervon gibt es bereits Variationen, es wird z.B. selbst die "Logo+Werbebanner" - Leiste mit einem Menü durchzogen, oder es gibt noch eine weitere Leiste über dem Inhalt.

Der Code
Logo + Werbebanner Menü 1 Inhalt Menü 2

Noch sowas...

Die dritte Form die wir ihnen vorstellen wollen ist sehr nutzungsorientiert. Sie hat keine Navigationsleiste wie sie "normalerweise" anzutreffen ist. Die Navigation läuft über eine einzige Zeile direkt unter der "Logo+Werbebanner" - Leiste.
Dies Art wird z.B. bei Seiten mit wenigen Menüpunkten verwendet.
Kleine Firmenpräsentationen mit 3 oder 4 Menüpunkten greifen auf diese Art der Navigation zurück.

Speziell für kleine Präsentationen

An dieser Version ist echt nicht viel dran, doch kann man auch diese jeweils mit ein oder zwei Navigationsleisten kombinieren.

Der Code

Logo + Werbebanner Menüleiste Inhalt

Diese kleine Galerie sollte einen kleinen Überblick über die verschiedenen Layout-Formen im Internet geben, aber soll auf keinen Fall die Kreativität einschränken.
Nein bei diesen Layouts handelt es sich um "Rohlinge" die in jeder Hinsicht erweitert werden können.

Weiterführende Links:
Haarlinien Tabellen

HTML Kurs – Tabellen

Moderne Tabellendefinitionen in HTML

HTML Kurs – Tabellen

Thiemo — Wed, 28 May 2008 10:00:00 +0000

Mit Tabellen kann man Objekte, Grafiken oder Texte auf leichte Art und weiße in einem Layout unterbringen. Wie Sie diese Tabellen erstellen, erfahren Sie im vierten Teil.
Oben die Werbung, Links das Menü, in der Mitte der Text. So in etwa sieht bei den meisten Webseiten das Layout aus. Die feste Struktur wird hier von Tabellen erzwungen. Es gibt Programme, die das Layouten leicht machen, wie z.B. Dreamweaver, der eine extra Layoutansicht hat. Hier wollen wir ihnen jedoch einfach zeigen, wie sie praktisch mit Tabellen umgehen.

Erstellen Sie auch hierzu eine neue HTML-Seite mit der Grundstruktur, der Code sollte wie folgt aussehen.

Der Titel

Erste Spalte Zweite Spalte Dritte Spalte

In ihrem Browser sollten Sie dies hier sehen.

Eine einfache Tabelle

Eine Tabelle wird in HTML mit dem
Tag eingeleitet. Man kann der Tabelle feste Größen mit den Attributen "width" und "height" geben. Das "height" Attribut ist eher optional, da sich die Inhalte ja nicht nach einer festgelegten Höhe orientieren, der Inhalt ist nunmal so groß. Eine Zeile wird in HTML mit dem Tag eingeleitet. Diese eine Zeile hat dann eine bestimmte Anzahl von Feldern. Diese Felder werden mit
festgelegt. In ihnen kann man Texte oder Bilder ausgeben. Zeile für Zeile ist logisch angeordnet. Man kann auch dem Tag die Attribute "width" und "height" geben. Standardmäßig wird die gesamtbreite der Tabelle unter den einzelnen Zellen aufgeteilt. Wie sie in diesem Code sehen, finden Sie eine neue "Zeichenkette", das " ". Diese Zeichenkette erzwingt ein Leerzeichen. Die Zelle richtet sich in der Höhe nach dem eingefügte Inhalt, wäre dort kein Leerzeichen, dann hätte die Zelle keinen Inhalt, somit würde es die Zelle gar nicht geben. Probieren Sie es einfach aus, entfernen Sie einmal das .

Sie können den Tag noch um weitere Attribute erweitern, cellspacing="0"
gibt an, wie weit (in Pixeln) die einzelnen Zellen voneinander entfernt sein sollen, zudem gibt cellpadding="0" an, wie weit der Text von dem Rand der Zelle entfernt sein soll. Das "border" Attribut gibt die dicke des Rahmens in Pixeln an. Desweiteren können Sie einzelne Farben definieren. Sie können mit dem Attribut "bgcolor" die Hintergrundfarbe der Tabelle, einer Zeile oder einer Zelle angeben. Mit dem Attribut "color" können Sie die Farbe des Textes angeben.

Und nun zu unserem einfachen Tabellenlayout das soll so aussehen:

Das Ergebnis (verkleinert)

Wie Sie sehen gibt es insgesamt zwei Zeilen. In der ersten Zeile gibt es nur eine Zelle, in der zweiten Zeile gibt es zwei Zellen, für das Menü, und für den Inhalt.

Der Code ist deshalb auch nicht weiter schwer:

Hier finden Sie ein wichtiges Attribut in den Tags. Das "valign" gibt an, woran sich der Text "orientieren" soll. Hier ist es jeweils "top", also oben. Wenn Sie dem Attribut den Wert "bottom" geben, dann ist der Text unten zu finden.

Im nächsten, und letzten Teil des HTML Kurses lernen Sie, wie sie die einzelnen Dokumente mit Links verknüpfen, und wie Sie ein einfaches Menü gestalten.

Weiterführende Links:
Haarlinien Tabellen

Moderne Tabellendefinitionen in HTML

HTML Kurs – Blocksätze, Überschriften, Horizontale Linien

Elemente Gruppieren

Thiemo — Wed, 28 May 2008 10:00:00 +0000

Websites haben meist mehrere logische Bereiche, z.B. bei Formularen. Diese können Sie mit HTML 4.0 auch als eigenen Bereich definieren, und optisch hervorheben.
Es war ein allgemeines Problem, das man sich in Formularen mit vielen Feldern schwer tat, einen Überblick zu behalten. Ein einfaches Formular zum Eintragen in ein Webverzeichnis hat z.B. mehrere logische Bereiche, für die Personendaten, die Websitedaten, sowie den Formular absenden/ abbrechen - Bereich.

Diese einzelnen Bereiche kann man mit den
Tag aus dem HTML 4.0 Standard fest auszeichnen, und optisch hervorheben. Mit dem besteht dann noch die Möglichkeit den Bereich einen eigenen Titel zu geben. Diese beiden Tags lassen sich natürlich auch auf Textabsätze, Ebenen anwenden, nur ist die anschaulichkeit bei Formularen am Deutlichsten.

Anwendung findet dieses Element beispielsweise auch bei einfachen Feedback Formularen oder Newsletterformularen.

Live Demo

Personendaten Name: Strasse: PLZ: Ort: Website Titel: URL: Beschreibung:

Absenden/ Abbrechen

Diese Objekte können Sie mit CSS noch beliebig formatieren. Die Ausgabe im Tag können Sie zudem noch mit HTML Befehlen verändern.

Das Beispiel mit CSS und HTML formatiert

width: 500; border-color: red; padding: 2">font-weight: bold; font-size: 8pt; font-face: Verdana; color: red">Personendaten Name: Strasse: PLZ: Ort:

width: 500; border-color: orange; padding: 2">font-weight: bold; font-size: 8pt; font-face: Verdana; color: orange">Website Titel: URL: Beschreibung:

width: 500; border-color: green; padding: 2"> font-weight: bold; font-size: 8pt; font-face: Verdana; color: green">Absenden/ Abbrechen

Weiterführende Links:
CSS Links: Unsichtbar

Fokussierte Elemente mit CSS

Fomularreihenfolge festlegen

Operator	Bedeutung	Übersetzung
!	nicht	not
lt	kleiner als	less than
lte	kleiner oder gleich als	less than or equal
gt	größer als	greater than
gte	größer oder gleich als	greater than or equal