HTML

 

1.1 Was ist denn HTML überhaupt ???

HTML heißt ausgeschrieben Hyper Text Markup Language und ist ganz prägnant gesagt die Programmiersprache für das Internet.

Ganz richtig ist dies allerdings nicht, denn viele vergessen, daß HTML im Grunde genommen nur dazu da ist, um zu entscheiden, wie das Dokument, was sich der Surfer im Internet mittels seines Webbrowsers anschaut, aussieht. Sie ist daher eher eine Auszeichnungssprache als eine reine Programmiersprache. Der Text, den eine HTML-Seite enthält, wird jedoch ebenfalls wie bei den richtigen Programmiersprachen wie z.B. C++ als sogenannter Quelltext bezeichnet.

Das HTML-Dokument ist ein einfaches Textdokument, dafür aber nicht einfach zu lesen. Wie kann also der Internetnutzer sich diese Seite anschauen ohne nachzugrübeln was draufsteht?
Ganz einfach : Der Text im HTML-Dokument wird im allgemein anerkannten ASCII-Format gespeichert. Dadurch erwirkt sich ein Quelltext, der auf allen Betriebssystemen verwendet werden kann. Das einzige, was der Internetnutzer nun braucht, um sich die Seite anzuschauen, ist der Webbrowser (InternetExplorer, NetscapeNavigator, Opera ... ). Dieser Webbrowser, egal wie er heißt, hat nun die Aufgabe, den Quelltext bzw. den ASCII-Text in einen optischen Inhaltstext umzuformen und dem Surfer so näher zu bringen. Dabei stellt er sowohl den Inhalt von Verknüpfungen oder Verweisen auf zu ladende Graphiken dar, als auch diverse Formatierungen von Text und das Seitenlayout.

Der Inhaltstext wird vom Browser unter Beachtung der Tags dargestellt, diese Tags sind die Befehle der HTML. Der Browser interpretiert diese, um die richtige Darstellung des Inhaltes zu gewährleisten.

HTML-Dokumente enden in der Regel mit der Dateiendung .htm, obwohl doch eigentlich .html sinnvoller wäre . Dies kommt daher, weil auf älteren PCs mit dem Betriebssystem DOS nur Dateieindungen mit 3 Buchstaben zugelassen waren.

Da im Internet aber auch mittlerweile viele UNIX-Systeme vorhanden sind, ist die Dateiendung .html mittlerweile öfter zu finden. Bei beiden Dateiendungen handelt es sich allerdings um gültige HTML-Dokumente, die vom Browser dargestellt werden können.

 

1.2 Was benötige ich zum Aufbau und zur Darstellung von HTML-Dokumenten ???

Im Grunde genommen braucht man wirklich nicht viel um sein Ziel zu erreichen und eine Homepage ins Netz der Netze zu stellen.

Was sie benötigen, ist ein ganz normaler Texteditor wie z.B. Ihr Notepad auf Windows oder der Texteditor bei DOS. Auf jeden Fall muß der Editor die Möglichkeit haben, Ihren eingegebenen Text im ASCII-Format zu speichern, dies ist wichtig.

Neben einem simplen Texteditor kann man sich natürlich auch noch ein paar Hilfsmittel besorgen, die das Gestalten der Websites noch komfortabler und schneller machen. Ich spreche von den HTML-Editoren Frontpage, Dreamweaver und wie sie alle so heißen. Mit ihnen kann man Text und Graphiken auf der Seite plazieren, dabei auf das Layout achten, und bei den heute gängigen Editoren kann man sich das Ergebnis sogar schon gleich anschauen, in dem man wie z.B. bei Frontpage zwischen HTML-Quelltext und dem Layoutmodus umschalten kann.
Trotzdem ist es natürlich auch von Vorteil, sich mit der Sprache HTML explizit auseinander zu setzen. Denn sollten im Nachhinein einmal Darstellungsprobleme auftreten, wofür einige HTML-Editoren bekannt sind, dann helfen Ihnen die genauen Kenntnisse der Syntax von HTML mit Sicherheit weiter und werden die Probleme lösen.

