[Tutorial] XHTML Anfänger Tutorial

11/03/2009 22:21 Eplotic#1
Hi @,

hier findet ihr ein relativ umfrangreiches Tutorial zu XHTML.

DIE EINLEITUNG:

Um mit einer Website zu beginnen, sollte man als Erstes die Grundlagen des World Wide Webs verstehen. Als allererstes sollte man sich darüber klar werden, dass eine Homepage nicht auf dem Computer gespeichert wird, sondern auf einem Server, der mit jedem PC der Welt in Kontakt treten kann. Er ist der Anbieter.

Jeder Anbieter braucht Jemanden oder etwas, der das abruft, so etwas nennt man Client und ist beim Internet ein so genannter Browser. Es gibt viele Browser, der Marktführer Internet Explorer, Firefox, Google Chrome, Opera und Safari sowie verschiedene kleinere Browser. Man sollte möglichst darauf achten, das die Homepage auf allen Browsern gleich gut anzusehen ist. Zum surfen empfehle ich Mozilla Firefox 3, aber das ist jetzt eine andere Geschichte.

Kommen wir nun zum Anfang der HTML-Seite. Als erstes sollte man sich überlegen, mit welchem Editor man arbeiten will, den Standard Editor oder irgendeinen anderen wie NoteTab. Das bleibt ihnen bei diesem Tutorial selbst überlassen.

Fangen wir nun mit der ersten HTML-Seite an. Jeder Tag muss wieder geschlossen werden.

Code:
<html>
</html>
Nun haben wir unser erstes Tag gesetzt. Platzieren wir nun innerhalb dieses Tags ein Head-tag:

Code:
<html>
<head>
</head>
</html>
Nun brauchen wir nur noch das Body Tag einzufügen und fertig ist unser erstes HTML-Gerüst:

Code:
<html>
<head>
</head>
<body>
</body>
</html>
Nun fügen wir noch den DOCTYPE ein und das Grundgerüst steht komplett:

Code:
<!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="en" lang="en">
<head>
</head>
<body>
</body>
</html>
Speichern wir dieses Ergebnis nun als .html-Datei (z.B.: test.html). Nun haben wir unser erstes Grundgerüst fertig. Natürlich gehört zur jeden Internetseite ein Titel, das kriegen wir so hin:

Code:
<!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="en" lang="en">
<head>
<title>Seitentitel</title>
</head>
<body>
</body>
</html>
Speichern wir dieses Ergebnis und öffnen es mit einem Browser. Erscheinen sollte eine weiße Seite und oben sollte „Seitentitel“ stehen. Fügen wir nun unseren ersten Inhalt ein:

Code:
<!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="en" lang="en">
<head>
<title>Seitentitel</title>
</head>
<body>
TEXT
</body>
</html>
Öffnen wir nun dieses Ergebnis im Browser, sollten wir eine einfache HTML-Seite mit dem Text TEXT haben. Nun kann es zum ersten formatieren des Textes gehen.

TEXTFORMATIERUNG

Texte ordnen

Wenn man ein geordnetes HTML-Dokument haben will, sollte man unbedingt darauf achten, dass man genug Absätze und Zeilenumbrüche einbaut. Legen wir nun als Erstes folgendes im Bodybereich an:
Code:
<body>
Einige Zeilen mit Text.
Einige Zeilen mit Text.
Einige Zeilen mit Text.
</body>
Betrachtet man nun dies im Browser, fällt auf das gar keine Zeilenumbrüche vorhanden sind. Machen wir nun folgendes:

Code:
<body>
<p>Einige Zeilen mit Text.
Einige Zeilen mit Text.
Einige Zeilen mit Text.</p>
</body>
Zwar hat sich an der Ansicht noch nichts Wichtiges geändert, dennoch wurde etwas ganz Entscheidenes mit dem Text gemacht: Er wurde zum Absatz. Aber wir wollen noch Zeilenumbrüche, dazu machen wir Folgendes:

Code:
<body>
<p>Einige Zeilen mit Text.<br />
Einige Zeilen mit Text.<br />
Einige Zeilen mit Text.</p>
</body>
Nun betrachten wir dies im Browser und sofort fällt etwas auf: Zeilenumbrüche wurden eingebaut. In dieser Unit haben wir gelernt:

- durch den Tag <p> wird ein Absatz gegliedert
- durch den Tag <br /> erstellt man einen Zeilenumbruch

<hr />
Mit diesem simplen Code fügen wir eine horizontale Linie ein, diese kann man natürlich am Ende mit CSS verändern.



Überschriften

