Anzeige
Tutorialbeschreibung

(X)HTML Ein- und Tabellenlayout Umsteiger Tutorial

(X)HTML Ein- und Tabellenlayout Umsteiger Tutorial

In diesem Tutorial möchte ich auf die Besonderheiten von (X)HTML Seiten eingehen und wie so was aufgebaut wird. Wir werden zudem auch eine kleine Seite erstellen. Dieser wird aber nicht den vollen Umfang bieten und auch nicht weiter auf Crossbrowser Kompatibilität eingehen, sondern soll den Einsteiger bzw. Tabellenlayout Umsteiger eine Hilfe sein (X)HTML zu verstehen.


In diesem Tutorial möchte ich auf die Besonderheiten von (X)HTML Seiten eingehen und wie so was aufgebaut wird. Wir werden zudem auch eine kleine Seite erstellen. Dieser wird aber nicht den vollen Umfang bieten und auch nicht weiter auf Crossbrowser Kompatibilität eingehen, sondern soll den Einsteiger bzw. Tabellenlayout Umsteiger eine Hilfe sein (X)HTML zu verstehen.

Ich fange mit am besten mit eine kurze Einleitung in die Besonderheiten von (X)HTML an.

Was macht (X)HTML aus?

Um das Kurz auf den Punkt zu bringen, (X)HTML ist eine Kombination aus HTML und CSS. Im HTML Dokument wird der Inhalt und der Struktur angegeben während per CSS das Aussehen gemacht wird. Schlicht und einfach, mit (X)HTML wird der Inhalt (HTML) vom Aussehen (CSS) getrennt. Damit ist es möglich, eine Webseite so auf Barrierefreiheit anzupassen.

Wie ich schon geschrieben habe, werde ich nicht wirklich tief ins Detail gehen. Wer sich darüber mehr informieren möchte, dem empfehle ich bei Wikipedia nach zu lesen unter XHTML bei Wikipedia. Es gibt auch weitere informative Seiten im Netz.

Nun möchte ich aber mit dem eigentlichen Tutorial beginnen.

Um eine (X)HTML Seite zu erstellen, braucht ihr keine besondere Tools. Unter Linux benutze ich „SciTE“. Ähnliches Tool unter Windows währe „PS Pad“. Natürlich könnt ihr auch Dreamweaver, NVU oder einen Editor vom Betriebssystem benutzen. Da ich aber ohne WYSIWYG Editor arbeite setze ich bei diesem Tutorial auf SciTE.

Schritt 1. Dokumenten Struktur

Erstellt euch ein Verzeichnis und nennt diesen „xhtml_tut“ Darin erstellt ihr nun ein weiteres Verzeichnis und nennt diesen „style“. Im Verzeichnis „style“ erstellt ihr jetzt ein neues Textdokument und nennt diesen „style.css“. Wechselt nun eine Ebene höher ins „xhtml_tut“ Verzeichnis und erstellt dort wieder einen neuen Textdokument und nennt diesen „index.html“. Zum Schluss erstellt ihr noch ein weiteres Verzeichnis namens „img“.

Wenn ihr das habt, sollte es von der Struktur so aussehen:

Bilder

„index.html“ wird, wie der Name schon sagt, unser HTML Dokument sein wo wir den Inhalt strukturieren. Im „style“ Verzeichnis liegt unsere CSS Datei „style.css“ wo wir unsere Angaben machen für das Aussehen. Ich werde für dieses Tutorial nicht nur Inhalt vom Aussehen trennen, sondern auch gleich die Angaben dazu. In „img“ kommen dann unsere Grafiken für die Webseite. Vom Webseiten Design bis zu den den kleineren Grafiken. Die Grafiken die wir verwenden werden könnt ihr hier herunterladen und in euren „img“ Verzeichnis entpacken.

Nochmals zur Erinnerung, ich werde hier nur eine Ein- bzw. Tabellenlayout Umsteiger Tutorial machen. Ich vermittele also Basiswissen um (X)HTML.

Schritt 2. Grundgerüst

Nun bauen wir unseren Grundgerüst für das (X)HTML Dokument. Dazu öffnet ihr bitte die „index.html“ Datei. Eine (X)HTML Datei ist recht Simpel aufgebaut:

