Mini-Tutorial HTML / XHTML

© Silvia Rothen, rothen ecotronics, Bern, Schweiz

Autorin: Dr. Silvia Rothen, rothen ecotronics, Bern, Schweiz
Letzte Überarbeitung: 13.05.18

Auch wenn sich mit WYSIWYG-Tools wunderbare Webseiten erstellen lassen, sind Grundkenntnisse in HTML trotzdem nicht überflüssig. Zum einen, weil das z.T. seltsame Verhalten gewisser Tags verständlicher wird, wenn man die Struktur dahinter kennt. Zum anderen, weil es gerade in der serverseitigen Programmierung (JSP/ASP oder andere Skriptsprachen) praktisch ist, wenn man gewisse HTML-Statements einfach eintippen kann, statt noch ein WYSIWYG-Tool aufzustarten.

Inhaltsverzeichnis

Einleitung

Grundlage jeder Web-Applikation sind nach wie vor HTML-Seiten (es sei denn, HTML werde nur als Transportmedium für Technologien wie ActiveX oder Java-Applets verwendet). Um dynamische Web-Seiten mit serverseitigen Skriptsprachen zu erstellen, kommt man deshalb um zumindest rudimentäre HTML-Kenntnisse nicht herum. Die folgende Einführung konzentriert sich auf jene HTML-Tags, deren Kenntnis für serverseitiges Scripting unbedingt notwendig sind:

Alles weitere überlassen Sie besser den Web-Designer/innen und ihren WYSIWYG-Tools.

Zurück zum Inhaltsverzeichnis

HTML-Tags

HTML ist nicht eine Programmier- sondern eine Auszeichnungssprache. Das heisst, sie besteht aus Informationen (Text, Bilder etc) und speziellen Elementen für die Auszeichnung (Formatierung). Damit ist HTML verwandt mit den ersten Textverarbeitungsprogrammen, die noch ohne WYSIWYG-Editoren auskamen und wo die Formatierungen im Text ersichtlich waren.
In HTML nennt man die Auszeichnungselemente HTML-Tags. Sie beginnen und enden mit spitzen Klammern. Normalerweise treten HTML-Tags in Paaren auf, d.h. ein Eröffnungstag vor dem auszuzeichnenden Text und ein Schlusstag hinter dem Text.

Beispiel Tag-Paar
<b>Fett formatierter Text</b>

Daneben gibt es eine Handvoll Tags, die auch einzeln auftreten. Deren XHTML-konforme Syntax findet sich im nächsten Abschnitt. Beispiele dafür sind neben dem Zeilenumbruch <br> die Metatags <meta ....>, sowie gewisse Formularfelder <input ..>.
Viele HTML-Tags weisen neben dem eigentlichen Bezeichner noch Attribute auf, in denen zusätzliche Informationen wie z.B. der Name, der Typus und die Länge eines Formularfeldes gespeichert sind. Die Attribute haben die Form attributname="Wert". Die Reihenfolge der Attribute innerhalb des Tags ist beliebig.

Beispiel Tag mit Attributen
<input name="fldadresse" type="text" size="20">

Zurück zum Inhaltsverzeichnis

XHTML-Regeln

XHTML ist keine neue HTML-Sprachversion, sondern die Anpassung der aktuell gültigen Version von HTML an ein paar wenige Regeln, damit die Web-Seiten XML-konform sind. Damit lassen sich zusätzliche Tools wie XML-Parser auf Web-Seiten anwenden.
Es handelt sich um die folgenden Regeln:

1. Tags werden klein geschrieben

frühere Versionen XHTML
<BODY> oder <Body> oder <body> <body>

2. Tags müssen immer paarweise auftreten oder geschlossen werden

frühere Versionen XHTML
<br> <br></br> oder <br />

3. Tags dürfen sich nicht überlappen (diese Regel galt schon bisher, aber die meisten Browser sind robust gegenüber Fehlern)

frühere Versionen XHTML
<b>fett <i>kursiv und fett</b> kursiv</i> <b>fett <i>kursiv und fett</i></b> <i>kursiv</i>

4. Attribute müssen immer einen Wert aufweisen

frühere Versionen XHTML
<input type="checkbox" name="fld3" value="Ja" checked> <input type="checkbox" name="fld3" value="Ja" checked="" />

5. Die Werte von Attributen müssen immer in Anführungszeichen stehen, auch wenn es sich um Zahlen handelt

frühere Versionen XHTML
<input type="text" name="fld4" size=20> <input type="text" name="fld4" size="20" />

6. Kommt in einem Attribut "&" vor, dann muss stattdessen die Character Entity "&amp;" angegeben werden

