http://www.usf.uni-osnabrueck.de/infoservice/html/tags.de.html
  
InstitutStudium
Personen
Projekte

Suchen
Infoservice
| HTML
  | Einleitung
  | Gerüst
  | HTML2.0«
  | Zeichen
  | Regeln
  | Styleguide
  | Homepage
  | Seiten
  | CGI
  | GIF Mail
  | Makros
  | html2rxml
  | Roxen
  | Rundmail
  | Links

Alle HTML2.0-Tags im Überblick

  1. Grundregeln
  2. Seitenlayout
  3. Sonderzeichen und Umlaute
  4. Überschriften
  5. Schriftauszeichnungen
  6. Listen
  7. URLs im Internet
  8. Links und Anker
  9. Grafik

  1. Grundregeln

    • Jeder Befehl steht in spitzen Klammern: <befehl>
    • Jeder Befehl wird durch Vorranstellen des Schrägstrichs wieder aufgehoben: </befehl>
    • Mit den Befehlen <html>, <head>, <title> und <body> wird das Grundgerüst einer HTML-Seite erstellt.

  2. Seitenlayout

    • <br> (break) erzwungener Zeilenumbruch
      Normalerweise wird ein Text am Zeilenende automatisch umgebrochen. Mehrere aufeinanderfolgende Leerzeichen und im Editor eingegebene Zeilenumbrüche werden vom Browser ignoriert.
    • <p> (paragraph) Absatz
    • <hr> (horizontal rule) waagerechte Trennlinie

      <br>, <p> und <hr> müssen nicht durch '/' beendet werden.

    • <pre> (preformated) formatierter HTML-Text wird inklusive Leerzeichen und Zeilenumbrüchen; ausgegeben. So können z.B. Tabellen bereits in HTML 2.0 erzeugt werden.
    • <xmp> (example) ähnlich zu <pre>, jedoch werden HTML-Tags und Sonderzeichen nicht interpretiert.

  3. Sonderzeichen und Umlaute

    4. Hier eine Liste der wichtigsten Zeichen: 
       < = &lt;            > = &gt;
   & = &amp;           " = &quot;

   ä = &auml;          Ä = &Auml;
   ö = &ouml;          Ö = &Ouml;
   ü = &uuml;          Ü = &Uuml;

   ß = &szlig;
    Das Wort 'größer' wird z.B. so eingegeben: 'gr&ouml;&szlig;er'.

    Sonderzeichen, für die es kein eigenes HTML-Tag gibt, können mit &#xyz; mit xyz als dreistelligem Zeichencode nach ISO-Latin-1 dargestellt werden.

    Im allgemeinen können ISO-Latin1-Sonderzeichen wie gewohnt eingegeben werden, da sie meist korrekt übertragen werden. Allerdings besteht die Gefahr, daß die 8-Bit-Kodierung dieser Zeichen von einigen Rechnern auf 7-Bit-ASCII gekappt wird.

  4. Überschriften

    5. HTML ermöglicht Überschriften in sechs verschiedenen Größen. Die Hauptüberschrift, meist zugleich als Titel des Dokuments verwendet, wird von <h1> ... </h1> umfaßt.
    Weitere Hierarchien der Gliederung werden mit <h2> bis <h6> eingeleitet.

  5. Schriftauszeichnungen

    6. Logische Schriftauszeichnungen

    Gemäß der Philosophie von HTML aus Beschreibungssprache legen die meisten Schriftauszeichnungen die logische Bedeutung der Wörter und Zeichen fest, die dann bei der Darstellung des Textes - entsprechend den Möglichkeiten des Browsers - ausgeführt werden.

    • <em>...</em> (emphasis)
      Der Text zwischen Start- und End-Tag soll betont erscheinen.
      Die Darstellung ist in der Regel kursiv.

    • <strong>...</strong> (strong emphasis)
      Den Text wird typographisch stärker betont als durch <em>.
      Dies geschieht meist durch halbfette Schrift.

    • <cite>...</cite>
      Eine Literaturangabe kann man in ein cite-Element einschließen.
      Die von HTML vorgeschlagene Darstellung ist kursiv.

    • <code>...</code>
      Kennzeichnet ein Quellcodebeispiel.
      Üblicherweise durch eine nichtproportionale Schrift.

    • <kbd>...</kbd> (keyboard)
      Text, der vom Benutzer einzugeben ist.
      Typische Darstellung: nichtproportional.

    • <samp>...</samp>
      Stellt Zeichenfolgen dar.
      Typische Darstellung: nichtproportional.

    • <var>...</var> (variable)
      Verwendung als Platzhalter für Variablennamen.
      Typische Darstellung: kursiv.

    • <address>...</address>
      Für Adressinformationen aller Art, meist am Anfang oder Ende eines Dokumentes innerhalb von <body> </body>.
      Typische Darstellung:
      eingerückt und kursiv
      .

    Typographische Schriftauszeichnungen

    Im Gegensatz zur logischen Schriftauszeichnung legen die folgenden Schriftauszeichnungen unmittelbar die typographische Darstellung des Textes fest. Im allgemeinen sollte die logische Schriftauszeichnung bevorzugt werden.

    • <b>...</b> (bold)
      halbfette Schrift

    • <i>...</i> (italic)
      kursive Schrift

    • <tt>...</tt> (teletype)
      Schreibmaschinenschrift, nichtproportional

  6. Listen

    7. Es werden drei Typen von Listen unterschieden:

    1. <ul>...</ul> (nicht-nummerierte Liste)
      Jedem Listeneintrag muß <li> (list item) vorangestellt werden.

    2. <ol>...</ol> (nummerierte Liste)
      Jedem Listeneintrag muß <li> (list item) vorangestellt werden.

    3. <dl>...</dl> (Definitionsliste)
      Hier ist der Listeneintrag zweigeteilt:
      <dt> (description title) leitet einen zu definierenden Begriff ein.
      <dd> (description data) liefert die dazugehörige Definition.

    Listen können unabhängig vom Typ auch verschachtelt werden.

    Beispiel für eine Definitionsliste:

    HTML-Code:

    <dl> <dt>Begriff 1 <dd>Hier folgt die Erkl&auml;rung zu Begriff 1 <dt>Begriff 2a <dt>Begriff 2b <dd>Hier folgt die Erkl&auml;rung zu den gleichbedeutenden Begriffen 2a und 2b </dl> Darstellung durch den Browser:

    Begriff 1
    Hier folgt die Erklärung zu Begriff 1
    Begriff 2a
    Begriff 2b
    Hier folgt die Erklärung zu den gleichbedeutenden Begriffen 2a und 2b

  7. URLs im Internet

    8. URL (Uniform Resource Locator) sind Adressen von Ressourcen (Dateien, Dokumente, Dienste) im Internet.

    Eine URL hat folgende Syntax:

    Protokoll://User:Passwort@Rechneradresse:Port/Pfad/Datei[#Ankername]

    Die URL beginnt mit dem Protokoll:

    http (hypertext transfer protocol)
    Zugriff auf Dokumente auf einem WWW-Server
    ftp (file transfer protocol)
    Zugriff auf Datei auf einem Rechner per FTP
    file
    Zugriff auf Datei auf dem eigenen, lokalen Rechner
    wais (wide area information system)
    Zugriff auf einen WAIS-Server
    gopher
    Zugriff auf einen Gopher-Server
    telnet
    Zugriff auf einen Telnet-basierten Dienst im Internet

    Zwei weitere Typen von URLs folgen einer anderen Syntax:

    news:newsgroup
    Zugriff auf eine Newsgroup, z.B. news:comp.infosystems.www.authoring.html
    mailto:Email-Adresse
    Versenden einer elektronischen Nachricht, z.B. mailto:president@whitehouse.gov

    Nach dem '://' folgt die Rechneradresse, die entfallen kann, wenn der lokale Rechner angesprochen werden soll (z.B. file:///etc/passwd)

    Die Angabe des Port kann entfallen, wenn der Standardport für einen Dienst benutzt wird.

    Der Pfad/Datei ist der Pfad eines Verzeichnisses oder einer Datei dem angewählten Rechner. Wird kein Pfad angegeben, gelangt man i.a. auf eine Home- oder Eingangs-Seite eines Servers.

    Endet die URL nicht mit einem Dateinamen, z. B. http://www.usf.uni-osnabrueck.de/people/, muß die Angabe mit einem '/' abgeschlossen werden.

    Normalerweise entfällt die Angabe user:password@, deshalb soll hier nicht weiter darauf eingegangen werden. Genaueres hierzu kann in der RFC1738 (URLs) (externer Server) (als Datei speichern) nachgelesen werden.

    Eine Beschreibung der Anker findet sich im nächsten Abschnitt.

  8. Links und Anker

    9. Links

    Mit dem Befehl <a href="URL">Bezeichner</a> wird im Dokument ein Link zu einer URL eingefügt. Im Browser erscheint nur der Bezeichner, der meist durch Unterstreichung und/oder eine andere Farbe hervorgehoben wird.

    Aktiviert der Benutzer (normalerweise) mit der Maus den Link, so versucht der Browser die Datei, auf die die URL verweist, anzuzeigen oder gibt diese an ein Programm weiter, das für das entsprechende Dateiformat (z.B. Musikdateien) zuständig ist.

    Die URL kann für Dateien im Dateisystem des aktuellen Dokuments auf den Pfad beschränkt werden. Die Datei test.html im Elternverzeichnis des aktuellen Dokuments hat z.B. die vereinfachte URL '../test.html'.

    Anker

    Mit dem Befehl <a name="Ankername">Text</a> wird an der aktuellen Position im Dokument ein Textanker gesetzt. Der Text wird an dieser Stelle völlig normal dargestellt und sollte möglichst nicht weggelassen werden.

    '#Ankername' ist die vereinfachte URL dieses Ankers im aktuellen Dokument und wenn der Benutzer über einen Link einen Textanker anwählt, dann springt der Browser im Dokument bis zur Position des Textankers.

  9. Grafik

    10. Grafikformate

    Im WWW werden überwiegend die Grafikformate GIF und JPEG benutzt. Das neue PNG ist noch nicht so gebräuchlich, sollte aber als Alternative zu GIF in Betracht gezogen werden.

    GIF (Graphics Interchange Format - *.gif)
    • Verwendung: Abbildungen mit wenigen Farben und starken Kontrasten (z.B. Diagramme) oder sehr kleine Grafiken (z.B. Icons).
    • Vorteile: Verlustfreie Komprimierung. Transparenter Hintergrund und Interlace möglich.
    • Nachteile: Begrenzt auf 256 Farben (8-Bit Farbtiefe). Lizensierung der Grafikroutinen bei UniSys notwendig.

    JPEG (Joint Photographic Experts Group - *.jpeg bzw. *.jpg)
    • Verwendung: Photorealistische Bilder und andere Grafiken mit Farbverläufen.
    • Vorteile: Echtfarbfähig (24-Bit Farbtiefe). Hohe Kompressionsrate bei Photos u.ä.
    • Nachteile: Qualitätsverluste durch Kompression, die aber dem menschlichen Auge kaum auffallen. Transparenz und Interlace nicht möglich.
    Eine Weiterentwicklung, das progressive JPEG, besitzt eine dem Interlace äquivalente Funktion. Dieses Format ist jedoch noch nicht sehr verbreitet und kann deshalb von vielen Browsern nicht dargestellt werden.

    PNG (Portable Network Graphics - *.png)
    Das PNG-Format (gesprochen: ping) besitzt alle Fähigkeiten des GIF (und einige mehr!). Hier treten keine Lizenzprobleme auf, da es frei verfügbar ist. Allerdings beginnt sich dieses Format erst im WWW durchzusetzen.
    Es empfiehlt sich, weitere Informationen zum PNG-Format (externer Server) abzurufen.

    Grafik einfügen und ausrichten

    Mit dem Befehl <img src="URL" alt="Alternativtext"> wird im Dokument eine Grafik eingefügt. Die anzuzeigende Grafikdatei befindet sich dabei an der durch die URL bezeichneten Stelle.
    Falls der verwendete Browser keine Grafiken darstellen kann oder das Anzeigen der Grafiken ausgeschaltet wurde, wird stattdessen der Alternativtext angezeigt. Dieser Text ist zwar nicht erforderlich, sollte aber angegeben werden, um auch ohne Grafik die vollständige Information zu liefern.

    Mit dem Befehl <img src="URL" alt="Alternativtext" align="Ausrichtung"> kann die Ausrichtung der Grafik bezüglich einer Textzeile festgelegt werden.

    Als Parameter für die Ausrichtung sind zugelassen:

    align="TOP"
    Die obere Kante der Grafik wird an dem höchsten Element der aktuellen Zeile ausgerichtet.
    align="MIDDLE"
    Die Mitte der Grafik wird an der Mitte der aktuellen Zeile ausgerichtet.
    align="BOTTOM"
    Die untere Kante der Grafik wird an der Unterkante der aktuellen Zeile ausgerichtet.

    Auf den Parameter ismap soll hier nicht weiter eingegangen werden, da hierfür Spezialsoftware und erweiterte Zugangsrechte zum WWW-Server nötig sind. Er dient dazu die Koordinaten im Bild, auf die der Benutzer geklickt hat, an den Server zu übermitteln. Dort werden diese ausgewertet und können verschiedene Aktionen bewirken.

    Grafik als Link

    Mit der Befehlskombination <a href="Ziel-URL"><img src="Grafik-URL" alt="Alternativtext"></a> kann eine Grafik als Link zu einer Ziel-URL benutzt werden. Hier ist ein Alternativtext besonders wichtig, da sonst der Link nicht angeklickt werden kann.

«Erstellung von HTML-Seiten
Internes | Infoservice letzte Änderung: Oktober 1999
E-Mail: infoadm@usf.Uni-Osnabrueck.DE

[ HTML-Styleguide ] [ Grundgerüst einer HTML-Seite ]