Überschriften sind wichtig um das Dokument zu gliedern. Insgesamt gibt es sechs Überschriftsebenen, von <h1> bis <h6>. Überschriften sollten immer in der vorgesehenen Reihenfolge platziert werden, also <h1> vor <h2>. Wichtig für die Suchmaschinenoptimierung sind die ersten beiden Überschriftsebenen(<h1>; <h2>). Legen wir nun eine Überschrift der ersten Ebene an:

Code:
<h1>Überschrift 1</h1>
Betrachten wir nun dies im Browser. Erschienen ist eine große Schrift mit dem Titel: Überschrift 1. Fügen wir nun eine Überschrift der zweiten Ebene in das Dokument ein:

Code:
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
Schauen sie sich nun dieses Ergebnis im Browser an. Eine zweite kleinere Überschrift sollte dazu gekommen sein. Nun fügen wir noch eine Überschrift der dritten Ebene ein:

Code:
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
Nun müsste eine dritte Überschrift dazu gekommen sein, die noch kleiner ist als die 2te Überschrift. Überschriften kann man ganz leicht mit CSS umwandeln, doch das folg später.



Textbereiche auszeichnen:

Mithilfe von HTML kann man einige Tags benutzen, die den Text verändern bzw. hervorheben. Hier findest du einen Überblick über die wichtigsten Dinge.
NICHT VALIDE AUZEICHNUNGEN:
Code:
<b>Fetter text</b>
Mithilfe vom <b>-Tag hebt man einen Text fett hervor.

Code:
<i>Kursiver Text</i>
Mithilfe des <i>-Tags hebt man einen Text kursiv hervor.

Code:
<u>Unterstrichener Text</u>
Mithilfe des <u>-Tags hebt man Text unterstrichen hervor. Dies ist nicht zu empfehlen, da es schnell mit Links vertauscht wird.

Code:
<s>Durchgestrichener Text</s>
Durch den <s>-Tag wird ein Text durchgestrichen dargestellt.

VALIDE AUSZEICHNUNGEN
Code:
<strong>Hervorgehobener Text</strong>
Durch den <strong>-Tag wird ein Text hervorgehoben, wie es gerade am Besten passt (besser als die vorhergenannten, da HTML-valide).

Code:
2<sup>3</sup>
Damit stellt man einen Teil hoch, das sieht so aus: 2³


Code:
2<sub>3</sub>
Damit stellt man einen TEIL des Textes runter.

Viele Dinge kann man auch mit CSS verändern, aber das kommt erst später. So kann man komplette Bereiche mit CSS ordnen und noch vieles mehr.

Stylesheets benutzen

Nun werde ich euch zeigen, wie man in HTML-Tags kleine Stylesheets einbaut. Dies ist als kurzer Einstieg zu verstehen:

Code:
<p style=““>Unser erster Absatz</p>
Nun haben wir die Klammer gesetzt (rot markiert) in den die ganzen Formatierungen eingefügt werden. Wie immer kommt es in den Body-Tag.

Code:
<p style=“color: red“>Unser erster Absatz</p>
Betrachten wir nun dies im Browser haben wir einen roten Text. Wir können mit color die Textfarbe bestimmen.

Code:
<p style=“color: red; font-family: Arial“>Unser erster Absatz</p>
Nun haben wir anstatt der Schriftart “Times New Roman” die Schriftart “Arial”. Mit font-family ändert man die Schriftart.

Code:
<p style=“color: red; font-family: Arial; size: 12px“>Unser erster Absatz</p>
Nun haben wir noch die Größe veändert. Mit size kann man die Größe ändern.

Man kann mit CSS noch viele verschiedene Dinge formatieren, aber dazu kommen wir erst später. Übrigens kann dies mit jedem HTML-Tag gemacht werden.

Am Besten ist aber, dass man Stylesheets am Ende in eine externe Datei packt, damit befassen wir uns an dieser Stelle aber nicht näher.


VERLINKUNGEN:

Seiten verlinken

Um das Verlinken zu testen legen wir in unserem Verzeichnis als erstes die Datei „link.html“ an. Auf diese werden wir jetzt in unserem Hauptdokument verlinken. Geben wir zu erst den Verlinkungstag ein:

Code:
<a></a>
Mit diesem Code lässt sich noch nicht viel anfangen, da man nicht einstellen kann, wohin der Link geht.

Code:
<a href=“link.html“>Linktext</a>
Nun taucht in der HTML-Datei der Text “Linktext“ auf, der sollte blau sein und unterstrichen und anklickbar sein. Testen sie es aus. Sie werden auf der Linkseite landen.

