HTML verstehen; Ein Einstieg in HTML! (Teil1)

HTML verstehen

Heute möchte ich mit einem Einstieg in die wichtigsten HTML Anweisungen beginnen.

Ich möchte Ihnen als beginnendem Internet-Marketer HTML näher bringen, damit Sie sich bei Fehlern, die z.B. bei NVU o.ä. auftreten können, zu helfen wissen. Wie ich schon häufig erwähnte, kann es bei Korrekturen in NVU oder anderen Composern immer wieder dazu kommen, dass sich Texte verschieben, ohne dass man dies im Editorbild des Composers berichtigen kann. Da hilft Ihnen nur der Blick in das HTML-Coding.

Keine Angst, HTML ist eine sehr leichte Sprache und hat eigentlich gar nichts mit Programmierung zu tun. Aber wenn Sie sich ein wenig nur damit auskennen, können Sie sich selbst helfen, wenn Fehler im Blogeditor, NVU etc. auftreten.

Stellen Sie sich vor, sie wollen ein extern generiertes Script für ein OptIn Formular in Ihren Blog oder Ihre Seite integrieren. Sie tun es, und das ganze Bild verschiebt sich! Alle mühsam aufgebaute Formatierung im Blog oder Ihrer Seite ist dahin. Was tun?

Wenn Sie jetzt ein wenig HTML können, haben Sie den Fehler bestimmt schnell gefunden und können Ihn beseitigen. Darum geht es in dieser Artikelfolge!

[Nebenbei, der Grund warum die Composer öfters mal Verschiebungen machen können, hängt mit dem Editor zusammen. Falls man hinter ein Wort klickt, wo im generierten HTML-Coding noch eine ganze Reihe HTML-Anweisungen stehen, dann kann der Composer schon mal durcheinander kommen! Das ist der Grund warum, hier Fehler vorkommen können]

Beginnen wir also als erstes mit Ihrem Browser und dem Aufbau einer Seite in HTML.

Der Browser

Aufgabe eines Browsers ist, die Inhalte einer Seite so auf Ihrem Bildschirm darzustellen, wie das der „HTML-Programmierer“ gewünscht hat. Dazu muss der Browser aber auch wissen, wie er das machen soll.

Stellen Sie sich den Browser als ein Programm vor, das bei allem rückfragen muss, wie alles was da kommt, gemeint ist. Der Browser an sich ist dumm! Alles was der macht, muss man ihm sagen.

Denn stellen Sie sich vor, ein Chinese, der irgendwo in China sitzt, ruft Ihre Seite auf. Sein Browser ist der gleiche, wie der den Sie auch haben. Für den Chinesen, müssen die Schriftzeichen ganz anders dargestellt werden, wie hier bei uns. Das muss der Browser aber auch wissen.

Wie kommt der Browser nun an diese Bedingungen? Mr. Browser erhält einen Text von Ihrer Webseite, und der sagt ihm „Ich spreche deutsch“, ist also nix mit Chinesisch! Also muss Mr. Browser sich erst mal schlau machen, was das ist: „deutsch“. Da Mr. Browser dumm ist, liest er die 1. Zeile der HTML-Seite, die da gerade angekommen ist. Diese sagt ihm:

Das Format, das du darstellen sollst ist HTML Version 4.0! Außerdem sollst Du nicht den gewohnten Zeichensatz „chinesisch“ nehmen, sondern den Deutschen. Wer sagt das? Wie erhält Mr. Browser die Information?

Nun sagen tut das Mr. Server! Mr. Server lebt bei Ihrem Hoster und schickt dem chinesischen Mr. Browser den Text Ihrer Seite. Am Beginn dieser Seite steht dann die Anweisung für Mr. Browser, dass er HTML Version 4.0 machen soll und den Zeichensatz „deutsch“ benutzen soll.

„Aha“ sagt Mr. Browser, „HTML Version 4.0! Und wo find‘ ich das denn?“ Nun, Mr. Server kennt die Dummheit von Mr. Browser und hat vorgesorgt. Er schickt ihm gleich einen Verweis auf die Seite mit, wo Mr. Browser HTML Version 4.0 finden kann. „Gut“ sagt Mr. Browser, „dann hol ich mir mal diese dapperte Seite!“ Er ruft nun diese Seite auf und erkennt, „Ach ja, so soll ich das machen!“. In dieser Seite steht genau das, was Mr. Browser mit Anweisungen machen soll! Mr. Browser nimmt die Seite und speichert sie.

Jetzt fragt er bei Mr. Server an: „Was soll ich für die Zeichen nehmen?“ Mr. Server meint: „Dann nimm doch mal den Zeichensatz mit der Nummer „iso-8859-15“! „Dann schick ihn mir mal“ meint Mr. Browser.

Jetzt hat Mr. Browser eigentlich alles zusammen und kann die Seite darstellen. Er gibt einen Bildschirm aus und der Chinese wundern sich über diese Zeichen, die da kommen! Aber alle Beteiligten haben alles richtig gemacht. Denn so hat es der Programmierer der Webseite – also Sie – gemeint!

Ok, ganz so dumm ist Mr. Browser nicht, er weiß aufgrund von den von Mr. Server gesendeten Daten jetzt wie ein Absatz aussieht, wie er Einrückungen machen soll etc. All das hat Mr. Server ihm geschickt und Mr. Browser kann damit umgehen.

