CSS Boxmania * Einstieg in CSS * Galileo Press * Elisabeth Wetsch * eliZZZa * XHTML und CSS

Herzlich willkommen …

admin — Tue, 22 Jul 2008 00:38:26 +0000

… auf der WebSite zum Buch "Einstieg in CSS", das ich verfasst habe, um Ihnen das Kennenlernen von XHTML und CSS zu erleichtern.

Auf diesen Seiten finden Sie neben den Übungsdateien zum Buch nützliche Informationen, Tipps & Tricks zu den Themen XHTML, CSS, Seitenvorlagen, tabellenfreies Design u.v.m.

Das Design dieser Site
basiert auf dem kostenlosen Template "Simply AiO" von Nuvio.cz. Für den Header mit den Goldfischen habe ich – in Anlehnung an das Cover-Design des Buches – zwei Bilder von Fotolia verwendet.

Navigation
Hier finden Sie immer wieder zur Homepage zurück, Informationen über den Verlag Galileo Press und über mich. Im FORUM finden Sie Diskussionen rund um XHTML und CSS und können Fragen hinterlassen, die ich zu beantworten versuche. Schließlich können Sie mir über die Seite KONTAKT Nachrichten zukommen lassen.

Sidebar
An der rechten Seite finden Sie alle Themen dieser Website, darunter die Übungsdateien aus dem Buch und vieles mehr, was Sie zu den Themen XHTML und CSS interessieren könnte.

Bilder & Medien einbinden

admin — Wed, 26 Nov 2008 04:50:33 +0000

Die wichtigsten Medien-Elemente sind img und object. Damit können Sie Bilder und Videos oder Flash-Objekte in eine Seite einfügen.

img
Beachten Sie, dass Bilder, die dem Design dienen, grundsätzlich über CSS definiert werden und nur solche Bilder, die explizit zum Inhalt gehören (also z.B. als Ergänzung eines Artikels) in die HTML-Seite eingefügt werden.
Auch das img-Element hat kein Ende-Tag.

Beispiel:

object
Das object-Element ist ein Container, der die verschiedensten Medien-Dateien enthalten kann.

Beispiel:
type="application/x-shockwave-flash" width="200" height="100">

Strukturelle Elemente

admin — Wed, 26 Nov 2008 03:31:17 +0000

Im Sinne der Barrierefreiheit aber auch der Suchmaschinenoptimierung ist es wichtig, Seiten mithilfe von sogenannten strukturellen Tags zu gliedern. Hier finden Sie eine vollständige Liste von HTML-Elementen mit dem Hinweis, ob es sich um strukturelle handelt.

Die wichtigsten Elemente zur Gliederung der Inhalte sind nachfolgend angeführt.

h1 bis h6 – Headings
Die Überschriften 1. bis 6. Ordnung können mittels CSS sehr ansprechend gestaltet werden.

Beispiel:

`Das ist eine wichtige Überschrift`

p – Paragraph / Absatz
Texte werden durch Absätze besser unterteilt und einfacher erfassbar.

Beispiel:

Das ist ein Absatz.

em und strong – Betonung und Wichtigkeit
Die beiden Tags ersetzen die veralteten HTML-Elemente und (italic/kursiv und bold/fett).

blockquote – Formschön zitieren
Zitate können mittels blockquote-Element ein attraktiver Blickfang Ihrer Seiten werden.

ul, ol, dl – Listen
Auch die Lesefreundlichkeit wird durch den Einsatz von strukturellen Elementen wie z.B. Listen verbessert. Dabei stehen ul unordered lists, ol ordered lists und dl definition lists zur Verfügung.

Beispiel:

Erster Listenpunkt Zweiter Listenpunkt Dritter Listenpunkt

hr – Horizontal Rule
Auch eine horizontale Linie gilt als strukturelles Element und kann kreativ gestaltet werden.

br – Line Break
Ein Zeilenvorschub dient ebenfalls der Unterteilung von Inhalten.

Sowohl hr als auch br haben kein Ende-Tag und werden als
und
notiert.

Division – das div-Element

admin — Wed, 26 Nov 2008 03:16:56 +0000

Eines der wichtigsten Elemente ist das "Division"-Element, welches verwendet wird, um Seiten in verschiedene Bereiche zu unterteilen. Es ersetzt heute die in HTML üblichen "Layout-Tabellen", die im Sinne der Barrierefreiheit nicht optimal interpretiert werden konnten.

Eine typische, sehr einfache, Seitenstruktur mit div-Elementen könnte etwa wie folgt aussehen. Dabei werden sämtliche div-Elemente mit einer ID (identification) versehen, damit man jedes "von außen" adressieren (also ansprechen) kann.
(Beim nachfolgenden Code sind html- und head-Bereich weggelassen.)

Inhalte Header
Navigationsleiste Inhalte Texte / Bilder Inhalte Fußzeile

Das div-Element hat per se keine Eigenschaften und keine Funktion. Erst durch die Zuweisung von Eigenschaften in einem Stylesheet erhält es sein Aussehen.

Das div-Element ist ein sogenanntes Block-(Level)-Element. Damit ist folgendes Verhalten vorgegeben:

Nimmt die gesamte Breite seines Elternelements ein

Beginnt immer eine neue Zeile

Folgt den Regeln des Boxmodells und kann daher u.a. die Eigenschaften width, height, padding, border, margin annehmen.

HTML versus XHTML