Code:
<a href=“link.html“ title=“Linkbeschreibung“>Linktext</a>
Fährt man nun über den Linktext so erkennt man, das unter dem Link beim drüber fahren ein Feld mit dem Text „Linkbeschreibung“ auftaucht.

Code:
<a href=“link.html“ title=“Linkbeschreibung“ target=“_blank“>Linktext</a>
Nun probieren wir den Link erneut aus, wir sehen, dass er sich in einem neuen Fenster bzw. Tab öffnet.



Interne und externe Verlinkungen

Natürlich gibt es in HTML nicht nur die Möglichkeit, interne Seiten wie im Teil „Seiten verlinken“ zu verlinken, sondern auch externe, übergeordnete, untergeordnete Seiten. Fangen wir mit dem Externen Verlinken an:

Code:
<a href=“http://www.google.de“>Google</a>
Wie sie sehen wurde auf Google verlinkt. Externe Links können nur mit http:// geöffnet werden, sonst sucht es die Datei im Verzeichnis

Code:
<a href=“ordner/seite.html“>LINK</a>
Durch diese Anzeige, wird auf eine Seite im Unterverzeichnis verlinkt.

Code:
<a href=“../seite.htm“>LINK</a>
Durch diese Anzeige (..) erreichen sie eine Datei in einem übergeordneten Ordner/ Verzeichnis.

Code:
<a href=“/Ordner/seite.html“>LINK</a>
Beginnt die URL des Links mit einem Schrägstrich, so fängt der Browser im Hautpverzeichnis an zu suchen

Diese Dinge lassen sich beliebig miteinander kombinieren, z.B.:

Code:
<a href=“/Ordner/../seite.htm“>LINK</a>

E-Mail-Links

Um den Nutzern den Kontakt mit ihnen ermöglichen, kann man den HTML-Tag durch wenige Schritte in einen E-Mail-Link verwandeln.

Code:
<a href=“mailto:[Only registered and activated users can see links. Click Here To Register...]“>E-Mail senden</a>
Durch die Funktion mailto innerhalb der href-Tags wird ein Mail-Programm geöffnet, in dem der Empfänger schon eingetragen ist.

Code:
<a href=“mailtio:[Only registered and activated users can see links. Click Here To Register...]?subject=Kontakt”>E-Mail senden</a>
Nun kann man nach erneutem Klicken des Links, das der Betreff durch das „?subject“ automatisch eingegeben wird.
Code:
<a href=“mailtio:[Only registered and activated users can see links. Click Here To Register...]?subject=Kontakt&cc=[Only registered and activated users can see links. Click Here To Register...]
&bcc=[Only registered and activated users can see links. Click Here To Register...]”>E-Mail senden</a>
Nun wird eingestellt, dass eine Kopie und eine Blindkopie verschickt werden.

Code:
<a href=“mailtio:[Only registered and activated users can see links. Click Here To Register...]?subject=Kontakt&cc=[Only registered and activated users can see links. Click Here To Register...]
&bcc=[Only registered and activated users can see links. Click Here To Register...]&body=Ich möchte ihnen schreiben”>E-Mail senden</a>
Durch das „&body“ wird eingestellt, das „Ich möchte ihnen schreiben“ schon im Inhaltsbereich steht.



Downloads

Überall im Internet kann man sich Dateien downloaden, mit Hilfe von HTML und dem Tag a erzeugen sie ganz einfach solche Downloadlinks.

Code:
<a href=“zipdatei.zip“>Download</a>
Erstellen sie nun ein Zip-Verzeichnis mit dem Namen zipdatei.zip. Danach öffnen sie die HTML-Datei und öffnen den Link. Der Brwoser wird sie fragen, was er mit der Datei tun soll.

Man kann Dateien in fast jedem Format downloaden, so kann man .exe, .zip, .rar, .doc, .xls, .bat und noch viele mehr downloaden. Eigentlich kann man jede Datei im Internet downloaden. Je nach Browserkonfiguration werden manche Dateien direkt im Browser geöffnet, z.B. .txt oder .pdf.

Beim Anbieten von Dateien sollten sie unbedingt darauf achten, das sie die Erlaubnis haben, die Dateien zu veröffentlichen.



Textmarken

Mit Textmarken (auch Anker genannt) kann man innerhalb von HTML-Dateien Links einrichten, die auf eine jeweilige Stelle im Text verlinken.

Richten wir dazu zuerst eine HTML_Seite mit viel Text an und unterteilen sie in Absätze. Nun wollen wir versuchen, das man durch ein oberes Inhaltsverzeichnis an jeden Absatzanfang verlinkt wird. Suchen sie sich am Besten einen Text mit 5 Absätzen, dann können sie dieses Tutroial am Besten ausführen.