frühere Versionen XHTML
<a href="p.asp?x=3&y=1">
  Info
</a>		 <a href="p.asp?x=3&amp;y=1">
  Info
</a>

Eine etwas ausführlichere Liste dieser Regeln findet sich unter:
http://www.w3.org/TR/xhtml1/#guidelines 

Zurück zum Inhaltsverzeichnis

Grundstruktur einer Seite

Die Grundstruktur einer Seite enthält die folgenden drei HTML-Elemente
1. Das alles umfassende Tag-Paar <html>...</html>
2. Den Kopfbereich <head>...</head>
3. Den eigentlichen Seitenbereich <body>..</body>
Der Kopfbereich enthält als einziges sichtbares Element <title>..</title>. Damit lässt sich der im Titelbalken des Browsers sichtbare Titel einer Seite angeben. Daneben finden sich in diesem Abschnitt eventuell weitere unsichtbare Elemente, z.B. Metatags mit Zusatzinformationen für Suchmaschinen.
Zwischen den <body>-Tags steht dann der ganze Rest der Seite.
Für eine ganz einfache Seite mit Titel und etwas Text ergibt sich also folgender HTML-Code:

Beispiel Grundstruktur
<html>

  <head>
    <title>Einfache Seite</title>
  </head>

  <body>
    <p>Dies ist eine ganz einfache Seite</p>
  </body>

</html>

Zurück zum Inhaltsverzeichnis

Absätze und Umbrüche

In HTML gibt es nur zwei Arten von Umbrüchen bzw. Zeilenabständen:

Zurück zum Inhaltsverzeichnis

Einfache Formatierungen

Die wichtigsten Formatierungen eines Textes sind fett <b>..</b> und kursiv <i>..</i>.

Beispiel fett und kursiv formatierter Text
<b>fett></b> und <i>kursiv</i>

Zurück zum Inhaltsverzeichnis

Hyperlinks

Hyperlinks benötigen als Attribut die Ziel-URL.

Beispiel Hyperlink auf Startseite eines Webs (externer Link)
<a href="http://www.digicomp.ch">Digicomp</a>

Innerhalb eines Webs lassen sich stattdessen auch relative Adressen angeben, die nur Bezug auf den Verzeichnispfad relativ zur aufrufenden Seite nehmen.

Beispiel Hyperlink auf Seite im gleichen Verzeichnis (interner Link)
<a href="info.asp">Info-Seite</a>

Beispiel Hyperlink auf Seite in übergeordneten Verzeichnis (interner Link)
<a href="../info.asp">Info-Seite</a>

Als Ziel kommt nicht nur eine Web-Seite, sondern auch ein Mail in Frage.

Beispiel Hyperlink auf Mail-Adresse
<a href="mailto:x@digicomp.ch">EMail</a>

Hyperlinks auf dynamische Seiten können neben der Ziel-URL noch Parameter enthalten. Diese sind mit einem Fragezeichen von der URL getrennt, haben die Form Parametername=Wert, sind durch & (bzw. &amp; in XHTML) getrennt. Diese Parameter sind sogenannt URL-encoded, d.h. Leerschläge und Sonderzeichen werden durch bestimmte Codes ersetzt.

Beispiel Hyperlink mit 2 Parametern
<a href="http://www.x.ch/x.asp?key=3&amp;page=info">
  Info
</a>

Zurück zum Inhaltsverzeichnis

Bilder

Bilder sind einem HTML-Dokument externe Dateien, die mit dem <img..>-Tag eingebunden werden. Als Attribut braucht es deshalb zumindest die Bildquelle src mit Dateiname. Falls das Bild sich nicht im gleichen Verzeichnis befindet wie die Seite, kommt noch eine relative Pfadangabe dazu, z.B. images/bild.gif für ein Unterverzeichnis oder ../images/bild.gif, wenn sich die Verzeichnisse für die Seiten und die Bilder auf derselben Ebene befinden.
Gibt man mit width und height die Bildgrösse in Pixel an, dann wird die Seite schneller aufgebaut. Ein weiteres häufig verwendetes Attribut ist border, mit dem sich ein Rand um das Bild anzeigen lässt.

Beispiel Bild mit Ausmassen und Rand
<img border="1" src="bild.gif" width="50" height="50" />

Zurück zum Inhaltsverzeichnis

Tabellen

