Html

Html ist eine normale Textdatei, in der sogenannte Tags ausgezeichnet werden. Diese Tags haben eine besondere Bedeutung. Ein Tag wird von spitzen Klammern ("<" und ">") eingeschlossen. Nach dem öffnenden "<" steht der Name des Tags. Ein Tag hat also die Form <tag>.

Tags können Inhalte haben, müssen es aber nicht. Der Inhalt kann gewöhnlicher Text sein, in einem Tag können aber auch weitere Tags oder eine Mischung von beidem enthalten sein.

Hat ein Tag einen Inhalt, so wird dieser Inhalt von einem öffnenden und einem schließenden Tag eingeschlossen. Der öffnende Tag hat die Form <tag>, der schließende die Form </tag> mit demselben Namen. (Hier wird einmal der Tag in seiner Gesamtheit und einmal als öffnender und schließender Teil betrachtet.)

Leere Tags können auch abgekürzt in der Form <tag /> geschrieben werden, die dasselbe wie <tag></tag> bedeuten. Ganz egal ist die Schreibweise aber nicht. Die Browser erwarten bei einigen Tags, daß sie nicht in der abgekürzten Form geschrieben werden.

Die Tags definieren eine hierarchische Struktur. Vor dem schließenden Tag müssen also alle inneren Tags geschlossen werden. Sonst ist das Html ungültig.

Tags können auch Attribute zugewiesen werden, die beim öffnenden Tag angegeben werden. Jedem Attribut wird ein Wert zugewiesen, der in Anführungszeichen eingeschlossen wird. Attribute sind untereinander und vom Tag-Namen durch Leerzeichen getrennt. Ein Tag mit Attributen sieht also so aus:
<tag attribut1="wert1" attribut2="wert2">.
Hat ein Tag mit Attributen keinen Inhalt, so wird vor dem ">" das "/" geschrieben.

Bisher wurde nur beschrieben, wie Html allgemein aufgebaut ist. Diese Beschreibung könnte auch für XML stehen. XML ist ungefähr (es stimmt nicht genau) eine allgemeine Form von Html, wo die Namen der Tags und der Attribute nicht vorgegeben sind. Auf das XML-Format soll hier aber nicht näher eingegangen sein. Das Wichtigste wurde ohnehin schon beschrieben.

Wenn in den Texten einer Html-Datei Zeichen wie < oder > vorkommen, müssen sie umschrieben werden. Hier ist eine Aufstellung der wichtigsten zu umschreibenden Zeichen und wie sie umschrieben werden:

• < – &lt;
• > – &gt;
• & – &amp;
• " – &quot;

Es sind Umschreibungen auch für weitere Zeichen wie z. B. die Umlaute vorgegeben. Diese Zeichen können aber inzwischen direkt in den Text reingeschrieben werden (wenn die Datei in entsprechender Codierung gespeichert wurde, aber das geht zu weit).

In Html sind aber die Namen der Tags und Attribute vorgegeben und haben eine Bedeutung. Nachfolgend sollen ein paar wichtige Tags und Attribute für das Ändern der Homepage beschrieben werden.

Stehen in einer Html-Datei mehrere Leerzeichen oder Zeilenumbrüche hintereinander, so werden diese als ein einziges Leerzeichen gewertet. Eine Zeile kann bei Leerzeichen umgebrochen werden. Um dieses Umbrechen zu verhindern, kann ein geschütztes Leerzeichen verwendet werden, das mit &nbsp; eingegeben wird. Mehrere geschützte Leerzeichen hintereinander werden auch nicht auf eines reduziert.

In Html sind die Namen der Tags vorgegeben. In einem bestimmten Tag dürfen nur bestimmte andere Tags liegen. Ein Tag darf auch nur bestimmte Attribute haben, die vom Tag abhängen.

Html unterscheidet im Groben Block-Elemente und Inline-Elemente. Ein Block-Element belegt die gesamte Breite des übergeordneten Elements, außer dies wird durch andere Einstellungen verändert. Ein Inline-Element ist ein Element innerhalb des Textflusses. Wird der Text verändert, wandert das Element mit dem Text mit.

Tags

• Block-Elemente
  • <div>
    Das allgemeine Block-Element. Dieses Element wird zur Strukturierung von Html verwendet, wenn man z. B. eine Html-Seite in Bereiche unterteilen will.
  • <p>
    Ein Absatz, der normalerweise Text enthält.
  • <h1> – <h6>
    Dadurch werden Überschriften für verschiedene Hierarchien definiert. <h1> ist die oberste Überschriften-Ebene, die bei den Homepages aber nicht verwendet wird. Am Beginn jeder Seite befindet sich eine Überschrift der Ebene <h2>. Es wurden auch Überschriften der Ebene <h3> für die Homepage formatiert, die weiteren Ebenen aber nicht.
  • <ul>
    Dadurch wird eine nicht-numerierte Liste erstellt. Vor den einzelnen Listen-Einträgen werden normalerweise sogenannte Bullets ausgegeben wie z. B. bei dieser Liste der Tags.
  • <ol>
    Dadurch wird eine nummerierte Liste erstellt. Die einzelnen Listen-Einträge werden durchnumeriert.
  • <li>
    Dadurch werden die Listen-Einträge definiert. Ein <li>-Tag befindet sich innerhalb eines <ul>- oder eines <ol>-Tags.
• Inline-Elemente
  • <span>
    Dieses ist das allgemeine Inline-Element. Es wird verwendet, wenn Teile eines Textes anders formatiert werden sollen als der Rest.
  • <strong>
    Der Text innerhalb dieses Tags wird normalerweise fett dargestellt.
  • <em>
    Der Text innerhalb dieses Tags wird normalerweise kursiv dargestellt.
  • <a>
    Ein Verweis. Dieser Tag hat normalerweise noch das Attribut "href", wo die Ziel-Adresse des Verweises eingetragen wird.
  • <img>
    Dadurch wird ein Bild angegeben. Im Attibut "src" wird der Verweis zum Bild eingetragen. Da <img> ein Inline-Element ist, wandert das Bild normalerweise mit dem Text mit.
  • <br />
    Damit wird ein Zeilenumbruch im Text erzeugt. Normale Zeilenumbrüche in der Datei bewirken ja nur ein Leerzeichen. Dieser Tag ist per Definition leer.

Attribute

Die Attribute "href" bzw. "src" sind typische Attribute für Verweise bzw. Bilder. Diese Attribute sind nicht überall erlaubt. Es gibt aber einige Attribute, die überall erlaubt sind. Die wichtigsten davon sind "id" und "class".

Mit dem Attribut id wird einem Tag eine eindeutige Identifikation zugewiesen. Die Werte aller "id"-Attribute in einer Datei müssen eindeutig sein, damit der Code gültig bleibt.

Mit dem Attribut class wird einem Tag eine Klasse zugewiesen. Mehreren Attributen darf dieselbe Klasse zugewiesen werden.

IDs und Klassen können frei gewählt werden und sind meist irgendwelche Namen. Einem Tag können auch mehrere Klassen zugeordnet werden. Diese werden im "class"-Attribut durch Leerzeichen getrennt.

Die Attribute "id" und "class" sind wichtig bei der CSS-Formatierung. Manchmal ist es notwendig, einem Tag eine ID bzw. ein oder mehrere Klassen zuzuweisen, damit eine vordefinierte CSS-Formatierung greift.