eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor

2.2 Wie funktioniert HTML?

 

Tags - Die Basiselemente des HTML-Codes
Das HTML-Grundgerüst
Was muss man beim Erstellen beachten?



Tags - Die Basiselemente des HTML-Codes  Seitenanfang

Wie bereits erwähnt wurde, bedient man sich zur Erstellung von Webseiten der Sprache HTML. Mit ihr legt man Anweisungen fest, die der Browser bei der Darstellung der Seite im Web zu berücksichtigen hat. Damit der Browser diese Anweisungen versteht, muss eine bestimmte Struktur in der Schreibweise eingehalten werden. Die wichtigsten HTML-Elemente sind dabei die Tags.

Ein Tag setzt sich zusammen aus einem "Kleiner"-Zeichen ( < ), einem "Größer"-Zeichen ( > ) und der Anweisung an den Browser, die sich zwischen diesen beiden Klammern befindet.
<Anweisung>

Der komplette HTML-Befehl, der sogenannte Container, ergibt sich jedoch erst aus (obigem) Anfangs-Tag und dem dazu gehörigen Schluss-Tag. Ein Schluss-Tag unterscheidet sich nur durch einen Schrägstrich ( / ) vor der Anweisung. Bis auf ein paar Ausnahmen benötigen alle Befehle einen kompletten Container, also einen Anfangs- und einen Schluss-Tag. Dabei können beliebig viele andere Anweisungen, also Container, ineinander verschachtelt sein. Bedingung ist allerdings, dass die jeweils innersten vor den jeweils äußersten geschlossen werden.
<Anweisung> </Anweisung>

Zwischen Anfangs- und Schluss-Tag schreibt man den Text des Web-Dokuments, also das, was im Endeffekt vom Browser dargestellt wird und damit sichtbar ist. Möchte man beispielsweise das Wort Internet fettgedruckt darstellen, erteilt man folgenden Befehl:
<b>Internet</b>
Das "b" zwischen den Klammern steht hierbei für das englische bold zu Deutsch fett (Auflistung der verschiedenen HTML-Befehle unter 2.3 HTML-Tags und Sonderzeichen). Nach der Aufschlüsselung der Tags durch den Browser sieht der Anwender auf dem Bildschirm nur folgendes:
Internet

Die Anweisungen an den Browser sind nicht alle so eindeutig wie beispielsweise der Befehl für Fettdruck. Es gibt eine Vielzahl von Befehlen, die neben der einfachen Anweisung noch genauere Angaben benötigen. Dies ist unter anderem bei einer Grafikeinbindung, bei der Ausrichtung eines Absatzes oder bei Farbzuordnungen notwendig. Genauere Spezifikationen einer Anweisung erfolgen durch sogenannte Attribute, die durch ein Leerzeichen von der eigentlichen Anweisung getrennt werden. Dabei gibt es Attribute mit einer Wertzuweisung, aber auch welche, die selbst schon einen Wert repräsentieren. Letztere werden durch ein Gleichheitszeichen ( = ) und Anführungsstriche ( " " ) gekennzeichnet. Eine Anweisung kann durch mehrere Attribute (+ Werte) definiert werden (vgl. Steyer).

einfaches Attribut:
    <Anweisung Attribut> </Anweisung>

Attribut mit Wertzuweisung:
    <Anweisung Attribut="Wertzuweisung"> </Anweisung>
    z.B. <p align="justify">Blocksatz</p>
           <a href="http://www.google.de" target="_blank">Link zu Google</a>

Der Browser interpretiert die Tags und führt sie aus. Durch diese Aufschlüsselung fallen die Tags weg und sind dann bei der Darstellung der Webseite im WWW für den Betrachter nicht mehr zu erkennen. Es besteht jedoch die Möglichkeit sie sich bei Bedarf anzeigen zu lassen. Man muss dafür nur die Quelltext-Ansicht des Browsers aufrufen (beim Internet Explorer unter Ansicht/Quelltext anzeigen).


Weitere Beispiele zur Interpretation von Tags:


Tag-Struktur
 


Ansicht im Browser
 

<h1>Überschrift 1. Ordnung</h1>

Überschrift 1. Ordnung

<h2>Überschrift 2. Ordnung</h2>

Überschrift 2. Ordnung

<h6>Überschrift 6. Ordnung</h6>
Überschrift 6. Ordnung
<i>kursiv</i> kursiv
<a href="http://www.google.de">Google</a> Google
<body bgcolor="red">  
<p align="left"><b>Text linksbündig und fett</b></p>
Text linksbündig und fett

 

Das HTML-Grundgerüst   Seitenanfang

Damit HTML-Code vom Browser als solcher erkannt wird, ist es erforderlich, den Quellcode in das HTML-Grundgerüst zu schreiben. Eine Webseite wird dadurch in einen später nicht angezeigten Bereich, den Head, und in einen sichtbaren Bereich, den Body, unterteilt.