admin — Wed, 26 Nov 2008 02:56:35 +0000

Mit der Einführung von XHTML wurden die Regeln von HTML strenger definiert, um damit einen einfacheren Übergang zu nächsten Generationen von Struktursprachen zu schaffen.
Nachfolgend die wichtigsten Regeln:

DocType Definition
Am Anfang eines jeden XHTML Dokuments muß eine DTD stehen und sie muß gegen eine von drei DocTypes validiert werden: Strict, Transitional oder Frameset. Hier die drei Codes:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Wohlgeformt
Dokumente müssen “wohlformatiert” (well-formed) sein, d.h.

Ein XHTML Dokument muß mindestens aus den Elementen DOCTYPE, html, head, title und body bestehen.

Elemente müssen korrekt verschachtelt sein (Überlappungen sind nicht erlaubt),

Elemente müssen korrekt geschlossen sein,

die Schreibweise (Syntax) ist zu beachten.

Kleinbuchstaben
Alle Elemente, Parameter, Attribute & Werte müssen in Kleinbuchstaben geschrieben sein.

Korrekt schließen
Jedes Element muß korrekt geschlossen werden; d.h.

existiert zu einem Tag ein Ende-Tag, so muß dieses gesetzt werden, z.B. muß ein
immer mit
geschlossen werden (was in HTML nicht unbedingt notwendig war)

existiert kein Ende-Tag, so muß ein Element in sich geschlossen werden, z.B.
und zwar mit einem Leerzeichen und einem Schrägstrich vor der schließenden spitzen Klammer. Auch das war in HTML nicht vorgesehen.

Einzige Ausnahme: Die DocType Definition Tags (s. oben)

Werte in Anführungszeichen
Werte von Parametern müssen immer in Anführungszeichen stehen, z.B.
anstatt
Minimieren verboten
Die Verkürzung von Parametern/Attributen ist verboten, z.B.

anstatt

Die Bereiche einer (X)HTML-Seite

admin — Wed, 26 Nov 2008 02:50:07 +0000

Die Grundstruktur einer HTML-Seite ist ganz einfach:

Seitentitel Inhalte

Um eine gültige (valide) XHTML-Datei zu schreiben, bedarf es einiger weniger Ergänzungen:

Seitentitel Inhalte

Ob Ihre Seite im Sinne der vom W3C definierten Webstandards gültig ist, können Sie mit einem entsprechenden Markup-Validator testen.

DTD – DOC TYPE DEFINITION
Der "Vorspann" jeder gültigen XHTML-Seite deklariert, welchen Standards der nachfolgende Code folgt. Moderne HTML-Editoren fügen so eine DTD automatisch an den Anfang einer (X)HTML-Datei ein.

html
Der html-Tag umhüllt den gesamten Dokumentbereich und gilt als das oberste hierarchische Element einer (X)HTML-Datei.

head
Im head-Element befinden sich Anweisungen für Browser, Suchmaschinen und Server. Die Inhalte im head-Element sind auf der Seite selbst nicht sichtbar – jedenfalls nicht direkt.

title
Innerhalb des head-Elements nimmt der title-Tag eine wichtige Stellung ein. Er sollte wichtige Keywords für Suchmaschinen beinhalten, dient als Titel für Lesezeichen und als Titel eines Suchmaschineneintrags.

meta
Verschiedene meta-Tags innerhalb des head-Elements können zusätzliche Informationen für Browser, Server und Suchmaschinen liefern, z.B. den Zeichensatz, den eine Seite verwendet.

link
Externe Dokumente, die von der (X)HTML-Seite benötigt werden, z.B. JavaScript-Dateien oder Stylesheets, werden mit Hilfe von link-Tags verknüpft.

body
Innerhalb des body-Tags werden die Inhalte einer Seite platziert, dies ist der im Browser sichtbare Bereich einer Seite.

Was ist HTML?

admin — Wed, 26 Nov 2008 02:17:35 +0000

HTML (Hyper Text Markup Language) ist eine sogenannte Seitenbeschreibungssprache und dient dazu, Inhalte einer Webseite zu strukturieren.

Auf Basis von HTML wurde vom World Wide Web Consortium (W3C) XHTML (Extensible Hyper Text Markup Language) entwickelt, welche die Anforderung an strikte Trennung von Inhalt und Aussehen unterstützt.

So basiert XHTML auf der Grundstruktur von HTML und nützt auch weitgehend die gleichen Tags, allerdings ist die Syntax strenger. Auch moderne Content Management Systeme geben Inhalte in XHTML aus. Gleichzeitig wird das Aussehen der Seiten von externen Stylesheets (CSS Cascading Style Sheets) gesteuert.

Praktische Übungen

admin — Tue, 29 Jul 2008 00:59:34 +0000

Im zweiten Teil des Buches gestalten Sie eine Mustersite mit CSS anhand vieler praktischer Übungen.

Dateien downloaden

Seitenlayouts

admin — Fri, 25 Jul 2008 02:53:18 +0000

Im dritten Teil des Buches werden Seitenlayouts für verschiedene Anforderungen vorgestellt und erklärt.

Dateien downloaden

DVD zum Buch

admin — Thu, 24 Jul 2008 02:53:03 +0000

Dem Buch liegt eine DVD bei, auf der Sie neben nützlichen Tools und Programmen Proben des Video-Trainings zu "Einstieg in CSS" und die Übungsdateien aus dem Buch finden.