Allgemeines zu HTML

Zu HTML

HTML (HyperText Markup Language) ist eine Festlegung des WWW-Konsortiums (World Wide Web, auch W3 genannt) über die Struktur von Dokumenten für den Internet-Dienst WWW. HTML ist eine Untermenge von SGML (Standard generalized Markup Language, ISO 8879), einem umfassenden System zur Strukturierung und Auszeichnung von Dokumenten.

Zu den HTML-Befehlen, den Tags

Die Befehle zur Strukturierung und Auszeichnung werden sowohl in SGML, als auch in HTML Tags genannt. Die Tags sind festgelegte Zeichenfolgen, die in spitze Klammern zu setzen sind. Viele Tags sind Tag-Paare, d.h. sie bestehen aus einem Start-Tag und einem End-Tag. Der Tag ist dann solange wirksam, bis der End-Tag auftritt. Der End-Tag hat die gleiche Zeichenfolge, es wird ihm aber ein Schrägstrich (slash) vorausgesetzt. Die Schreibweise der HTML-Tags und auch die der später erklärten HTML-Attribute ist im Gegensatz zu den Bezeichnern in JavaScript nicht case-sensitiv, z.B. statt ist statt <HTML> auch <html> möglich. In der neueren Literatur wird Großschreibung immer seltener verwendet. Im Hinblick auf die neueren "Sprachen" XML und XHTML (siehe "Kurs_XML") sollte man sich auf die Kleinschreibung umstellen, da die Tags in diesen neuen Sprachen zwingend in Kleinschreibweise darzustellen sind.

Beispiel für ein Tag-Paar (Tag "b" für bold = Fettdruck): 

     <b>Fettdruck</b>

Ein großes Problem besteht darin, dass HTML nicht unter voller Kontrolle des WWW-Konsortiums steht. Die Browser-Hersteller - heute dominieren Netscape Navigator (Ende 1998 von American Online aufgekauft) und Microsoft Internet-Explorer - entwickeln eigene Tags, die zu denen des Mitbewerbers nicht immer kompatibel sind oder die beim Mitbewerber fehlen. Umgekehrt werden auch nicht immer alle vom WWW-Konsortium definierten Tags von den Browser-Herstellern umgesetzt, es wurden deswegen auch einige schon Tags wieder zurückgezogen. Ein Beispiel dafür ist der Tag <MATH>, der in der offiziellen HTML-Version 3.0 enthalten war, in der Version 3.2 aber nicht mehr. Mit diesem Tag hätte man relativ einfach mathematische Formeln in die HTML-Seite einfügen können.

Der grundsätzliche Aufbau einer HTML-Seite

Zuerst der grundsätzliche Aufbau einer (einfachen) HTML-Seite. 
   <html>                                 |Start-Tag HTML-Dokument
      <head>                              |Start-Tag Header (Kopfteil)
          <title>Titel der Seite</title>  |Start- und End-Tag Title
           .....                          |
           .....                          |
      </head>                             |End-Tag Header
                                          |
      <body>                              |Start-Tag Body (Hauptteil)
           .....                          |
           .....                          |
           .....                          |
      </body>                             |End-Tag Body
   </html>                                |End-Tag HTML-Dokument
Die Einrückungen im HTML-Quelltext sind wahlfrei und haben auf die Darstellung des Dokumentes keinen Einfluß. Zeilenvorschübe und Tabulatoren im HTML-Quelltext werden als ein Leerzeichen behandelt; ebenso mehrere Leerzeichen.

Man bemüht sich um die gute Lesbarkeit des HTML-Quelltextes, doch oft vergebens. Die relativ kurze Lebensdauer von HTML-Seiten stehen der typografischen Gestaltung des Quelltextes im Wege. Hauptsache, die Darstellung auf dem Bildschirm entspricht den Vorstellungen des HTML-Designers.

Für künftige Anwendungen sollte man v o r den Start-Tag <html> folgende Zeile setzen: 

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">

Dieser Eintrag bedeutet, dass das Dokument der HTML-Spezifikation 4.01 entspricht (oder entsprechen soll). Mit einem Validierungsprogramm (siehe Stichwort Validierung im Kap. Glossar) kann die Einhaltung dieser Spezifikation überprüft werden.

Zu den Attributen