Tabellen werden bei Datenbankanbindungen sehr oft verwendet, um Datensätze in einer Seite anzuzeigen. Tabellen bestehen im wesentlichen aus drei Tag-Paaren:

  1. Die Tabelle als ganzes ist von <table>..</table> umschlossen. Achtung, immer schliessen, denn gewisse Browserversionen stellen Tabellen ohne Schluss-Tag gar nicht dar!
  2. Jede Tabellenzeile wird von <tr>..</tr> (table row) umschlossen
  3. Jede einzelne Zelle in einer Zeile wird mit <td>..</td> umschlossen
    Wichtige Attribute sind border für den Tabellenrand, width für die Breite der Tabelle insgesamt oder der Zellen innerhalb der Tabelle sowie colspan und rowspan zum Verschmelzen von Zellen.

Beispiel Einfache Tabelle mit einer verschmolzenen Kopfzeile sowie 2 x 2 Zellen
<table border="1" width="250">
  <tr>
    <td width="100%" colspan="2">Titel</td>
  </tr>
  <tr>
    <td width="50%">z11</td>
    <td width="50%">z21</td>
  </tr>
  <tr>
    <td width="50%">z12</td>
    <td width="50%">z22</td>
  </tr>
</table>

Zurück zum Inhaltsverzeichnis

Formulare

Eine dynamische Web-Applikation ist immer auch auf Eingaben der Benutzer/innen angewiesen. Die Kenntnis von HTML-Formularen und ihren verschiedenen Eingabefeldern ist deshalb für das serverseitige Scripting unbedingt notwendig. Ein Formular besteht aus folgenden HTML-Tags:

  1. Den umschliessenden Tags <form..> .. </form>. Ein wichtiges Attribut ist die Methode, mit der das Formular verschickt wird: method="post" verschickt die Benutzereingaben unsichtbar im Header des Requests, method="get" zeigt die Eingaben dagegen bei der aufgerufenen Seite als Parameter hinter dem URL an. Das zweite wichtige Attribut ist action="seite.asp", mit dem angegeben wird, an welche Seite die Benutzereingaben zur Weiterverarbeitung geschickt werden.
  2. Den Formularfeldern (je nach Typ <input.. />, <textarea>..<textarea> oder <select..>..</select>, siehe unten)
  3. Der Schaltfläche, mit der das Formular abgeschickt wird, z.B.
    <input type="submit" value="Senden" name="btnsend" />

Beispiel Einfaches Formular mit einem Textfeld
<form method="post" action="seite.asp">
  <p>Adresse:
    <input type="text" name="fldadresse" size="20" />
  </p>
  <p><input type="submit" value="Senden" name="btnsend" /></p>
</form>

Im folgenden werden die verschiedenen Typen von Formularfeldern vorgestellt.

Beispiel Einzeiliges Textfeld mit Defaultwert und maximaler Grösse
<input type="text" name="fldname" size="20" 
  value="Standard" maxlength="15" />

Beispiel Mehrzeiliges Textfeld mit Defaultwert
<textarea name="fldcomment" cols="20" rows="4">
  keine Eingabe
</textarea>

Beispiel Vorangekreuztes Kontrollkästchen
<input type="checkbox" name="fld4" value="Ja" checked="" />

Bei Optionsschaltflächen (Radiobuttons) ist wichtig, dass alle zusammengehörenden Schaltflächen dasselbe Attribut name haben.

Beispiel Zwei zusammengehörende Optionsschaltflächen (Default: Frau)
Anrede:
Frau <input type="radio" name="fldanrede" value="Frau" checked="" />
Herr <input type="radio" name="fldanrede" value="Herr" />

Kombinationsfelder (Dropdown-Felder) benötigen zwei Tags, nämlich <select>..</select> für das Feld selbst und je ein <option>..</option> für jeden Eintrag in der Liste

Beispiel Kombinationsfeld mit voreingestelltem Wert
<select size="1" name="fldanrede">
  <option value="f" selected="">Frau</option>
  <option value="m">Herr</option>
</select>

Beispiel Kombinationsfeld mit 3 Einträgen und erlaubter Mehrfachauswahl
<select size="3" name="fldsoftware" multiple="">
  <option value="1">Excel</option>
  <option value="2">Word</option>
  <option value="3">Powerpoint</option>
</select>

In dynamischen Web-Applikationen werden in Formularen oft auch Informationen mitgeschickt, die für den Benutzer nicht sichtbar sind. Dazu verwendet man <input>-Tags vom Typ hidden.

Beispiel Verstecktes Formularfeld
<input type="hidden" name="fldvorwert" value="Müller" />

Zurück zum Inhaltsverzeichnis

Überblick über die vorgestellten Tags

Tag Kategorie Anwendung
<a href="mailto:x@digicomp.ch">  
  Mail
</a>		 Hyperlink Hyperlink zum Erstellen eines Mails
<a href="Zielseite.htm"> 
  Link-Text</a> 		Hyperlink Hyperlink mit Ziel-URL