<html>

<head>

<title>Ein- und Tabellenlayout Umsteiger</title>

</head>

<body>

</body>

</html>

So sieht der Aufbau eines HTML Dokuments aus. Dies reicht aber nicht um es zu einem (X)HTML Dokument zu machen, dazu muss die Documenttypangabe gemacht werden um es Valide zu machen.

Wir nehmen hier die (X)HTML Strict Angabe. Dieses muss an erster Stelle stehen. Normal wird XML üblich, ganz am Anfang eine Angabe gemacht die „<?xml version=“1.0“ encoding=“UTF-8“?>“ lautet. Unter dem Internet Explorer führt dies aber zu einem Fehler (aufgrund von einer von vielen Bugs im IE), der den IE in den Quircksmodus versetzt. Um dies zu verhindern und den IE halbwegs Standard konform verhalten zu lassen, lassen wir diesen Eintrag weg und setzen ihn im „html“ tag.

Zudem müssen wir unsere externe CSS Datei in unseren (X)HTML Dokument importieren. Hier setzen wir auf den „link“ tag. Mit den benötigten „meta“ tags sieht unsere Gerüst nun so aus:

<!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" xml:lang="de" lang="de">

<head>

<title>Ein- und Tabellenlayout Umsteiger</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="language" content="de" />

<meta http-equiv="imagetoolbar" content="no" />

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

</head>

<body>

</body>

</html>

Die Meta Angabe „<meta name="language" content="de" />“ gibt an unter welche Sprache das Dokument läuft. In diesem Fall ist es Deutsch während „<meta http-equiv="imagetoolbar" content="no" />“ eine Meta Angabe für den IE6 ist um diese nervige Anzeige zu bekomment, wenn der Mauszeiger über einer Grafik „schwebt“. Im „link“ tag die „media“ Angabe gibt an den Browser weiter, dass diese CSS Datei für die Ausgabe am Bildschirm ist.

Wir werden für diese Übung eine Seite mit einem Header, einer Navigation, Inhalt und ein Footer erstellen. Dazu brauchen wir in diesem Beispiel 5 „div“ tags (so genannte Container). Diese bekommen die Namen wie eben beschrieben. Der erste Container bekommt den Namen „main“ der alle anderen Container umschließen wird. Das sieht dann wie folgt aus:

<!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" xml:lang="de" lang="de">

<head>

<title>Ein- und Tabellenlayout Umsteiger Tutorial</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="language" content="de" />

<meta http-equiv="imagetoolbar" content="no" />

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

</head>

<body>

<div id=“main“>

<div id=“header“><span>Ein- und Tabellenlayout Umsteiger Tutorial</span></div>

<div id=“navi“></div>

<div id=“content“></div>

<div id=“footer“></div>

</div>

</body>

</html>

Vom Prinzip her, wäre unser (X)HTML Grundgerüst fertig und alles weitere würde dann nur noch per CSS gemacht werden. Da wir aber noch keinen Inhalt sowie keine Navigation haben, müssen wir später nochmal diese Datei editieren. Wie ihr auch noch erkennen könnt, alles ist klein geschrieben. In (X)HTML ist es wichtig alles klein zu schreiben. Also Tags und HTML Elemente. Ansonsten ist das Dokument nicht valide.

Schritt 3. CSS erstellen

Ich werde auch hier nicht in die volle Tiefe von CSS gehen. Dies würde den Rahmen dieses Tutorials sprengen. Ich werden aber versuchen so gut es zu erklären was gemacht wird und wieso. CSS hat eine fülle von Möglichkeiten und Mittel Elemente in einem (X)HTML Dokument anzusprechen. Ich werde hier aber nicht wirklich viele außer Klassen, ID und Vererbungen nutzen. Um weiteres zu (X)HTML und CSS zu erfahren, empfehle ich sehr gerne selfhtml.org sowie css4you.de. Natürlich gibt es im Netz noch viele weitere Informationsquellen sowie auch Lektüre aus dem Handel.

Öffnet jetzt bitte eure „style.css“ Datei im Unterverzeichnis „style“. Da werden wir zuerst unsere Container und Body Angaben machen. Da wir noch keine Links und Navigation haben, lassen wir diese zuerst weg, damit ihr auch gleich die ersten Ergebnisse seht und wie einfach das geht mit XHTML im Gegensatz zu Tabellenlayouts.