Code:
<p><a name=“Anker1“></a>Text des ersten Absatzes […]</p>
<p><a name=“Anker2“></a>Text des zweiten Absatzes […]</p>
<p><a name=“Anker3“></a>Text des dritten Absatzes […]</p>
<p><a name=“Anker4“></a>Text des vierten Absatzes […]</p>
<p><a name=“Anker5“></a>Text des fünften Absatzes […]</p>
Nun haben wir unsere Anker gesetzt auf die später das Inhaltsverzeichnis oben verlinken soll. Jetzt brauchen wir kein href oder title mehr, das Attribut name genügt.

Code:
<p>
<a href=“#Anker1“>Zu Absatz 1</a><br />
<a href=“#Anker2“>Zu Absatz 2</a><br />
<a href=“#Anker3“>Zu Absatz 3</a><br />
<a href=“#Anker4“>Zu Absatz 4</a><br />
<a href=“#Anker5“>Zu Absatz 5</a><br />
</p>
Nun haben wir unser Inhaltsverzeichnis eingerichtet. Klickt man nun auf einen Link, so wird man zu dem Anker geschoben. Das Linkziel beginnt mit # und endet mit dem Namen der Endmarke.

Code:
<a href=“seite.html#Anker“>Zur externen Textmarke</a>
Man kann auch auf eine externe Textmarke verweisen, das geht mit der Seitenadresse gefolgt von einem Doppelkreuz und dem Ankernamen.

BILDER


Bilder einfügen

Ein Bild kann mit dem img-Tag einfügen, da dieser keinen Inhalt enthält, wird er nach den Regeln von XHTML so dargestellt:

Code:
<img />
Nun sehen wir noch kein Bild in der Datei. Dafür fehlt das Attribut src. Der Wert dieses Attributs ist die Adresse des Bildes (ähnlich der Homepageadressen Kapitel 2)

Code:
<img src=“bild.jpg“ />
Nun sieht man im Dokument ein Bild. Es wird ohne irgendwelche Einstellungen dargestellt.

Code:
<img src=“bild.jpg“ width=“400px“ />
Nun hat sich die Breite (durch das Attribut width) des Bildes auf 400 Pixel verkleinert bzw. vergrößert. Wir empfehlen, dass Bild vorher mit einem Programm wie Gimp auf die passende Größe zuzuschneiden, da das besser aussieht als vom Browser verkleinert.

Code:
<img src=“bild.jpg“ width=“400px“ height=“300px“ />
Nun wurde ebenfalls die Höhe des Bildes eingestellt. Durch das Attribut height wird die Höhe eingestellt. ACHTUNG: Wenn man Höhe und Breite einstellt, kann das Bild verzerrt werden.

Bilder editieren

Im vorherigen Teil haben wir nur die Größe eingestellt, aber es gibt noch viel mehr Funktionen als diese wenigen Funktionen:

Code:
<img src=“bild.jpg“ border=“2px“ />
Nun sieht man um das Bild einen schwarzen Rand von 2px-Dicke. Meistens sehen diese Ränder aber dumm aus und sind daher nicht so geeignet.

Code:
<img src=“bild.jpg“ alt=“Ein schönes Bild“ />
Der Text, der im Attribut alt eingefügt wurde ist der Text, der angezeigt wird, wenn das Bild nicht lädt (mittlerweile vom W3C sogar vrogeschrieben).

Code:
<img src=“bild.jpg“ title=”Ein Bild” />
Mit dem Attribut title legt man einen Text fest, der erscheint wenn man mit dem Cursor über das Bild fährt. Man kann alle Attribute miteinander in einen HTML-Tag packen

Bilder ausrichten

Die ersten Erklärungen in diesem Tutorial sind veraltet. Wir haben sie nur der Vollständigkeit halber mit in die Beschreibung genommen. Bitte erstellen sie zu erst einen Absatz mit HTML (Kapitel 1).

Code:
<p><img src=“bild.jpg“ align=“right” />Text des Absatzes</p>
Wenn sie dieses Ergebnis nun im Browser testen, ist das Bild rechts und der Text links. Sie könnnen das Attribut align mit den Werten left, center und right füllen.

Code:
<p><img src=“bild.jpg“ align=“right” vspace=“50“ hspace=“20“ />Text des Absatzes</p>
Mit den Attributen vspace und hspace können sie das Bild noch genauer ausrichten.

Nun kommen wir zu der besseren Variante um Bilder in Absätzen auszurichten. Mit CSS.