Also, sie brauchen also einen Texteditor oder HTML-Editor zum Erstellen der Seite. Aber um sich ihre fertig gestylte Seite einmal in Wirklichkeit anzuschauen, brauchen Sie natürlich einen der bekannten Webbrowser. Am häufigsten werden der Internet Explorer und der Netscape Navigator benutzt, dieser sogar noch mit einem Mailprogramm und dem HTML-Editor Composer ausgestattet ist. Aber auch der kostenlos erhaltbare Browser Opera versucht, den beiden großen und bekannteren Browsern die Show zu stehlen. Es gibt also reichlich Auswahl.

 

1.3 HTML - Die Syntax

Die Befehle

Die erste Regel von HTML, die Sie gleich verinnerlichen sollten :

Die HTML-Befehle, die sogenannten Tags, werden immer in spitzen Klammern geschrieben.
Bei den meisten von Ihnen wird so verfahren, daß der Befehl bzw. Tag von einer spitzen Klammer umschlossen wird, das Ende des Tags kommt ebenfalls wieder in eine spitze Klammer, allerdings mit einem angeführten / .

Hier ein Beispiel für ein HTML-Tag : <b> Textdokument </b>

Sie sehen : Zwischen den spitzen Klammern steht der Befehl von HTML, der ausgeführt werden soll. Alles was dazwischen steht, in diesem Falle das Wort Textdokument, wird hier auf dem Bildschirm ausgegeben.
Bei diesem Beispiel wird das Wort Textdokument auf dem Bildschirm ausgegeben und zwar fettgedruckt. Das Anfangs-Tag b steht für bold-type und stellt das nachfolgende Wort fett gedruckt auf dem Browser dar. Das End-Tag /b schließt den Befehl ab. Würde man das End-Tag nicht setzen, würde alles im nachhinein geschriebene fettgedruckt dargestellt werden.

Die Groß- und Kleinschreibung der Tags ist übrigens unerheblich, es wird beides akzeptiert, das können Sie machen, wie Sie es möchten. Man sollte sich nur eine einheitliche Schreibweise angewöhnen, wie in jeder anderen Programmiersprache auch.

Kommentare setzen

Zu jeder guten Programmiersprache, wie auch bei HTML, gehören natürlich auch die Kommentare, damit Sie später auch noch gut durch Ihren selbstgeschriebenen Quelltext finden.

 

In HTML werden Kommentare folgendermaßen gesetzt : <!- Dies ist der Kommentar ->

Sie sehen : Alles was zwischen den Tags <!- und -> steht, wird vom Browser als Kommentar erkannt und damit nicht interpretiert.

 

Das Grundgerüst / Der Aufbau einer HTML-Seite

Damit der Browser beim Öffnen eines Dokuments merkt, daß es sich um ein HTML-Dokument handelt, gibt es grundlegende HTML-Tags, die zu jeder HTML-Seite dazu gehören und zwingend notwendig sind.

<HTML>

<BODY>

</BODY>

</HTML>

Dies ist ein Beispiel für eine schon funktionstüchtige HTML-Seite, natürlich noch ohne jeglichen Inhalt.

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Hier kommen ein paar sinnvolle Ergänzungen zum obigen Beispiel hinzu, die in keinem HTML-Grundgerüst fehlen sollten.
Auf die einzelnen Tags werde ich nun explizit eingehen.

<HTML>

</HTML>

Das HTML-Dokument wird geöffnet. Dieses Tag muß am Anfang einer jeden HTML-Seite stehen, es wird am Ende mit </HTMLl> wieder geschlossen.
<HEAD>

</HEAD>

Wie es schon aussagt, wird hier der Kopf der HTML-Seite eingeleitet, in dem weitere sinnvolle Tags wie z.B. TITLE definiert werden können, auf die wir später noch eingehen. Geschlossen wird der Kopf wiederum mit dem Tag </HEAD>
<TITLE>

</TITLE