Als erstes wollen wir unseren „body“ tag ansprechen und alle angaben machen die über den ganzen Dokument gelten sollen z. B. Schriftart und Schriftgröße sowie Schriftfarbe. Im sinne von Barrierefreiheit, sollte immer eine Relative Schriftgröße genommen werden. Das wäre unter anderem die Angabe „em“. In diesem Tutorial werden wir aber eine feste Schriftgröße nehmen (px). Unser CSS Datei sollte unter Berücksichtigung nun wie folgt aussehen:

body {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #333366;

}

Da wir unsere Webseite zentrieren möchten und dies auch im IE so sein soll, geben wir auch eine Textausrichtung an. Dies ist wie gesagt für den IE von Nöten weil es sich nicht wie Standard konforme Browser an die vom W3C Standards hält. Zudem möchten wir die Abstände (Außenabstand) von alle Elemente auf 0 (Null) definieren:

body {

background-color: #CCCCCC;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #333366;

text-align: center;

margin: 0;

}

Somit wäre unsere Body Angabe fertig. Da wir keinen Hintergrundgrafik für den Body verwenden, brauchen wir auch keine Grafik anzugeben. In diesem Fall haben wir dem Hintergrund mit „background-color“ eine Farbe gegeben.

Da „body“ ein festgelegter HTML Element ist, brauchen wir in unserem CSS Datei keine besondere Ansprechungen zu verwenden. Für unsere Container aber, müssen wir in unserem CSS Datei festlegen wie wir sie ansprechen. In CSS wird das unter die ID (Identifikator) und Klassen geregelt. Da wir diese Namen selbst geben können, müssen wir sie mit diese „Regeln“ ansprechen. Elemente in einem HTML Dokument mit Festgelegte Namen können wir wie „body“ ohne Besonderheiten ansprechen. Für ID's verwenden wir vor dem Namen eine Raute (#). Bei Klassen nutzen wir den „.“ (Punkt). Wir fangen mit „main“ an.

Diesen möchten wir zentrieren und auf eine feste Breite setzen. Für den IE ist dieses Element schon zentriert, aber wir wollen hauptsächlich erstmal Standard konform Codieren. Um dieses Element Standard konform zu zentrieren, müssen wir dies per „margin“ (Außenabstand) regeln. Die Breite legen wir anhand der breitesten Grafik fest. Dies ist der Header und ist aus dem PSD-Tutorials.de Download Archiv. Dieser hat eine Breite von 800 Pixel. Mit „text-align“ heben wir die Textzentrierung vom IE wieder auf und setzen den auf Links.

#main {

width: 800px;

text-align: left;

margin: 50px auto 50px auto; /* margin: oben rechts unten links */

}

Nun machen wir die Angaben für die „header“, „navi“, „content“ und „footer“ ID Container.

Unseren „header“ Container möchten wir auch auf 800 Pixel Breite haben und eine Gesamt Höhe von 154 Pixel. 154 Pixel weil unser Header Grafik so hoch ist. Da wir aber in der HTML Datei im „header“ Container einen „span“ tag haben mit etwas Text, wird dieser über den Grafik zu sehen sein. Warum haben wir diesen eigentlich rein getan?

(X)HTML Seiten sollten ja, wie schon erwähnt, Barrierefrei sein. Das Heisst, wenn ein Benutzer sehbehindert ist und einen „Screenreader“ nutzt, sollte der Quellcode vom HTML Dokument so schlank wie möglich sein. Es sollten auch Angaben zu gewissen Container geben um diesen auch einen Sinn zu geben, weil der Screenreader diese erkennt, aber für den Benutzer nicht richtig Interpretieren kann. Notfalls wird es einfach übersprungen. In einem anderen Fall, wenn ein Benutzer aus Technische gründe keine Grafiken laden kann oder möchte bzw. keine Stile laden möchte, so kann dieser dennoch einen sinnvollen Struktur erkennen.

In unserem Fall haben wir vor für diese Eventualitäten „gerüstet“ zu sein. Aber wir möchten für die Grafische Ausgabe diesen Text nicht sehen. Dazu blenden wir mit „span“ den Inhalt aus:

#header {

width: 800px;

height: 154px;

background-image: url(../img/header.jpg);

}

#header span {

display: none;

}

Unseren „navi“ Container möchten wir auf 170 Pixel breite haben und unseren „content“ auf 630 Pixel. Mit die Breite von 630 Pixel für den „content“ Container, liegen wir im Grafischen Content Bereich. Eine Höhe legen wir nicht fest weil diese durch den Inhalt gestreckt wird. Aber Moment, wir haben ja keine Grafik für den „content“ und „navi“ Container. Was labbert denn der Dawg da? Das ist richtig. Noch haben wir keinen und wir werden für diese 2 Container auch keine Hintergrund Grafiken verwenden. Das liegt nämlich daran, dass unter CSS die Navigation Container nicht dem des Content Containers in die Höhe streckt. Wäre also die Navigation Container länger als die vom Inhalt, so hätten wir eine Grafische Lücke zwischen dem „content“ Container und dem „footer“ Container. Ok bei dieser Webdesign wäre das nicht weiter schlimm da dies mit dem „body“ Hintergrundfarbe nicht auffallen würde, aber bei andere Designs die auf diesem Layout aufbauen würden, wäre das sichtbar. Daher habe ich mich dazu Entschieden diesen weg des „verbergens“ gewählt um auch diesen „Trick“ euch zu zeigen. Dazu kommen wir nach die Gestaltung von „navi“ und „content“.

#navi {

width: 170px;

}

#content {

width: 630px;

}

Wenn ihr jetzt oder gar vorher die index.html Datei in Firefox, Opera oder einem anderen Standard konformen Browser angeschaut habt, dann erkennt ihr nicht viel. Das liegt unter anderem daran, dass wir keinen Inhalt haben und auch keine feste Höhen außer dem des Header angegeben haben. Wenn wir Feste breiten angegeben hätten, würden wir jetzt im Bereich Navi und Content einen ziemlichen Murks sehen. Das liegt daran, dass unter CSS die Container einem Fluss unterlaufen. Elemente orientieren sich an ihrem Elternelement und nachkommende Elemente richten sich im Fluss an ihren Vorgänger. Da wir ja den Contentbereich neben dem Navigationbereich haben möchten, müssen wir diesen „floaten“. Mit den „float“ sagen wir im Prinzip „Alles was nach dem „navi“ Container kommt, soll diesen umfließen und oben bündig daneben anfangen.“ Dazu ergänzen wir unseren „navi“ Container mit dem Float.

#navi {

width: 170px;

float: left;

}

Zum Schluss fertigen wir unseren „footer“ und heben mit diesem den Float vom „navi“ Container auf, sonst würde das im Browser zu weitere Verschiebungen der Elemente führen. Den Footer geben wir zudem eine feste Breite und Höhe und einen Hintergrund Grafik.

#footer {

background-image: url(../img/footer_bg.gif);

width: 800px;

height: 21px;

clear: left;

}

Damit wäre unser Grundgerüst fertig. STOOOP!!! Werdet ihr jetzt sicher denken, ja klar, wir haben ja immer noch keinen Hintergrundgrafik für Navi und Content. Dazu kommen wir jetzt ;-)

Wir ergänzen unseren „main“ Container mit folgende Angabe und haben dann den gewünschten Effekt:

#main {

background-image: url(../img/content_bg.gif);

background-repeat: repeat-y;

width: 800px;

text-align: left;

margin: 50px auto 50px auto;

}

Unsere index.html Datei erweitern wir nun um ein paar Absätze. Diese füllen wir im Inhaltsbereich mit einem Uralten Drucktest Text:

<h1>Lorem ipsum dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Damit wir erste Ergebnisse sehen können, geben wir unsere Navigation eine Vorübergehend feste Höhe von 200 Pixel. Somit hat unsere Navigation Volumen und wird im Dokumentenfluss auch berücksichtigt.

Eure Dokumente sollten im Editor ungefähr so Aussehen:

index.html

Bilder

style.css

Bilder

