Suche in meinem Heimatblatt Mein Heimatblatt Hochschulrechenzentrum Universität [E-Mail an Günter Partosch]
Schein Template Aufgabe Lösung Vorgehen mit Phase 5 HTML-Kurs Kurse, allgemein

Hinweise (Blatt 1)

Einfache Arbeiten mit HTML-Dokumenten

Inhalt:

Einfaches HTML-Dokument

<html>
<head>
<title>Titel</title>
</head>
<body>
<h1>Überschrift</h1>

Text des Dokuments
</body>
</html>

Und das macht Ihr Browser daraus: Beispiel a

Regeln

  1. HTML-Dokumente sind Textdateien mit eingestreuten HTML-Befehlen:
  2. Diese HTML-Befehle sagen i.a. dem Browser, welche Bedeutung der jeweilige Textteil hat, wie er zu interpretieren oder darzustellen ist.
  3. HTML-Befehle gibt es in zwei Ausprägungen:
  4. Durch Attribute kann ein HTML-Element genauer spezifiziert werden, so z.B. ol durch das Attribut start wie in
    <ol start="10">...</ol>.
  5. Syntax und Bedeutung der HTML-Elemente (sowie der Attribute) werden in den entsprechenden HTML-Normen (HTML 2.0, HTML 3.2, HTML 4, HTML 4.01 und XHTML 1.0) beschrieben.
  6. Die zugehörigen DTDs (document type definitions) geben Auskunft, an welcher Stelle welche HTML-Elemente zu welchem Zweck verwendet und wie sie ggf. ineinander verschachtelt werden dürfen. Zusätzlich legen sie auch jeweils fest, welche Attribute mit welchen Werten erlaubt sind.
  7. In meinem aktuellen HTML-Kurs verwende ich HTML 4.01 (http://www.w3.org/TR/html401/).
  8. Die DTD für HTML 4.01 gibt es in den folgenden Ausprägungen: Mehr zu diesem Themenbereich finden Sie bei Stefan Münz: [html/allgemein/grundgeruest.htm#dokumenttyp]
  9. Die DTD, die einem HTML-Dokument zugrunde liegt, kann in einer DOCTYPE-Anweisung ganz am Anfang der entsprechenden HTML-Datei festgelegt werden (siehe Abschnitt "Einfaches HTML-Dokument, erweitert um die Anmerkungen 1-3").
  10. Für die Darstellung der HTML-Sonderzeichen <, > und & (wenn Sie also diese Zeichen als "normale" Texte ausgeben wollen) werden spezielle Entity-Darstellungen benötigt: &lt;, &gt; und &amp;. Siehe dazu Stefan Münz; [html/allgemein/zeichen.htm#html_eigene]
  11. Auch für die anderen Sonderzeichen, beispielsweise für die Umlaute und akzentuierten Zeichen, gibt es Entity-Darstellungen:
    &auml; bzw. &Auml; für "ä" und "Ä"
    &ouml; bzw. &Ouml; für "ö" und "Ö"
    &uuml; bzw. &Uuml; für "ü" und "Ü"
    &szlig; für "ß" (Eszet)
    &aacute;, &egrave; für "á", "è" usw.
    Siehe dazu auch Stefan Münz
    "HTML-Zeichenreferenz" [html/referenz/zeichen.htm] und
    "Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen" [html/allgemein/zeichen.htm].
  12. Wird der Zeichensatz des Dokuments geeignet in einer meta-Anweisung (s.u.) im Dokumentkopf bekannt gemacht und kann der jeweilige Browser den Zeichensatz darstellen, so kann für alle westeuropäischen Zeichen auf die Entity-Darstellung verzichtet werden. Das gilt insbesondere für den Zeichensatz ISO 8859-1 und den Browsern unter den Windows- und UNIX-Betriebssystemen.
  13. Mit geeigneten Programmen (z.B. http://validator.w3.org/check/referer) kann die syntaktische Korrektheit eines HTML-Dokuments überprüft werden.

Einfaches HTML-Dokument, erweitert um die Anmerkungen 1-3

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

<!-- Sprache des Dokuments: -->
<HTML lang="de">

<head>
<title>Titel</title>

<!-- Zeichensatz des Dokuments: -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

<body>
<h1>Überschrift</h1>

Text des Dokuments
</body>
</html>

Und das macht Ihr Browser daraus: Beispiel b

Strukturierungsmöglichkeiten

Leerzeichen und Leerzeilen können in HTML normalerweise nicht benutzt werden, um ein Dokument zu strukturieren:

Um ein HTML-Dokument zu strukturieren, stehen Ihnen beispielsweise die folgenden einfachen Möglichkeiten zur Verfügung:

  1. Überschriften: die HTML-Elemente h1 -- h6
    (siehe dazu Stefan Münz [html/text/ueberschriften.htm])
  2. Absätze: p (siehe Stefan Münz [html/text/absaetze.htm])
  3. Zeilenwechsel: br (siehe Stefan Münz [html/text/zeilenumbruch.htm])
  4. Querstriche: hr (siehe Stefan Münz [html/text/trennlinien.htm])
  5. Listen/Aufzählungen; siehe dazu "Verschiedene Listen"

Um einen Zeilenumbruch an einer bestimmten Stelle zu verbieten ("geschütztes Leerzeichen") kann das Entity &nbsp; verwendet werden.

Logische Textauszeichnungen

Physische Textauszeichnungen

Verschiedene Listen

Weitere Hinweise zu Textauszeichnungen und Listen

Konventionen in diesem Kurs

HTML (HTML 2.0, HTML 3.2, HTML 4, HTML 4.01) lässt -- was die Schreibweise der Markup-Anweisungen betrifft -- dem Dokumentautor relativ viele Freiheiten:

  1. Die Namen der Elemente dürfen beliebig groß oder klein geschrieben werden, so z.B. ist code gleichwertig zu Code oder CODE.
  2. Die Namen der Attribute dürfen beliebig groß oder klein geschrieben werden, so z.B. ist type gleichwertig zu Type oder TYPE (bei nummerierten Listen oder Aufzählungslisten).
  3. Werte, die einem Attribut zugewiesen werden, müssen nur in Ausnahmefällen in Anführungszeichen gesetzt werden, so z.B. ist start=1 gleichwertig zu start="1".
  4. Für einige Attribute/Attributwerte gibt es verkürzte Schreibweisen, so z.B. compact statt compact="compact" (bei den verschiedenen Listen).
  5. Bei manchen nicht-leeren Elementen kann das Ende-Tag weggelassen werden (wenn das die zugehörige DTD zulässt und der Kontext eindeutig ist), so z.B. das Ende-Tag </li> bei <li> oder </p> bei <p>.

Dazu kommt, dass viele Browser Verstöße gegen die HTML-Normen einfach "tolerieren" (und versuchen, das "Beste" daraus zu machen), so z.B.:

  1. fehlendes Ende-Tag bei nicht-leeren Elementen (selbst dann, wenn das die zugehörige DTD fordert),
  2. unzulässige Element- und Attribut-Namen (sie werden einfach ignoriert) und
  3. nicht-korrekte Schachtelung nicht-leerer HTML-Elemente (so z.B. in <b>nur fett <i>jetzt auch kursiv</b> xyz</i>). Und das macht Ihr Browser daraus: Beispiel f.

Aus verschiedenen Gründen (insbesondere auch, um einen späteren Übergang auf XHTML zu erleichtern) wird im Folgenden von mir diese potentielle "Vielfalt" eingeschränkt:

  1. Die Namen der Elemente werden eindeutig nur noch klein geschrieben.
  2. Die Namen der Attribute werden eindeutig nur noch klein geschrieben.
  3. Werte, die einem Attribut zugewiesen werden, werden in Anführungszeichen gesetzt.
  4. Für alle Attribute/Attributwerte werden die verkürzten Schreibweisen nicht benutzt, so z.B. grundsätzlich compact="compact" und nicht einfach compact.
  5. Bei allen nicht-leeren Elementen wird das Ende-Tag nicht weggelassen (auch wenn das die zugehörige DTD zulässt und der Kontext eindeutig ist).

und

  1. Bei allen nicht-leeren Elementen wird das zugehörige Ende-Tag geschrieben.
  2. Es werden nur noch zulässige Elemente und Attribute verwendet.
  3. Nicht-leere Elemente werden nur noch korrekt ineinander geschachtelt (so z.B. für das obige Beispiel <b>nur fett <i>jetzt auch kursiv</i>xyz</b>).

Praktisches Vorgehen mit Phase5

Siehe dazu

Praktisches Vorgehen mit HoTMetaL

noch nicht realisiert

[Hinweise 0] [Hinweise 2] [aktuelle Aufgabe]


Gültiges HTML 4.01 Gültiges CSS

$Revision: 1.18 $ ($Date: 2004/10/17 14:23:15 $) by $Author: g029 $