Oben im Kopf des Webbrowser sehen Sie den Namen der aufgerufenen Seite, er wird hier mit diesem Tag TITLE definiert. Alles was zwischen dem Tag TITLE und /TITLE steht, wird oben im Browser als Titel der Seite angegeben. Dieser Tag muß zwangsweise innerhalb des Tags HEAD stehen (siehe oben)
<BODY>

</BODY>

Alles, was zwischen diesen beiden Tags steht, stellt den Rumpf bzw. den wahren Seiteninhalt der HTML-Seite dar.

 

Das HTML-Tag Body - Der Inhalt eines jeden Dokuments  

Alles, was zwischen den beiden Tags <BODY> und </BODY> eines HTML-Dokuments steht, stellt den Inhalt der Seite dar und wird durch den Browser als Seite auf dem Bildschirm dargestellt.

Der folgende Quelltext ... <HTML>
<HEAD>
<TITLE>
</TITLE>
<BODY>
     Hier entsteht meine erste HTML-Seite !!!
     Schauen Sie her !!!
</BODY>
</HTML>

... würde also nur eine ganz stinknormale HTML-Seite darstellen, mit weißem Hintergrund und mit dem oben angegebenen Text "Hier entsteht... " im linken oberen Bildrand der Seite. Für den Anfang natürlich nicht schlecht, aber trotzdem wenig vorzeigbar.

Im Folgenden werden wir alles durchgehen und erlernen, mit welchen Mitteln man die Seite weiter attraktiver gestalten kann ...

HTML-Tag : Bedeutung : Beispiel in HTML im Body : Ausgabe im Browser :
<P></P> Einleitung eines Absatzes im HTML-Dokument Dies ist ein Absatz !
<P>
Dies ist ein Absatz !
</P>
Dies ist ein Absatz !

Dies ist ein Absatz !

<BR> Ein Zeilenumbruch wird eingesetzt

Aufpassen ! KEIN Schluß-Tag </BR> !

Dies ist ein Zeilenumbruch !
<BR>
Dies ist ein Zeilenumbruch !
Dies ist ein Zeilenumbruch !
Dies ist ein Zeilenumbruch !
<HR> Eine horizontale Linie wird gezogen.

Aufpassen ! Wieder KEIN Schluß-Tag </HR> !

Hier kommt eine Linie !
<HR>
Hier kommt eine Linie !
Hier kommt eine Linie !
Hier kommt eine Linie !
<HX></HX> Der zwischen den beiden Tags stehende Text wird als Überschrift gesetzt. Das X steht für die Schriftgröße, diese geht von 1 bis 6 (1 = am größten, 6 = am kleinsten) <H1>Eine Überschrift!</H1>

<H3>Eine zweite Schrift!</H3>

Eine Überschrift!

Eine zweite Schrift!

<B></B> Der Text zwischen beiden Tags wird fettgedruckt dargestellt (B = Bold typed) <B>Dick geschrieben!</B> Dick geschrieben!
<I></I> Der Text zwischen beiden Tags wird kursivgedruckt dargestellt (I = Italic typed) <I>Kursiv geschrieben!</I> Kursiv geschrieben
<SUP></SUP> Der Text zwischen beiden Tags wird hochgestellt, ein Beispiel wäre z.B. eine mathematische Formel  1<SUP>2</SUP> 12
<SUB></SUB> Der Text zwischen beiden Tags wird tiefgestellt, ein Beispiel wäre in der Chemie zu finden... H<SUB>2</SUB>O H2O
<BIG></BIG> Der Text zwischen beiden Tags wird größer dargestellt als normal (ohne explizite Veränderung der Schriftgröße !) <BIG>großgeschrieben!</BIG> großgeschrieben!
<SMALL>
</SMALL>
Der Text zwischen beiden Tags wird kleiner dargestellt als normal (ohne explizite Veränderung der Schriftgröße !) <SMALL>kleiner!</SMALL> kleiner!
<TT></TT> Textformatierung ähnlich einer Schreibmaschine ! <TT>Schreibmaschine</TT> Schreibmaschine
<CODE>
</CODE>
Textformatierung wie ein Programmiercode ! <CODE>Quelltext</CODE> Quelltext
<KBD></KBD> Textformatierung als Tastatureingabe (Keyboard) <KBD>Tastatureingabe</KBD> Tastatureingabe
<CITE></CITE> Textformatierung als Zitat (=CITE) <CITE>Zitat</CITE> Zitat
<DFN></DFN> Textformatierung als Definition (=DFN), ähnlich dem Zitat (siehe oben) <DFN>Definition</DFN> Definition
<EM></EM> Text wird besonders betont hervorgehoben
(EM = Emphasis), ähnlich wie oben
<EM>Betont</EM> Betont
<STRONG>
</STRONG>
Text wird als wichtig hervorgehoben. <STRONG>Wichtig</STRONG> Wichtig
<VAR></VAR> Text wird als Variable speziell gekennzeichnet
(ähnlich wie die obigen Textformatierungen)
<VAR>Variable</VAR> Variable

 
Tabellen - Ein mächtiges und wichtiges Werkzeug beim Aufbau einer Website  