An dieser Stelle ist das Tutorial zu ende. Hier habe ich nur die Basics erwähnt und wir haben ein Layout erstellt auf Simpelste weise. Wenn der Wunsch besteht, dann werde ich mich an einen weitere Tutorial setzen wo wir dann die Navigation erstellen und Formatieren sowie weitere Formatierungen des Inhaltes.

Ich hoffe ich konnte euch auf eine Leichte und verständliche weise in die Vorzüge von (X)HTML heranbringen. Ich hoffe auch, dass ihr nun die Vorteile von (XHTML) erkennt habt im Gegensatz zu Tabellenlayouts. Nicht nur das der Code schlanker ist und Inhalt vom Aussehen getrennt sind, die Dateigröße ist auch um ein Vielfaches kleiner und spart somit auch Traffic und bares Geld. Ob Modem user, Volumenflats oder Servertraffic, eure Besucher und Hoster wird sich Freuen :-)

Greetz

K-Dawg


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ArtiHl
  • 09.01.2011 - 13:40

Sehr gut.Gute Erklärung für Anfänger.

Portrait von killerworldmt2
  • 08.01.2011 - 14:24

Gutes Tutorial werde es weiterempfehelen

Portrait von stefan1987
  • 28.08.2010 - 20:58

zum einsteigen ganz ok, danke!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.04.2010 - 12:07

Für mich wars leider wenig informativ, da ich XHTML schon beherrsche. Ich hatte eher gehofft, dass mir hier der Umstieg vom Tabellenlayouts auf CSS-basierte Layouts erleichtert wird.
Leider nein ^^

Witziger Weise fand ich sogar ein Element, das mir bisher unbekannt war:


Danke dafür

Portrait von JulianART
  • 02.04.2010 - 01:44

cool hat mir sehr geholfen danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 25.02.2010 - 18:07

cool hat mir zum Einstieg gut geholfen

Portrait von Rapid15
  • 13.02.2010 - 18:20

Danke für dieses cool Tutorial ;)

5star's ;)

Portrait von mediaoffice
  • 19.01.2010 - 11:34

als einstieg gehts schon. danke

Portrait von mohnhaupt
  • 24.12.2009 - 09:59

Möchte mich dazu nicht äußern.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 14.07.2009 - 19:59

Das ist doch kein XHTML! Das is ja nichtmal XML! Nachlernen bitte!!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.04.2009 - 08:21

Danke ! Dieses Tut hat mir sehr geholfen. ;-)

Portrait von nfo17
  • 23.01.2009 - 01:39

hört sich ganz gut an wie die basics erklärt wurden, hat mir auch weitergeholfen. wegen der grammatik teilweise nicht ganz einfach zu verstehen aber wenn man die sätze dann nochmal liest versteht man was gemeint ist =)
danke dafür :)

Portrait von understateman
  • 05.08.2008 - 10:41

...nicht schlecht das tut, aber dein deutsch ;-)

Portrait von puur
  • 29.06.2008 - 15:44

hmm die dateien kann man nichmehr downloaden .. kann das evtl. jemand uppen ? würde mir dieses tut nämlich auch ganz gerne zu gemüte führen.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.04.2008 - 15:57

danke das hab ich gesucht

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.02.2008 - 08:41

Hübsch das mein "Design" als Vorlage dient.
Is zwar total schlecht, aber schön das es zu was zu gebrauchen ist xD.

Tutorial is net schlecht.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.11.2007 - 09:26

Ich finde das Tut ganz Ok.
Einsteiger können sich erst mal was bauen, Vertiefungen folgen dann unmittelbar :).

Ich zumindest hab das Tut grad im richtigen Moment entdeckt, der Grundaufbau, speziell in CSS, war bei mir grade Thema.

Danke

Portrait von m-steffen
  • 05.11.2007 - 17:29

nachgemacht - war gleich ok .
!! und habe alles verstanden !!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 23.08.2007 - 21:28

Ganz in Ordnung. Vielen Dank.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.05.2007 - 20:35

Rechtschreibung bzw. Satzbau ist überarbeitungswürdig, da sollteste ein wenig drauf achten. Ansonsten finde ich es nett gemacht - kannte mich zwar schon mit CSS und Divs aus, aber habe trotzdem noch was neues dazugelernt. Danke dafür!

x
×
×