Das HTML-Grundgerüst einer Webseite sieht wie folgt aus:

Das HTML-Grundgerüst

Wie zu erkennen, wird eine HTML-Seite immer mit der Anweisung

<html>

begonnen und mit

</html>

wieder beendet.

Diese beiden Tags bilden den äußersten Container einer Webseite. Darauf folgt immer, der nach der Aufschlüsselung des Codes durch den Browser unsichtbare Teil, der Head oder Kopf der HTML-Seite. Er beginnt mit der Anweisung

<head>

und endet mit

</head> .

Der Head bzw. Header definiert den Anfang der Webseite. In ihm stehen der Titel der Seite (wird über Anweisung <title>Name des Titels</title> definiert, mehr Information) und Angaben zum Autor und Inhalt des Dokuments, sowie Schlüsselwörter für die Suchmaschinen. Zudem kann man an dieser Stelle die verwendete Version von HTML oder der Erweiterungssprachen erwähnen. Der Inhalt des Head ist später auf der visualisierten Webseite nicht zu erkennen. Auf den Head folgt der Body oder Körper. Er startet mit der Anweisung

<body>

und endet mit

</body> .

Im Body sind die Elemente einer Webseite zu finden, die nachdem der Browser den Quellcode interpretiert hat, graphisch sichtbar sind. Das ist unter anderem der eigentliche Text, sowie Bilder, Links, usw. Im obigen Besipiel wurde Hallo Welt in den Body der HTML-Seite geschieben. Klickt man mit der Maus auf das Bild des HTML-Grundgerüsts dann öffnet sich ein Browser-Fenster, das zeigt, wie diese Seite aussieht, nachdem der Browser den Code aufgeschlüsselt und visualisiert hat. Im Body-Tag selbst lassen sich Angaben zum Aussehen des gesamten Dokumentes treffen. Spezifikationen wie die Hintergrundfarbe, das Hintegrundbild, die Farbe des Textes usw. werden innerhalb des Tags durch Attribute und Werte angegeben.

Hintergrundfarbe <body bgcolor="red">
Textfarbe
<body text="green">
Farbe der Hyperlinks
<body link="blue">
Farbe der besuchten Links <body vlink="yellow">

Mehr Informationen zu Farbangaben im WWW gibt es unter 2.3 HTML-Tags, Sonderzeichen und Farbangaben.

Was muss man beim Erstellen einer Webseite beachten?  Seitenanfang

Auf den Titel der Webseite achten: Titel wird in der Titelzeile des Browsers angezeigt, er dient zudem als Standardvorgabe beim Speichern der Webseite und beim Ablegen als Favorit bzw. Bookmark und ausserdem wird er als Suchergebnis auf den Seiten von Suchmaschinen verwendet.

Sonderzeichen: Sonderzeichen haben einen eigenen HTML-Code (z.B. für den Umlaut ä gilt &auml;, für gilt &euro;). Auflistung der Sonderzeichen.

CSS vorsichtig verwenden, denn nicht alle Browser verstehen CSS. Nie ohne vorherigen Funktionstest einsetzen!

Bei Größenangaben Prozent den Pixeln vorziehen: Berücksichtigt man das, bleibt die Webseite relativ, d.h. sie kann sich mit ihren Elementen, darunter vorallem Tabellen und Linien, flexibel an die Größe des Browserfensters anpassen, sodass nichts verschiebt und alles sichtbar bleibt.

Tabellen nach Möglichkeit vermeiden: Browserfenster werden meist nicht im Vollmodus geöffnet, zudem existieren verschiedene Bildschirmgrößen, die Einfluss auf das Aussehen der Seite haben. Vermeidet man Elemente, die eine feste Breite definieren, lässt sich die Webseite auch in kleinerem Format problemlos lesen.

Bei der Erstellung einer Webseite mit dem Texteditor auf die Dateiendung achten (HTML-Seiten haben .htm oder .html als Endung).

Keine Zweckentfremdung von HTML-Elementen: HTML-Tags sollten gemäß ihrer Funktion verwendet werden. Zum Hervorheben von Standardtext die dafür vorgesehenen tags (<b>, <big>) verwenden und nicht die zur Formatierung von Überschriften (<h1>, <h2>, etc.). Mehr Information dazu unter 4.2 Gestaltung barrierefreier Webseiten.

Probelauf der Webseite: Seite vor Veröffentlichung im Web in verschiedenen Browsern ansehen und, falls man die Möglichkeit hat, auf verschiedenen Plattformen testen.


    eine Seite zurück  ein Kapitel zurück  zur Inhaltsübersicht  ein Kapitel vor  eine Seite vor          Erstellt von Simone Fabian, Kristina Laub & Claudia dos Reis Santos, letzte Änderung im Oktober 2002.