CSS Boxmania * Einstieg in CSS * Galileo Press * Elisabeth Wetsch * eliZZZa * XHTML und CSS » xhtml http://www.cssboxmania.com Bewegen Sie sich in Ihren Stylesheets wie ein Fisch im Wasser... Wed, 26 Nov 2008 04:53:11 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Division – das div-Element http://www.cssboxmania.com/2008/11/26/division-div-element/ http://www.cssboxmania.com/2008/11/26/division-div-element/#comments Wed, 26 Nov 2008 03:16:56 +0000 eliZZZa http://www.cssboxmania.com/?p=105 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.)

<body>
<div id="header">Inhalte Header</div>
<div id="nav">Navigationsleiste</div>
<div id="content">Inhalte Texte / Bilder</div>
<div id="footer">Inhalte Fußzeile</div>
</body>

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:

  1. Nimmt die gesamte Breite seines Elternelements ein
  2. Beginnt immer eine neue Zeile
  3. Folgt den Regeln des Boxmodells und kann daher u.a. die Eigenschaften width, height, padding, border, margin annehmen.
]]> http://www.cssboxmania.com/2008/11/26/division-div-element/feed/ 0 HTML versus XHTML http://www.cssboxmania.com/2008/11/26/xhtml/ http://www.cssboxmania.com/2008/11/26/xhtml/#comments Wed, 26 Nov 2008 02:56:35 +0000 eliZZZa http://www.cssboxmania.com/?p=101 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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"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 <p> immer mit </p> geschlossen werden (was in HTML nicht unbedingt notwendig war)
  • existiert kein Ende-Tag, so muß ein Element in sich geschlossen werden, z.B. <br /> 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. <table width=”100″> anstatt <table width=100>

Minimieren verboten
Die Verkürzung von Parametern/Attributen ist verboten, z.B. <td nowrap=”nowrap”> anstatt <td nowrap>

 

]]> http://www.cssboxmania.com/2008/11/26/xhtml/feed/ 0 Die Bereiche einer (X)HTML-Seite http://www.cssboxmania.com/2008/11/26/bereiche-einer-xhtml-seite/ http://www.cssboxmania.com/2008/11/26/bereiche-einer-xhtml-seite/#comments Wed, 26 Nov 2008 02:50:07 +0000 eliZZZa http://www.cssboxmania.com/?p=98 Die Grundstruktur einer HTML-Seite ist ganz einfach:

<html>
     <head>          
          <title>Seitentitel</title>
          <meta />
          <link />
     </head>
     <body>
     Inhalte
     </body>
</html>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
          <title>Seitentitel</title>
          <meta />
          <link />
     </head>
     <body>
     Inhalte
     </body>
</html>

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.

]]> http://www.cssboxmania.com/2008/11/26/bereiche-einer-xhtml-seite/feed/ 0 Was ist HTML? http://www.cssboxmania.com/2008/11/26/html/ http://www.cssboxmania.com/2008/11/26/html/#comments Wed, 26 Nov 2008 02:17:35 +0000 eliZZZa http://www.cssboxmania.com/?p=96 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.

 

]]> http://www.cssboxmania.com/2008/11/26/html/feed/ 0