Homepage Erstellen für Anfänger -
Gott spielen leicht gemacht

Erstellt am: Donnerstag, 5. Apr 2007, 17:45

Dieser Kurs soll Anfängern das Schreiben einer Homepage erklären und beibringen.

Die Grammatik (XML)

Du willst Gott speielen und eine ganze Welt erstellen? Kein Problem mit XML. Aber was ist das? XML ist eine erweiterbare Auszeichnungssprache. Was man sich da nun genau drunter vorstellen soll, erklärt sich am Besten mit einem kleinen Beispiel: 

<Zimmer> </Zimmer>

Das ist ein Zimmer. Genaugenommen ist es ein XML-Element, dass "Zimmer" heißt, aber es ist wie ein Zimmer. Wir können nähmlich etwas hineinstellen. Beispielsweise eine Pflanze: 

<Zimmer>
 <Pflanze />
</Zimmer>

Auch diese Pflanze ist wie im richtigen Leben: Sieht schön aus, hat aber keinen praktischen Nutzen. Einen praktischen Nutzen hätte eher ein Schrank. Da können wir nähmlich unsere Wäsche reintun. 

<Zimmer>
 <Pflanze />
 <Schrank>
  <Tshirt />
  <Tshirt />
 </Schrank>
</Zimmer>

Dass die T-Shirts alle gleich aussehen ist allerdings auch ein bisschen langweilig. Daher beschreiben wir sie noch genauer: 

<Zimmer>
 <Pflanze />
 <Schrank>
  <Tshirt aufschrift="Hallo Welt" />
  <Tshirt aufdruck="Hund" />
 </Schrank>
</Zimmer>

Wie sehen die T-Shirts jetzt wohl aus? Richtig! Auf dem Einen steht "Hallo Welt" und auf dem anderen ist ein Hund.

Und? Hast du XML verstanden? Kuck dir die Struktur nochmal genau an. Hier nochmal eine kleine Zusammenfassung:

Dinge (=Elemente) werden von < und > umschlossen. Diese Zeichenkette heißt dann Tag. Für Elemente mit Inhalt gibt es einen Start- und einen Endtag. Der Endtag wird mit einem / (Schrägstrich) gekennzeichnet. Wird kein Endtag benötigt setzt man den Schrägstich ans Ende des Starttags.

Wir können den Elementen zusatzinformationen hinzufügen. Diese heißen Attribute und werden in den Starttag geschrieben. Sie werden durch ein Leerzeichen vom Elementnamen getrennt. Sie bestehen aus dem Atrribut, einem Gleichheitszeichen (=) und dem Attributwert in Anführungsstrichen (" oder ').

Vokabeln (HTML)

Nun weißt du, wie du mit XML eine ganze Welt erschaffen kanst. Aber du willst ja sicherlich auch wissen, wie du HTML-Dokumente erstellen kannst. Dafür brauchen wir bestimmte Worte bzw. Elemente.

Wenn man einer Gruppe von Menschen auftragen würde ein Zimmer ein zu richten, würden sie vermutlich alle unterschiedliche Begriffe verwenden. Der Eine nennt seinen Schreibtisch nur Tisch oder Arbeitsplatz. Der Nächste nennt ihn vielleicht Computertisch. Ein Anderer möchte vielleicht lieber das englische Wort table benutzen. Um so ein Chaos zu vermeiden und es dem Computer leicht zu machen werden Begriffe festgelegt, die für die XML-Sprachen verwendet werden.

Da dieser Kurs sich mit HTML beschäftigt kommen jetzt die Vokabeln / Begriffe zu XHTML, der XML-Version von HTML. XHTML wurde, wie auch XML und HTML, vom World Wide Web Consortium (W3C) festgelegt. Das ist eine Gruppe von Menschen, die darüber nachdenkt, welche Worte XHTML braucht und diese erklärt.

Eines der wichtigsten Worte ist p. p kommt von paragraph, dem englischen Wort für Absatz. Und darum handelt es sich auch: Um einen Textabsatzt. Also benutzen wir dieses Wort einaml: 

<p>Dies ist ein Absatz</p>

Aber wer soll jetzt HTML lesen? Der Computer soll es auswerten und entsprechend darstellen. Dazu benutzen wir ein Programm namens Browser. Ein Browser ist ein Programm zum darstellen von Internetseiten. Bekannte Beispiele sind Firefox und der Internet Explorer (MSIE).

Grundgerüst

Diese Browser verstehen unser p aber nicht. Warum? Weil sie nicht wissen, welche Sprache wir sprechen. Also müssen wir ihm vorher sagen, dass wir XHTML sprechen. Das machen wir mit diesem Code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nun kann es aber sein, dass wir mehrere Sprachen sprechen. Also sagen wir noch, welcher Teil der HTML-Teil ist. 

<!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">
 <!-- Hier kommt der XHTML-Code hin. -->
</html>

Dann unterteilen wir den Code noch in Head und Body (auf Deutsch Kopf und Körper). Den Head-Bereich brauchen wir momentan noch nicht, der wird aber später wichtig. 

<!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>Name der Seite</title>
 </head>
 <body>
  <p>Dies ist ein Absatz</p>
 </body>
</html>

Das title-Element zeichnet den Titel der Seite aus. Dieser wird normalerweise im Browser an verschiedenen Stellen verwendet. Beispielsweise beim Fenster- und Tabnamen oder als Titel zum Abspeichern der Seite unter den Favoriten.

Wir müssen am Anfang des Dokumentes die Scriptsprache (XHTML) festlegen und das Grundgerüst mit html, head und body einfügen.

Überschriften

Nun erkennt der Browser unseren Absatz als Absatz und kann ihn entsprechend darstellen. Wir möchten unserem Absatz aber noch eine Überschrift geben. Das machen wir mit h1. h steht für headline aus dem Englischen für Überschrift. Die 1 sagt aus, dass es sich um eine Überschrift 1. Grades handelt. Sie ist somit die wichtigste Überschrift. Die Überschrift mit h2 ist eine Unterüberschrift von h1. Es gibt die Überschriften von h1 bis h6. 

<!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>Name der Seite</title>
 </head>
 <body>
  <h1>Mein Absatz</h1>
  <p>Dies ist ein Absatz</p>
 </body>
</html>

Im <body>-Bereich kann der Inhalt eingefügt werden. Überschriften werden hier mit h1 bis h6 ausgezeichnet und Absätze mit dem p-Element.

strong und em

Es gibt noch viele andere Elemente. Neben den "Block-Elementen", wie Überschriften und Absätze, die jeweils eine eigene Zeile haben, gibt es auch Inline-Elemente, die in einem Absatz oder einer Überschrift stehen können.

Ein Beispiel dafür ist strong. Das Element zeigt an, dass die Worte, die zwischen den Tags stehen besonders wichtig sind. Der Bereich wird dann normalerweise Fett dargestellt. Das könnten wir aber auch ändern. em ist ähnlich, ist aber nicht so wichtig, wie strong und wird daher oft Kursiv dargestellt.

Der Übersicht halber lasse ich jetzt mal das Grundgerüst weg.

<p>Dies ist ein <strong>Absatz</strong>!</p>

Wichtiger Text wird mit <em> und sehr wichtiger mit <strong> hervorgehoben.

Verweise (Links)

Ein sehr wichtiges Element ist auch a. Hier brauchen wir auch die Attribute wieder. Die Bezeichnung kommt vom englischen Wort "Anchor", was auf Deutsch Anker bedeutet. Dieses Element kann sowohl einen Anker, also eine Markierung im Text, als auch einen Link zu einer Seite oder zu einem Anker erstellen. Wir haben also verschiedene Funktionen des Elements.

Einen Anker setzen wir durch das Attribut name. Einen (Hyper-)Link setzen wir mit dem Attribut href. Es gibt verschiedene Möglichkeiten eine Adresse für den Link an zu geben:

Hilfsmittel und weitere Informationen

Um so etwas weiter zu verfeinern kann man verschiedene Hilfsmittel wie Bücher oder Internetseiten benutzen.