Viele Tags besitzen Optionen; sie werden in SGML und HTML Attribute genannt. Attribute sind nicht immer Optionen im Sinne von wahlfrei, bei einigen Tags gibt es auch Pflicht-Attribute. Beispiele dazu später. Die Attribute haben meistens den Charakter von Eigenschaften, d.h. ihnen können Werte zugewiesen werden. Es existieren viel mehr Attribute als Tags. Viele Attribute können in verschiedenen Tags verwendet werden.

Als Beispiel dient das Attribut color das hier in diesen Zeilen in Verbindung mit dem Tag font zur roten Markierung von bestimmten Textbereichen eingesetzt wird. 

<font color="red"> <font color="red"> </font>...... <font color="red"></font> </font>
Das Attribut color des Tags font bekommt hier den (vordefinierten) Wert "red" zugewiesen. Das Attribut color findet auch in anderen Tags Verwendung.

Ein Tag kann auch mehrere Attribute enthalten. Sie werden durch white-space-Zeichen (ein oder mehrere Leerzeichen, Tabulator oder Zeilenvorschübe) getrennt. Dazu ein Beispiel:

 <font color="red"><font face="Arial, Helvetica" size="2" color="red"> </font>...... <font color="red"></font></font>
Damit wird der zwischen dem Anfangs- und dem End-Tag liegende Textbereich in der Schrift "Arial", ersatzweise "Helvetica", in der Schriftgröße "2" (Standard ist "3") und in der roten Farbe ausgegeben. Nach dem End-Tag wird wieder zur vorher definierten Schrift oder - wenn keine definiert wurde - zur Standardschrift zurückgekehrt.

Zur Zuweisung der Werte an die Attribute dient das Gleichheitszeichen. Der Autor ist für seinen Pascal-Purismus bekannt und besteht dort immer auf einer Freistellung des Gleichheitszeichen mit einem vorausgestellten und einem nachgestellten Leerzeichen. Davon nimmt er in HTML zähneknirschend Abstand (aber wirklich nur in HTML), da Leerzeichen auch zur Trennung der Attribute dienen. Sie sind zwar auch bei der Zuweisung möglich, würden aber die optische Trennung der Attribute nicht gut erkennen lassen. Die Werte der Attribute setze man immer in Anführungszeichen, auch wenn diese in wenigen Fällen optional sind.

Die Kunst der HTML-Programmierung besteht nicht so sehr um das Wissen und die Einsatzmöglichkeit der Tags, sondern mehr darin, zu wissen, welche der vielen Attribute und mit welchen Werten diese Attribute bei einem bestimmten Tag eingesetzt werden können.

Kommentare in HTML

Zum Einfügen von Kommentaren oder zum Auskommentieren von HTML-Anweisungen dienen:

für Kommentarbeginn: <!--

für Kommentarende: -->

Die zwischen diesen Zeichen stehenden Textbereiche (sie können beliebig groß sein) werden vom Browser übergangen, sie können aber z.B. JavaScript-Anweisungen und -funktionen enthalten.