Code:
<p><img src=“bild.jpg“ style=“float: right;“ />Text des Absatzes</p>
Mit der Eingabe des Attributs style, in dessen Anführungszeichen immer CSS-Code steht kann man alles einstellen. Mit dem CSS-Weert float (Gegenstück zum HTML-Attribut align) können sie das Bild mit den Werten left, center und right ausrichen.

Code:
<p><img src=“bild.jpg“ style=float: right; margin-left: 40px; margin-top: 20px;” />Text des Absatzes</p>
Nun können sie mit den CSS-Attributen margin-left (Abstand zwischen Text und Bild) und margin-top (Abstand nach oben) das Bild genauer ausrichten.

Bilder verlinken

Um ein Bild zu verlinken, muss man einfach nur einen <a>-Tag um das Bild setzen, ähnlich wie beim Text verlinken:

Code:
<a href=“http://www.ig444.de.tl“><img src=”bild.jpg” /></a>
Wenn man dieses Ergebnis nun im Browser testet, erscheint ein nerviger blauer Rand um das Bild, diesen kann man jedoch ganz einfach entfernen:

Code:
<a href=“http://www.ig444.de.tl“><img src=”bild.jpg” border=”0” /></a>
Testen wir dieses Ergebnis im Browser erneut sehen wir, dass das Bild keinen Rand mehr hat und trotzdem verlinkt wird. Man kann ein Bild mit allen Regeln des Verlinkens (siehe Kapitel 2) verlinken. Wenn man aber mehrere Links auf ein Bild legen will, braucht man eine Imagemap. Dies geht so:

Code:
<img src=“bild.jpg“ usemap=“#bild“ />
<map id=“bild“ name=“bild“>
<area shape=“circ“ coord=“100, 50, 50“ href=”http://www.ig444.de.tl” />
</map>
Über den Tag area innerhalb des Tags map wird die Ausrichtung eingegeben über die das Bild auf den Link verlinkt. Der erste Wert ist die x-Koordinate, der zweite die y-Koordinate und der dritte der Radius des Kreises. Man kann außerdem Rechteckte und Polygone einfügen:
Code:
<area shape=“rect“ coord=“50, 75, 200, 275“ href=“http://www.ig444.de.tl” />
<area shape=“poly“ coord=“50, 75, 100, 275, 200, 275“ href=“http://www.ig444.de.tl” />
Bei dem Rechteck (erster Code) sind die ersten beiden Werte die Position der linken-oberen Ecke, die darauf folgenden zwei der der rechten Unteren. Beim Polygon (zweiter Codeabschnitt) ergeben alle zwei Zahlen eine Koordinate, dazwischen werden Geraden erstellt.

WEITERFÜHRENDE LINKS

HTML-Referenz:
Elemente: [Only registered and activated users can see links. Click Here To Register...]
Attribute: [Only registered and activated users can see links. Click Here To Register...]

Weiterführende HTML-Tutorials:
Listen: [Only registered and activated users can see links. Click Here To Register...]
Tabellen: [Only registered and activated users can see links. Click Here To Register...]
Formulare: [Only registered and activated users can see links. Click Here To Register...]

Quelle: [Only registered and activated users can see links. Click Here To Register...]
11/03/2009 22:41 SynT@x#2
Copy&Past from: [Only registered and activated users can see links. Click Here To Register...]

Mit freundlichen Grüßen

SynT@x
11/03/2009 22:42 Eplotic#3
Jo nur kaum einer kennt das board, bzw nutzt es explizit ;)

Hier gibts iwo nen Linux tut, was auch zum teil davon ist, OHNE Quellenangabe, bevor das wieder kommt ;)
11/03/2009 22:43 John Dillinger#4
Quote:
Originally Posted by Eplotic View Post
Jo nur kaum einer kennt das board, bzw nutzt es explizit ;)

Hier gibts iwo nen Linux tut, was auch zum teil davon ist, OHNE Quellenangabe, bevor das wieder kommt ;)
Das Gulli-board kennt jeder
11/03/2009 22:45 Eplotic#5
Dennoch fragen hier drölfzehn leute wie man ne Homepage, etc erstellt...

die meisten kennen/nutzen noch nicht mal google..
11/03/2009 23:45 Eplotic#6
Update: Link hinzugefügt
11/04/2009 10:14 Cholik#7
[Only registered and activated users can see links. Click Here To Register...]

HELFTE VON THEAR IST NUR COPY AND PAST
11/04/2009 11:41 o0°()Zero()°0o#8
wenn ihr euch eine homepage erstellen wollt schaut euch mal mein tutorial an
[Only registered and activated users can see links. Click Here To Register...]