home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Dieser kurze Exkurs erhebt nicht denAnspruch, HTML umfassend zu erklären und einzuführen. Er ist nur der Vollständigkeit halber und als Wiederholung hier eingefügt. Eine hervorragende Quelle zum Thema HTML bietet die Seite SelfHTML von Stefan Münz.

HTML - Einführung

HTML steht für HyperText Markup Language. Es ist wie XML eine Auszeichnungsprache, muss jedoch nicht immer den Regeln der Wohlgeformtheit gehorchen. Beispielsweise bedeutet < br > einen Zeilenumbruch. Dieses Element braucht aber nicht mit schließendem Tag versehen zu werden. XHTML hingegen verlangt die Wohlgeformtheit. Das Tag müsste somit
lauten.

Ein HTML Dokument hat folgende Struktur

 

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

 

Im Head können Metainformationen wie Schlüsselwörter oder der Titel der Seite stehen. Der Body enthält die eigentliche Information, die von einem Browser angezeigt werden soll.

Struktur und Formatierung

HTML kann sowohl strukturelle Informationen als auch Formatierungsanweisungen enthalten. Zur Formatierung zählen unter anderem

     

  • Größe und Position von Elementen
  • Schriftarten und -farben
  • Ausrichtung von Textelementen
  • Hintergrundfarben und -bilder
  • Farbe, Stärke und Art von Rahmen

Leider findet die Trennung zwischen Struktur- und Formatierungsinformation oft nicht statt, was sich beispielsweise niederschlägt in

     

  • Tabellen, die zur Positionierung von Elementen genutzt werden
  • Leerbilder zur Positionierung
  • Anweisungen zur Schriftformatierung (<font color=".."> oder <font size="..">) im HTML Text

Die Missachtung dieser Trennung hat jedoch gewaltige Nachteile

     

  • Der HTML Quellcode ist sehr schlecht lesbar und wartbar
  • Es gibt keine Möglichkeit, zentral Formatierungsanweisungen zu ändern
  • Für Menschen mit Sehbehinderungen sind die Seiten nicht auswertbar, weil die Screenreader den Code nicht interpretieren können (Stichwort "barrierefreies Web")

Die Empfehlung lautet:

     

  • Der HTML Quellcode enthält die strukturelle Information
  • Formatierungsanweisungen werden in Stylesheets (CSS) ausgelagert

HTML Tags zur Strukturierung

Wichtige Tags zur Strukturierung sind

     

  • Hierarchische Gliederung von Texten

    <h1>Hauptüberschrift</h1>
    <h2>Zweite Überschrift</h2>

    usw.

  • Unnummerierte Aufzählungen

    <ul>
      <li>BIT</li>
      <li>WI</li>
    </ul>

  • nummerierte Aufzählungen

    <ol>
      <li>BIT</li>
      <li>WI</li>
    </ol>

  • Tabellen, um tabellarische Information darzustellen

    <table>
      <tr> 
        <th>Semester\Anzahl Studenten</th><th>BIT</th><th>WI</th>
      </tr>   
      <tr>
        <td>1</td><td>7</td><td>38</td>
      </tr>   
      <tr>
        <td>5</td><td>0</td><td>33</td>
      </tr>
    </table>

  • Absätze

    <p>Das ist ein sehr langer Absatz, der erst mit dem
    schließenden Tag endet</p>

  • Auszeichnung von Textes (ist <b>, <i> und <u> vorzuziehen)
    Betonung

    <p>Das nächste Wort <em>ist</em> betont</p>

    Starke Betonung

    <p>Das nächste Wort <strong>ist</strong> stark betont</p>

    Quellcode

    <p>Das nächste Wort <code>ist</code> Quellcode</p>

    Zitat

    <p>Das nächste Wort <cite>ist</cite> ein Zitat</p>

Und so würde der obige HTML-Code im Browser aussehen. Wir werden später aufzeigen, wie dieses Dokument formatiert aussehen kann.

HTML Tags für Formulare

Ein Formular hat einen Aufbau ähnlich diesem Beispiel:

 

<form action="anURL" method="get">
   ...
   <input type="submit" value="abschicken"/>
   <input type="reset" value="zurücksetzen"/>
</form>

 

Dabei steht "..." für den Bereich, in dem die Formularelemente positioniert werden. Man unterscheidet folgende Elemente:

     

  • Texteingabefelder

    <input name="vorname" type="text" size="30"/>

  • Passwortfelder

    <input name="pw" type="password" size="30"/>

  • Texteingabefelder (mehrzeilig)

    <textarea name="kommentar" cols="30" rows=25"></textarea>

  • Radiobutton (gruppiert Optionen über "name")

    <input name="studium" type="radio" value="WI"/>Wirtschafsinformatik<br/>
    <input name="studium" type="radio" value="TI"/>Technische Informatik

  • Checkboxen

    <input name="zubehoer" type="checkbox" value="CD"/>CD Laufwerk<br/>
    <input name="zubehoer" type="checkbox" value="TFT"/>Monitor

  • Auswahllisten

    <select name="LVP">
       <option value="1">1. Semester</option>
       <option value="2">2. Semester</option>
       <option value="3">3. Semester</option>
    </select>

Und so sieht das Formular aus, wenn man die gezeigten Formularelemente in obiges Formular einträgt.

Weitere HTML Tags

Weiter wichtige Tags sind

     

  • Links

    <a href=http://www.fh-konstanz.de>Homepage FH Konstanz</a>
    <a href=http://www.johner.org target="_blank">Johner</a>

  • Grafiken

    <img src=./images/logo.gif alt="Logo FH KN>

Vorbereitung für CSS

Blockelemente erzeugen im Textfluss einen Absatz. Zu Ihnen zählen div, h1-h6, form, p, pre, ol, ul und table.

Blockelemente können weiter Blockelemente oder Inlineelemente beinhalten. Besonders das div-Tag ist dazu prädestiniert, mit CSS formatiert zu werden, beispielsweise

     

  • Ausrichtung
  • Position
  • Text- und Hintergrundfarbe
  • Schriftart

Inlineelemente wie b, em, span oder textarea erzeugen keinen eigenen Absatz. Das Pendent zu div zur Formatierung mit CSS ist das span-Tag.