HTML-Kurzreferenz (Auswahl)

   Start-    End-
   Tag       Tag        Erklärung
   -------------------------------------------------------------------------------------
   a) Für Dokumentstruktur:
   <html>    </html>    Gesamtes HTML-Dokument
   <head>    </head>    Header, Kopfteil
   <title>   </title>   Title, Titel
   <base>    </base>    Basisadresse zur Auflösung relativer Links
   <meta>    </meta>    Meta-Informationen über das Dokument
   <body>    </body>    Hauptteil

   b) Für Ausgabe:
   <p>                  Paragraph, Absatz. Zeilenvorschub und neue Zeile
   <br>                 Break Line, Zeilenvorschub
   <h1>       </H1>     Head line, Überschrift, 1 = größte Head line, ... 6
   ....       .....
   <h6>       </H6>     Head line, Überschrift, 6 = kleinste Größe
   <pre>      </pre>    Vorformatierter Text, fixed-space-Schrift
   <blockquote> </blockquote> Zitatblock, meist eingerückt und kursiv
   <cite>     </cite>   Citate, Zitat oder Buchtitel, meist kursiv
   <code>     </code>   Codestellen, meistens in fix-spaced Schrift

   <em>       </em>     Emphasized, hervorgehoben, meistens kursiv
   <strong>   </strong> Strong, starke Hervorhebung, meistens fett (bold)
   <var>      </var>    Platzhalter, Variable, meistens fett
   <kbd>      </kbd>    Hervorhebung für Keybord-Eingabe, meistens fett
   <tt>       </tt>     Typewriter-font (fixed-space-font, z.B. Courier)
   <samp>     <samp>    Wörtlich zu interpretierende Zeichen,
                        meistens in fixed-space-Schrift
   <sup>      </sup>    Sup, hochgestellt
   <sub>      </sub>    Sub, tiefgestellt
   <hr>                 Horizontal Rule, horizonale Linie
   <center>   </center> Zentrierte Ausgabe. Als Tag nicht mehr benutzen.
                        Neu: 'center' als für Attribut 'Align'.
   <b>        </b>      Bold, fett
   <i>        </i>      Italic, kursiv
   <u>        </u>      Underlined, unterstrichen

   <ul>       </ul>     Unorderd list, unsortierte Liste
   <ol>       </ol>     Ordered list, sortierte Liste, numerierte Liste
   <li>       </li>     List item, Einfügen eines Listenelement (UL oder OL)

   <dl>       </dl>     Defination list, Glossar
   <dt>       </dt>     Defination term, Glossarelement
   <dd>       </dd>     Definition eines Glossareintrags

   <img ... >           Einfügen einer Grafik  mit Attributen:
                        src   = "..."    Source. Name des Bildes oder der Grafik,
                                         Pflicht-Attribut
                        align = "..."    Ausrichtung der Grafik
                                         top     oben
                                         middle  mitte
                                         bottom  unten
                        alt   = "...."   Alternativer Text, gedacht für nicht
                                         grafikfähige Browser
                        ismap            definiert image map
                        Beispiel:
                        <img src="Moiree.jpg" alt="Bildnis des Huber-Toni">

   <a>         </a>     Anchor, Anker. Einfügen eines Links (Verweis)
                        Mit den Pflicht-Attributen:
                        href="....."   URL-Name oder Name des Ankers
                        name="....."   Symbolischer Name für Anker (1 Wort)

   ...

   Darstellung von Sonderzeichen mit Entities.
   Ein Entity beginnt mit dem kaufmännischen
   UND "&" und endet mit dem Semikolon ";"
   ===========================================
   Reservierte HTML-Zeichen
   -------------------------------------------
   <   &lt;     less then
   >   &gt;     greater then
   &   &amp;    ampersand

   Sonstige Zeichen (Auswahl)
   --------------------------------------------------------------------------
   Ä   &Auml;   A-Umlaut
   Ö   &Ouml;   O-Umlaut
   Ü   &Uuml;   U-Umlaut
   ä   &auml;   a-Umlaut
   ö   &ouml;   o-Umlaut
   ü   &uuml;   u-Umlaut        Beispiel "München":     München
   ß   &szlig;  sz ligature     Beispiel "Lothstraße":  Lothstraße
       &nbsp;   none-breaking space = geschützter Leerschritt = &#160;
       &#xxx;   Beliebiges Zeichen mit dez-Code xxx (xxx = 0 .. 255 .. 65535) nach Unicode.
                Die Zeichen 0 .. 255 sind identisch mit ISO 8859-1 (Latin 1, Ansi),
                wobei wiederum die Zeichen 0 .. 127 identisch sind mit ISO 968 (Ascii).
   ±   &#177;   plus or minus
   ©   &#169;   Copyright
   ®   &#174;   Registered Trademark
   €   &#8364;  Euro-Symbol, Zeichen 8364 im Unicode
   €   &euro;   Euro-Symbol

   ---------------------------
   Ā            Zeichen    256
   ā            Zeichen    257
   Ă            Zeichen    258
   Ĭ            Zeichen    300
   „            Zeichen   8222, typografisches Anführungszeichen unten
   “            Zeichen   8220, typografisches Anführungszeichen oben
   ₫            Zeichen   8363, nicht belegt
   €            Zeichen   8364, Euro-Symbol
   ₭            Zeichen   8365, nicht belegt
   ---------------------------------------------------------------
   Das griechische Alphabet liegt im Unicode-Bereich von h0370 bis h03FF (dez 880 bis 1023).

   Der Codebereich enthält ausser den hier dargestellten Basis-Zeichen noch weitere. 

   Einige Positionen sind nicht belegt.

   α            Zeichen 945, griechisch Klein-Alpha
   β            Zeichen 946, griechisch Klein-Beta
   γ            Zeichen 947, griechisch Klein-Gamma
   δ            Zeichen 948, griechisch Klein-Delta
   ε            Zeichen 949, griechisch Klein-Epsilon
   ζ            Zeichen 950, griechisch Klein-Zeta
   η            Zeichen 951, griechisch Klein-Eta
   θ            Zeichen 952, griechisch Klein-Theta
   ι            Zeichen 953, griechisch Klein-Iota
   κ            Zeichen 954, griechisch Klein-Kappa
   λ            Zeichen 955, griechisch Klein-Lamda
   μ            Zeichen 956, griechisch Klein-Mu
   ν            Zeichen 957, griechisch Klein-Nu
   ξ            Zeichen 958, griechisch Klein-Xi
   ο            Zeichen 959, griechisch Klein-Omicron
   π            Zeichen 960, griechisch Klein-Pi
   ρ            Zeichen 961, griechisch Klein-Rho
   ς            Zeichen 962, griechisch Klein-Sigma (final sigma)
   σ            Zeichen 963, griechisch Klein-Sigma
   τ            Zeichen 964, griechisch Klein-Tau
   υ            Zeichen 965, griechisch Klein-Upsilon
   φ            Zeichen 966, griechisch Klein-Phi
   χ            Zeichen 967, griechisch Klein-Chi
   ψ            Zeichen 968, griechisch Klein-Psi
   ω            Zeichen 969, griechisch Klein-Omega
   --------------------------------------------------------
   Α            Zeichen 913, griechisch Groß-Alpha
   Β            Zeichen 914, griechisch Groß-Beta
   Γ            Zeichen 915, griechisch Groß-Gamma
   Δ            Zeichen 916, griechisch Groß-Delta
   Ε            Zeichen 917, griechisch Groß-Epsilon
   Ζ            Zeichen 918, griechisch Groß-Zeta
   Η            Zeichen 919, griechisch Groß-Eta
   Θ            Zeichen 920, griechisch Groß-Theta
   Ι            Zeichen 921, griechisch Groß-Iota
   Κ            Zeichen 922, griechisch Groß-Kappa
   Λ            Zeichen 923, griechisch Groß-Lamda
   Μ            Zeichen 924, griechisch Groß-Mu
   Ν            Zeichen 925, griechisch Groß-Nu
   Ξ            Zeichen 926, griechisch Groß-Xi
   Ο            Zeichen 927, griechisch Groß-Omicron
   Π            Zeichen 928, griechisch Groß-Pi
   Ρ            Zeichen 929, griechisch Groß-Rho
   ΢            Zeichen 930, nicht belegt
   Σ            Zeichen 931, griechisch Groß-Sigma
   Τ            Zeichen 932, griechisch Groß-Tau
   Υ            Zeichen 933, griechisch Groß-Upsilon
   Φ            Zeichen 934, griechisch Groß-Phi
   Χ            Zeichen 935, griechisch Groß-Chi
   Ψ            Zeichen 936, griechisch Groß-Psi
   Ω            Zeichen 937, griechisch Groß-Omega

Zum Erstellen von HTML-Dokumenten

Im einfachsten Fall Quelltext mit beliebigem Texteditor erstellen und mit Extension ».HTM« oder ».HTML« abspeichern.

Es existieren im Shareware- und Freeware-Bereich viele HTML-Editoren, die über die Texterstellung hinaus viele mehr oder weniger nützliche Hilfsmittel anbieten. Im Kap. "Literatur und Internet-Adressen ..." wird ein Download-Link auf den im Freeware-Bereich empfehlenswerten Editor "Ulli Meybohm's HTML Editor PHASE 5" angeboten.

Professionelle Editoren mit WYSIWYG-Darstellung (what you see is what you get) sind z.B. "FrontPage" von Microsoft oder "GoLive" von Adobe.

Den HTML-Code kann man auch mit dem Browser betrachten und editieren; beim Netscape Navigator mit "Ansicht/Seitenquelltext", beim Internet Explorer mit "Ansicht/Quelltext".

In WinWord kann man z.B. Dokumente mit "Datei/HTML speichern..." in HTML-Dokumente konvertieren.

Zum Start:

Im Windows-Explorer die HTML-Datei mit Doppelklick anwählen, es wird dann der Browser mit dieser Datei gestartet.

Zurück zur Startseite