Einführung in HTML – Grundlagengewinnung

1. Oktober 2006

Vorwort

HTML ist seit jeher für alles, was sich auf der Seite zeigt, seien es Texte und Absätze, Tabellen oder Frames, aber auch Formulare, verantwortlich. Dabei ist ist es wichtig sich direkt klar zu machen, dass es gewisse Webstandards gibt, an die es sich zu halten gilt.

Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird.

Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.

Dieses Wissen, rund um die Webstandards und das barrierefreie Web, erklärt, warum viele Coder eine große Abneigung gegenüber diversen HTML-Editoren haben. Ebenso erklärt es den Sinn, warum man sich immernoch die verschiedenen HTML-Tags aneignen und diese sinnvoll einsetzten sollte. So ist auch die strikte Trennung von HTML und CSS zu erklären.

Beim Einsatz von HTML geht es um die Strukturierung der Seite, nicht aber um das Layout und die Formatierung. Der folgende Artikel soll dabei helfen, HTML zu verstehen und die Grundlagen zu erlernen.

Der Aufbau des HTML-Grundgerüsts

Im Verlauf des Textes wird immer die Rede von Tags sein. Tags sind für HTML wichtige Bestandteile, die für die einzelnen Texte, Tabellen etc,.. verantwortlich sind. Dabei haben sie immer einen gewissen Bereich. Dieser wird dadurch gekennzeichnet, dass eine Spitze Klammer auf- und zugeht und der Tag darin steht. Am Ende wird dieser Tag durch ein Slash wieder geschlossen.

Ein Beispiel wäre das:

<p>Dies ist ein Textabsatz</p>

Man erkennt hier genau den Anfang und das Ende, wie oben beschrieben.

Eine HTML Seite ist fast immer gleich aufgebaut.

Dies ist ein einfaches Beispiel:

1. <html>

2. <head>

3. <meta tags />

4. <title>Titel</title>

5. </head>

6. <body>

7. <p>Text</p>

8. </body>

9. </html>

Der Tag <html> umschließt die gesamte Seite und sagt so dem Browser, dass eben eine HTML Seite folgt. Das gleiche mach man auch bei PHP <php. Der Browser weiß nun, wie er die Seite oder den folgenden Codeabschnitt zu interpretieren hat.

Danach folgt der Head Bereich. In ihm stehen Meta Tags und der Titel der Seite. Meta Tags sind für die Suchmaschinen interessant, der Titel hingegen wohl für alle.

Die Meta-Tags stehen als Beispiel dafür, wie auch ein Tag geschlossen werden kann.

Das es nicht folgendermaßen aussieht:

<meta> Meta Tag </>

,sondern so:

<meta … />

kann man sehr leicht erklären, da dieser Tag eben kein Text enthält, sondern direkt wieder geschlossen werden muss. Es gibt ein paar weitere Tags, die so aussehen.

Es folgt der Body der HTML Seite. Wie der Name Body, also der Körper schon sagt, wird hier alles Wichtige für die Strukturierung der Seite eingefügt.



....

<body>

<p>Dies ist mein erster Text</p>

<p>Dies ist mein zweiter Text</p>

</body>

....

Dies würde 2 Textabschnitte bewirken.

Dieser Artikel diente zur Grundlagengewinnung und zum Verständnis von HTML. Wenn man zwar weiß, vielleicht aus Frontpage o.ä. wie eine Seite aufgebaut ist, aber den Sinn nicht versteht ist es schlecht.

Mit diesem Artikel weiß man nun, wie eine Seite aufgebaut ist und wie und wo man verschiedene Dinge einfügt.

Die weiteren Artikel, oder auch nächste Kapitel sind unten aufgeführt.

Weiterführende Artikel

Allgemeine Tags

Verlinkung

Grafiken

Doctype

CSS Grundlagen

Semantik eines (X)HTML Dokuments




Hinterlasse einen Kommentar