Kategorien
Webdesign

HTML für Einsteiger – Teil 1

HTML ist eine im Grunde simple Angelegenheit. Was Anfangs ein wenig erschrecken mag, ist der enorme Umfang der vorhandenen Befehle. Aber keine Sorge, weder muss man alle auswendig lernen, noch werden alle gebraucht. Um eine einfache Seite für das WWW zu erstellen,…

HTML ist eine im Grunde simple Angelegenheit. Was Anfangs ein wenig erschrecken mag, ist der enorme Umfang der vorhandenen Befehle. Aber keine Sorge, weder muss man alle auswendig lernen, noch werden alle gebraucht.

Um eine einfache Seite für das WWW zu erstellen, ist bestenfalls eine Handvoll dieser Befehle nötig. Je größer die Ansprüche dann werden, desto mehr muss man lernen. Für den Anfang braucht man noch nicht einmal ein besonderes Programm. Es genügt ein primitiver Texteditor, den jedes Betriebssystem bereits mitliefert. Das wäre bei Windows das Notepad (Windows „Editor“) und beim Mac „Simple-Text“. Mehr ist erst einmal nicht nötig. Später kann man dann auf andere Werkzeuge umsteigen.

HTML bedeutet „Hypertext Markup Language„. Es ist eine sogenannte Seitenbeschreibungssprache. Das bedeutet, es handelt sich hier nicht um eine Programmiersprache (etwa Basic oder Java). Weshalb das Erstellen von Web-Seiten auch nicht programmieren, sondern codieren genannt wird. Dieser Code beschreibt logische Bestandteile eines Dokuments. Das sind zum Beispiel Überschriften, Tabellen, Verweisen, Listen und so weiter. Dargestellt werden die Anweisungen dann vom Browser. Deshalb ist die Sache auch völlig unabhängig von einem Betriebssystem. Was Sie unter Windows codieren, kann man über den Umweg mit dem Browser auch mit einem Linux-Rechner sehen.

Das Prinzip von HTML basiert auf der englischen Sprache, die man aber nicht beherrschen muss. Die einzelnen Befehle werden „Tags“ genannt. Dazu kommen noch verschiedene Attribute, die den Tag genauer definieren. Es gibt zum Beispiel einen Tag, mit dem man die Farbe einer Schrift verändern kann, das passende Attribut sagt dann, welche Farbe genommen werden soll.

Jeder Tag steht in spitzen Klammern < >
Die meisten Tags kommen paarweise vor. Der erste Tag leitet die Definition ein, der zweite schließt sie wieder. Das ist notwendig. Schauen wir ein Beispiel an:

Um einen Textabschnitt fett erscheinen zu lassen, schreibt man <b> Das b steht für bold, das ist das englische Wort für fett.

 <b>Hier steht mein
Text. 
      <b>Hier steht mein Text</b>.
Und hier geht es mit dem normalen Text weiter. 

Grundprinzip

Maskieren

      ä wird zu &auml;

ö wird zu &ouml;
 ü wird zu &uuml;
 Ä wird zu &Auml;

Ö wird zu &Ouml;
 Ü wird zu &Uuml;
 ß wird zu &szlig;
      
 Hier
l&ouml;st sich mein Satz. Auf die Stra&szlig;e mit dem K&ouml;ter!

Schauen wir uns weitere Bestandteile von HTML an – So sagt man dem Browser, dass es sich hier um einen Textabsatz handelt:

      <p>Hier
steht mein Text</p> 
      <p>Hier steht mein Text</p>

 <p>Hier steht noch mehr Text</p> 

Seitenüberschrift

      <title>Überschrift</title> 

Trennlinie

      <hr> 

Damit haben wir das Prinzip von HTML schon einmal im Griff. Alle Tags kann man in einen Editor schreiben und die abgespeicherte Datei dann mit dem Web-Browser anschauen. Doch für eine richtige Seite fehlt es noch an der Struktur. Die gibt es nämlich auch, sie hilft eine Seite zu gliedern und sagt dem Browser, was er wo findet.

Eine Seitenstruktur besteht aus einen Kopf (head) und den Körper (body). Innerhalb dieser beiden Bereiche finden sich dann die Inhalte wieder. Außerdem gibt es eine sogenannte Dokumenten-Definition (doctype). Die sieht etwas kompliziert aus. Ihr Sinn besteht darin, dem Browser zu sagen, welche HTML-Version er erwarten soll. Es funktioniert auch ohne diese Angabe, sie gehört jedoch zu einer gut codierten Seite dazu.

Zu guter letzt findet sich noch ein wichtiger Tag, nämlich <html>. Er steht direkt unter der Doctype-Definition und bildet auch den Schluß der Seite. Diesen Tag dürfen Sie niemals vergessen, da sonst die Seite unter Umständen gar nicht mehr angezeigt würde.

Das Ganze stellt sich dann so dar:

      <!doctype html public "-//W3C//DTD
HTML 3.2//EN"> 
 <html> 
 <head> 
 <title>Meine
erste Seite</title> 
 </head> 
 <body> 

 Hier
ist Platz für die eigentlichen Inhalte: Texte und Bilder und natürlich
HTML Tags.

 </body> 
 </html> 

Jetzt können Sie im Prinzip loslegen. Was fehlt, sind die einzelnen Tags, um Bilder einzufügen, Schriften farbig zu machen oder in der Größe zu ändern und viele andere Dinge mehr.

Von Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.