<b>..</b> Formatierung Textformatierung fett
<body>..</body> Grundstruktur Seitenteil einer HTML-Seite
<br /> Umbruch Zeilenumbruch (kleiner Zeilenabstand)
<form method="post"
  action="seite.asp">..</form> 		Formular Schliesst ein Formular ein
<head>..</head> Grundstruktur Kopfteil einer HTML-Seite
<html>..</html> Grundstruktur Schliesst eine HTML-Seite ein
<i>..</i> Formatierung Textformatierung kursiv
<img border="1" src="bild.gif" 
  width="50" height="50" /> 		Bilder Eingeschlossenes Bild
<input type="checkbox" name="f4"
  value="J" checked="" /> 		Formular Kontrollkästchen (vorangekreuzt)
<input type="hidden" 
  name="fldvorwert" value="Max" /> 		Formular Verstecktes Formularfeld
<input type="radio"
  name="fldanrede" value="Frau"
  checked="" /> 		Formular Optionsschaltfläche (Radiobutton) voreingestellt
<input type="submit"
  value="Senden" name="btnsend" /> 		Formular Schaltfläche zum Abschicken des Formulars
<input type="text" name="fldadr"
  size="20" /> 		Formular Einzeiliges Textfeld
<option value="f" selected="">
  Frau
</option> 		Formular Listen-Tag für ein Kombinationsfeld (siehe select)
<p>..</p> Umbruch Paragraph (grosser Zeilenabstand)
<select size="1" name="fldan">
  <option>..</option>
</select> 		Formular Feld-Tag für ein Kombinationsfeld (siehe option)
<select size="5"
  name="fldsoftware"
  multiple="">..</select> 		Formular Kombinationsfeld mit Mehrfachauswahl (siehe option)
<table border="1" width="250"> ..</table> Tabelle Schliesst eine Tabelle ein
<td width="50%">..</td> Tabelle Schliesst eine Tabellenzelle ein
<textarea name="f4" cols="20"
  rows="4">...</textarea> 		Formular Mehrzeiliges Textfeld
<title>..</title> Grundstruktur Im Browser angezeigter Titel einer Seite
<tr>..</tr> Tabelle Schliesst eine Tabellenzeile ein

Zurück zum Inhaltsverzeichnis

Tools und weiterführende Links

Für die direkte Bearbeitung von HTML gibt es mindestens drei Arten von Tools:

  1. Reine HTML-Editoren oder HTML-Validatoren: Diese weisen Vorteile auf wie Syntax-Highlighting, automatische Eingabe von Standard-Tags und benutzerdefinierten Tags, Validierung des HTML-Codes. Sie bieten allerdings keine WYSIWYG-Eingabe. Besonders empfehlenswert in dieser Kategorie:
    • CSE HTML Validator Light (Freeware)
    • Arachnophilia (Freeware)
  2. WYSIWYG-Tools mit HTML-Ansicht: Die meisten WYSIWYG-Tools bieten die Möglichkeit, den HTML-Code direkt zu bearbeiten. Allerdings ist das Syntax-Highlighting meist weniger ausgefeilt und gewisse Tools wie Microsoft Frontpage 97 haben recht eigenwillige Ansichten, wie der Source-Code umzubrechen und zu formatieren ist. In Frontpage 2000 hat sich das gebessert.
  3. Entwicklungsumgebungen für serverseitiges Scripting: Da Script-Sprachen meist direkt in die HTML-Seiten eingebunden werden, besitzen diese Tools im Normalfall sowohl eine WYSIWYG- wie eine Sourcecode-Ansicht, wobei die Sourcecode-Ansicht meist eher bessere Unterstützung bietet als die WYSIWYG-Ansicht. Erwartungsgemäss handelt es sich hier v.a. um kommerzielle Tools mit z.T. saftigen Preisen. Vertreter dieser Kategorie:
    1. Microsoft Visual InterDev
    2. Macromedias UltraDev

Links zu HTML, zu Tools, zu weiterführenden Techniken wie CSS oder serverseitigem Scripting und zum Web-Design generell finden Sie in der Webdesign-Linkliste in der Unterkategorie "Programmiersprachen / Techniken" z.B. in den Rubriken "HTML" oder "DHTML" und in den Kategorien "Beschaffung/Evaluation von Tools" sowie "Tipps und Tricks zu Programmen".

Zurück zum Inhaltsverzeichnis

Diese Webseite wurde am 03.05.18 um 22:34 von rothen ecotronics erstellt oder überarbeitet.

Impressum

Zurück zu rothen ecotronics

Printed on 100% recycled electrons!