An den sogenannten Tables kommt bei der Websitenerstellung eigentlich kein Webmaster vorbei. Zum einen lassen sich damit natürlich übersichtliche Tabellen jeder Art erstellen, zum anderen können diese Tabellen aber auch sehr beim Layout helfen.

In diesem Kapitel werden Sie sehen warum ...

Tabellen werden in HTML erstellt durch den Tag <TABLE> und natürlich seinen "Gegenpart" </TABLE> zum Abschließen der Tabelle.
Die einzelnen Zeilen werden mit dem Tag <TR> erstellt und mit Tag </TR> abgeschlossen, die einzelnen Zellen jeder Zeile dagegen mit dem Tag <TD> und </TD>.

 

Bedeutung :

Beispiel in HTML im Body :

Ausgabe im Browser :

Tag öffnet die Tabelle ...
Tag erstellt die erste Zeile ...
Hier wird die erste Zelle erstellt ...
Hier wird die zweite Zelle erstellt ...
Tag schließt die erste Zeile ab ...
Tag schließt die Tabelle ab ...

<TABLE BORDER="1">
<TR>

<TD>Inhalt der Zelle 1</TD>
<TD>Inhalt der Zelle 2</TD>
</TR>
</TABLE>

Inhalt der Zelle 1Inhalt der Zelle 2

 
HTML-Entities

Jedes aktuelle Textverarbeitungsproblem auf Ihrem PC kann mit den deutschen Sonderzeichen gut umgehen, bei HTML sieht dies leider anders aus, diese werden meist falsch bei Aufruf der Seite wiedergegeben und dargestellt. Zu diesen Sonderzeichen gehören sowohl die Vokale ü, ö, Ä usw. als auch Zeichen wie §, die " oder auch das Zeichen >.

Um diese Sonderzeichen richtig auf dem Bildschirm darzustellen, braucht man die Entities. Die Entities sind ganz einfach gesagt Ersatzzeichen für diese Sonderzeichen. Jedes Sonderzeichen, was man benützt, durch ein solchen Entity zu ersetzen, mag zwar manchmal ein bißchen mühselig erscheinen, dafür hat man aber die Garantie, daß wirklich jedes Zeichen korrekt vom Browser interpretiert und dargestellt wird.

Es folgt eine Sammlung der am häufigsten gebrauchten Entities unter HTML und für was sie stehen :

ä  &auml; ß &szlig; © &copy;
Ä &Auml; Leerzeichen &nbsp; ® &reg;
ö &ouml; & &amp;
Ö &Ouml; § &sect; < &lt;
ü &uuml; > &gt;
Ü &Uuml;

Jedes Entity bei HTML beginnt also mit einem &. Danach folgt die weitere Ersetzung des Sonderzeichens, abgeschlossen jeweils mit einem Semikolon. Wie man sehen kann, wird hierbei eine bestimmte Logik verfolgt. Bei der Ersetzung des Buchstabens Ä wird z.B. der Umlaut vom A verwendet (&Auml = A-Umlaut).

 

DIESER WORKSHOP WIRD IN KÜRZE WEITER FORTGESETZT !!!

 


© copyright 2001 / Helge Wiemann