Diese Korrespondenz, die da Mr. Browser und Mr. Server mit einander betreiben, sieht in Wirklichkeit ein wenig anders aus. Denn Mr. Browser kennt die HTML Sprachen und kann sich danach richten. Er muss nicht zurück fragen, er kennt die Versionen von HTML, er hat sie so zusagen im Hirn! Aber die Information mit welcher Version er arbeiten soll, muss ihm gegeben werden.

Sinn des Ganzen ist die ersten Zeilen eines sog. HTML-Doctypes zu erklären. Er stellt den Beginn jeder Seite einer Website dar. Sie werden gleich den doch relativ technisch aussehenden 1. Satz sehen, und sollten ihn auf jeder Seite einbauen.

Seitenstruktur

Eine Internetseite ist im Prinzip immer gleich aufgebaut. Sie können fast jede Seite in Ihrem Browser im HTML-Format anschauen, wenn Sie sich den Quelltext der Seite anschauen.

Im Internet-Explorer geht das mit dem Menü-Aufruf „Ansicht | Quelle“! Im Firefox ist es mit <strg>U oder über das Menü mit „Ansicht | Seitenquelltext anzeigen“ möglich. Machen Sie das doch mal mit irgendwelchen beliebigen Seiten, und Mr. Browser wird sich freuen :-). Sie werden einige Unterschiede entdecken. Denn Sie steuern das was der Chinese sehen wird.

Kommen wir zur Erklärung der Struktur einer Seite:
Eine Seite ist folgendermaßen aufgebaut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head> 
    <meta http-equiv="Content-Type" content="text/html; 
         charset=iso-8859-15" />
    <title>Titel der Webseite</title>
    <!-- Evtl. weitere Kopfinformationen -->
  </head>
  <body>
    <p>Inhalt der Webseite</p>
  </body>
 </html>

Begriffe und Schreibweisen in HTML

Zunächst das Wichtigste überhaupt: Mr. Browser spricht HTML! Und HTML muss Text von Anweisungen, wie „mach einen Absatz“, „Schreib das mal grün“ etc. trennen
Das kann Mr. Browser nur tun, in dem er Tags erkennt und verarbeitet. Ein Tag – sprich „täg“ – ist eine Anweisung an HTML! Sie weisen Mr. Browser an, bestimmte Textaufbereitungen zu tun. Der Text selbst steht fast immer zwischen Tags!

Dabei können Sie so viele Leerzeichen in dem Text haben, wie immer sie wollen! Sie können zwischen Tags im Text beliebig viele Zeilenvorschübe haben! Mr. Browser hat eine Routine, sie alle überzähligen Leerzeichen zu einem zusammenfasst. D.h. ein Leerzeichen bleibt immer stehen: „Es kann nur Eines geben“ :-).

Bei den meisten HTML-Tags gibt es einleitende Beginn-Tags und zugehörige End-Tags. Mit dem Beginn-Tag beginnt eine Darstellungsanweisung und mit dem End-Tag endet sie. Ein Tag beginnt immer mit <Befehl> dann kann ein TEXT folgen und schließlich wird ein End-Tag </Befehl> eingegeben.

Zum Beispiel oben <body> und </body>

Nach einem Einleitungs-Tag muss nicht immer Text folgen, es kann auch wieder ein anderer Tag kommen. Somit verschachteln sich Tags miteinander. Sie sehen z.B. oben nach dem <body> – Tag kommt ein <p>- Tag, dann Text und dann erst der End-Tag für p und schließlich der </body>.

Diese Verschachtelung ist immer in HTML anzutreffen. Es kommt fast immer ein Anfangs-Tag und ein End-Tag!

Deshalb mein Rat: Wenn Sie einen Beginn-Tag schreiben, dann rücken Sie die folgenden Anweisungen immer um 2 oder 3 Leerzeichen in einer neuen Zeile ein. Erst beim End-Tag, gehen Sie wieder 2-3 Zeichen nach links. Damit steht dann der Beginn-Tag immer unter dem End-Tag. Das erhöht die Übersichtlichkeit und lässt fehlende End-Tags gleich erkennbar werden. Glauben Sie mir, die Verschachtelung kann in HTML sehr tief werden, dann ist Übersicht von Nöten!

Und damit das auch immer schön klappt, noch ein Rat: Schauen Sie doch mal in Ihrem Editor oder im Composer nach, dass Sie diesen so einstellen, dass er bei Einrückungen keine Tabs (Vorschübe mit der Tab-Taste) sondern Leerzeichen einsetzt. Sonst kann es Ihnen passieren, dass der eine Editor den Quelltext ganz anders als der andere Editor darstellt. Die schöne Formatierung Ihres HTML-Quelltextes (auch Source gennant) Seite ist dann dahin.

Ich hoffe Sie sind nun neugierig auf weitere Geschichten von Mr. Browser und Mr. Server geworden, die sich von Ihnen gesteuert in HTML unterhalten.
Wie heißt es immer so schön: „Fortsetzung folgt!“

Im nächsten Teil erhalten Sie die Seitenstruktur nochmals näher erläutert. Neue „Personen“ werden ihren Auftritt haben.

Falls Ihnen diese Artikelserie soweit gefallen hat, dann schreiben Sie mir doch einen Kommentar! Falls nicht, oder Sie noch andere Personen kennenlernen wollen, dann schreiben Sie mir bitte ebenfalls einen Kommentar.

Also bis zum nächsten Teil der Serie „HTML verstehen“

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar