HTML

Inhalt

• 1. XHTML/HTML/CSS - Was ist denn das?
  • 1.1. HTML/XHTML: Struktur der Internetseite
  • 1.2. CSS: Aussehen der Internetseite
  • 1.3. HTML/XHTML Standards
  • 1.4. Was es sonst noch gibt
• 2. Ein einfaches HTML-Dokument
  • 2.1. Dateinamen und -endungen
  • 2.2. Tags
  • 2.3. Attribute
  • 2.4. Grundstrukur eines XHTML 1.0-Dokuments
• 3. Einige HTML-Tags
  • 3.1. Überschriften und Text-Formatierung
  • 3.2. Listen
  • 3.3. Hyperlinks
  • 3.4. Bilder
  • 3.5. Tabellen

1. XHTML/HTML/CSS - Was ist denn das?

1.1. HTML/XHTML: Struktur der Internetseite

HTML steht für HyperText Markup Language und ist eine Seitenbeschreibungssprache, die bei Internetseiten eingesetzt wird.

Der HTML-Code wird in einen normalen Text-Editor eingegeben, es gibt aber auch spezielle HTML-Editoren, die den Code farbig hervorheben. WYSIWYG-Editoren (What you see is what you get) wie Macromedia Dreamweaver (oder gar Microsoft Word), bei denen man keinen Code schreiben muss, weil sie den automatisch generieren, empfehle ich nicht unbedingt, weil ich der Meinung bin, dass man nur dann professionelle Seiten erstellen kann, wenn man selber den Code schreibt. Selbst geschriebener Code ist übersichtlicher als generierter und Scriptsprachen wie PHP (die man dann selber schreiben muss) lassen sich folglich auch einfacher integrieren.

Damit die HTML-Datei im Internet verfügbar ist, muss sie auf einen Webserver raufgeladen werden, der die Datei im Internet zur Verfügung stellt. Ich werde darauf jedoch nicht eingehen, erkundige dich bei deinem Hoster (Webspaceanbieter), wie es geht.

Erwähnen will ich noch (weil es vielleicht nicht selbstverständlich ist), dass man den Quellcode einer HTML-Seite mit den meisten Browsern problemlos anschauen kann ("Quelltext anzeigen" oder ähnlich).

Was der Unterschied zwischen HTML und XHTML ist, werde ich in Abschnitt 1.3 beschreiben.

1.2. CSS: Aussehen der Internetseite

Früher (und heute oft immer noch) wurde HTML sowohl für das Aussehen der Internetseite (Farben, Schriftgrösse, etc.) als auch für die Struktur des Dokumentes (Überschriften, Absätze, etc.) verwendet. Dies führte oft zu sehr unübersichtlichem Code, sodass CSS eingeführt wurde.

HTML sollte nur für die Dokumentstruktur verwendet werden, nicht für das Aussehen einer Internetseite! Für das Aussehen ist CSS zuständig.

1.3. HTML/XHTML Standards

Die Sprache HTML wurde seit der ersten Version immer wieder erweitert. HTML 4.01 ist die letzte Version des HTML-Standards und somit auch die am meisten überladene Version von HTML. Zu beachten ist noch, dass es Strict-Versionen gibt, die weniger Elemente enthalten als die Transitional-Versionen. Man führte nun XHTML ein, welches XML-basierend ist (deshalb der Name XHTML) und weniger Elemente und Attribute enthält. Es wurden vor allem Elemente und Attribute gestrichen, die nur für das Layout zuständig waren, weil sich das ja eleganter mit CSS machen lässt.

Spreche ich in diesem Text von HTML, meine ich damit normalerweise auch XHTML.

Es gibt unter anderem folgende aktuelle (X)HTML-Standards:

• HTML 4.01 Strict/Transitional
• XHTML 1.0 Strict/Transitional
• XHTML 1.1 (Strict)

Zwischen XHTML 1.0 Strict und XHTML 1.1 gibt es eigentlich wenige Unterschiede. Jedoch müssen laut dem W3C-FAQ XHTML 1.1-Dokumente mit einem XML-Content-Type an den Client gesendet werden, was beispielsweise der Internet Explorer nicht so gut unterstützt. Dieser Text basiert folglich auf XHTML 1.0 Strict.

Wer mehr über die verschiedenen Standards erfahren will, kann das auf http://www.w3.org/MarkUp/ tun.

1.4. Was es sonst noch gibt

Hier beschreibe ich noch kurz, was man sonst noch alles so auf Internetseiten einsetzen kann. Auf die Themen wird im Text aber nicht eingegangen:

JavaScript/DOM

JavaScript ist dafür gedacht, Internetseiten dynamisch zu machen. Man kann damit Elemente verändern, ohne die komplette Seite neu zu laden, Tastendrücke abfangen etc. Weil Netscape und Microsoft einen stark unterschiedlichen JavaScript-Befehlssatz hatten, hat das W3C den Standard DOM (Document Object Model) entwickelt.

SVG

SVG ist ein vektorbasiertes XML-Bildformat. Mit SVG ist es möglich verlustfrei skalierbare Grafiken zu erstellen. Diese lassen sich mit JavaScript verändern und sogar animieren. Dadurch lassen sich auch einfache Onlinespiele prorgrammieren. Durch SVG wird Macromedias Flash (siehe unten) obsolet. Nachteil ist nur, dass zur Zeit das SVG-Plugin nicht standardmässig installiert ist (was bei Flash leider der Fall ist). Für ein SVG-Tutorial siehe http://selfsvg.info/, nette SVG-Beispiele gibt es auf http://www.croczilla.com/svg/samples/.

Macromedia Flash

Flash ist ein proprietäres Browser-Plug-In und lässt sich wie auch SVG für animierte Vektorgrafiken verwenden. Da Flash kein Standard ist, sollte es nicht auf Internetseiten eingesetzt werden.

Java-Applets

Java hat nichts mit JavaScript zu tun! Java-Applets können ähnlich wie Flash ins Browser-Fenster eingebettet werden und arbeiten (fast) wie normale Anwendungen. Ich finde Java aber genau so wie Flash auf Webseiten sinnlos.

Daneben gibt es noch viele weitere solche Technologien.

2. Ein einfaches HTML-Dokument

2.1. Dateinamen und -endungen

HTML-Dokumente haben meistens die Dateiendung .html. Im Prinzip ist eigentlich egal, welche Dateiendung sie haben, weil der Webserver dem Client sowieso mitteilt, ob sich hier jetzt um ein HTML-Dokument oder z. B. um ein Bild handelt (vorausgesetzt, der Webserver wurde entsprechend eingestellt). Mit der .html-Dateiendung ist man aber doch am besten unterwegs, weil diese Endung bei eigentlich allen Webhostern bzw. -servern korrekt ausgeliefert wird, ohne dass man spezielle Einstellungen vornehmen muss.

Das Hauptdokument heisst meistens index.html. Greift man also beispielsweise auf http://meineseite.com/ zu, liefert der Webserver die Datei http://meineseite.com/index.html aus.

2.2. Tags

HTML-Dokumente bestehen aus sogenannten Tags. Ein Tag wird mit eckigen Klammern (< und >) gekennzeichnet. Es gibt z. B. Tags um Bilder einzufügen, fett oder gross zu schreiben etc. In XHTML müssen sämtliche Tags geschlossen werden, was man am Slash (/) nach der öffnenden Klammer sieht. Hier ein Beispiel für ein (natürlich nicht existierendes) Tag:

<beispiel_tag>Dieser Text befindet sich zwischen einem tag.</beispiel_tag>

Tags können auch verschachtelt werden:

<erstes_tag>Ein Text, der sich teilweise <zweites_tag>zwischen zwei Tags</zweites_tag> befindet.</erstes_tag>

Wichtig ist:

Das zuletzt geöffnete Tag muss immer zuerst wieder geschlossen werden!

Das folgende Beispiel ist also falsch, weil das erste Tag vor dem zweiten Tag geschlossen wird:

<erstes_tag>Ein Text, der sich teilweise <zweites_tag>zwischen zwei Tags</erstes_tag> befindet.</zweites_tag>

Es gibt auch Tags, die an sich kein Abschlusstag benötigen würden, wie z. B. das br-Tag, das einen Zeilenumbruch einfügt. In XHTML muss aber alles abgeschlossen werden, wir schliessen ein br-Tag deshalb am besten verkürzt mit <br /> ab (statt <br></br>):

Hier hat es einen<br />
Zeilenumbruch.

Der Abstand vor dem Slash ist übrigens nur aus Kompatibilitätsgründen wichtig, weil ohne den Abstand einige reine HTML-Browser das Tag falsch anzeigen würden.

2.3. Attribute

Öffnende Tags können Attribute haben mit einem Wert (z. B. das Ziel eines Hyperlinks oder die Grösse einer Datei):

<tag attribut="wert">...</tag>

Tags können natürlich auch mehrere Attribute haben:

<tag erstes_attribut="erster_wert" zweites_attribut="zweiter_wert">...</tag>

2.4. Grundstrukur eines XHTML 1.0-Dokuments

Ein XHTML 1.0 Strict-Dokument hat folgendes Grundgerüst:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Der Titel der Seite</title>
</head>
<body>
Hier kommt der Text der Seite
</body>
</html>

Die erste Zeile teilt dem Browser mit, dass es sich hier um XML handelt (XHTML ist ja XML-basierend). Das Attribut encoding gibt die Codierung des Zeichensatzes an. UTF-8 ist international und sollte deshalb verwendet werden.

Die zweite Zeile gibt die genaue XHTML-Version an.

Die dritte Zeile (<html>) ist ein Tag, welches ganz unten wieder endet. Sie teilt mit, dass jetzt dann der HTML-Code folgt.

Die vierte Zeile (<head>) ist auch ein Tag und definiert einen Block, in welchem Eigenschaften stehen, die nicht direkt im Browserfenster angezeigt werden. Dazu gehören beispielsweise der Titel des Dokuments und CSS-Eigenschaften.

Im title-Tag steht nun der Titel, welcher oben in der Titelzeile des Browsers angezeigt wird.

Innerhalb des body-Tags kommt dann der ganze Text, der im Browserfenster angezeigt werden soll.

3. Einige HTML-Tags

3.1. Überschriften und Text-Formatierung

Die folgenden Tags kommen natürlich in den Abschnitt body:

Beispielseite

An dieser Stelle möchte ich noch erklären, dass in HTML Zeilenumbrüche nicht selbstverständlich sind. Ein Zeilenumbruch im Quellcode ist kein Zeilenumbruch in der Darstellung. Man sollte grundsätzlich Abschnitte mit dem <p>-Tag machen und Zeilenumbrüche mit <br /> nur dann einsetzen, wenn sie wirklich benötigt werden.

Beispielseite

Weitere Tags gibt es unter http://www.w3.org/TR/xhtml-modularization/abstract_modules.html in den Abschnitten 5.2.2 oder 5.4.

3.2. Listen

Eine gepunktete Liste wird mit dem Tag <ul> eingeleitet. Jeder Listeneintrag wird von <li> und </li> umgeben:

<ul>
<li>Eintrag 1</li>
<li>Eintrag 2</li>
<li>Eintrag 3</li>
</ul>

Nummerierte Listen funktionieren gleich wie die gepunkteten, nur dass sie <ol> anstelle von <ul> verwenden.

Neben den normalen Listen gibt es noch Definitions-Listen, bei denen man zu einem Eintrag eine Definition zuweisen kann. Solche Listen habe ich z. B. im Abschnitt 1.4 verwendet.

<dl>
  <dt>Eintrag</dt>
  <dd>Definition</dd>
  <dt>Eintrag</dt>
  <dd>Definition</dd>
</dl>

Beispielseite

3.3. Hyperlinks

Wollen wir einen Link zu einer anderen Seite machen, verwenden wir das Tag a. Die Zieladresse wird im Attribut href angegeben und der Text, der auf der Internetseite angezeigt wird befindet zwischen dem Start- und Endtag. Die Zieladresse kann entweder ein Dateiname sein, der sich im gleichen Verzeichnis befindet, wie die Webseite, oder auch eine externe Internetseite (dabei darf man das http:// nicht vergessen). Man kann auch eine Email-Adresse angeben, welcher allerdings das Präfix mailto: vorangestellt werden muss. Dazu einige Beispiele:

<a href="links.html">Klick hier, um zu der Linkseite zu kommen!</a>
<a href="http://www.google.ch">Eine Suchmsachine</a>
<a href="mailto:name@example.com">Schick mir ein E-Mail!</a>

Beispielseite

3.4. Bilder

Um Bilder einzufügen benutzen wir das Tag img mit folgenden Attributen:

• src: der Dateiname vom Bild
• width: die Breite des Bildes in Pixeln (optional)
• height: die Höhe des Bildes in Pixeln (auch optional)
• alt: ein alternativer Text für das Bild, wenn der Browser keine Bilder unterstützt (ist vom Standard vorgeschrieben, kann aber auch einfach leer sein: alt="")
• title: Tooltip des Bildes, wird meistens beim drüberfahren mit der Maus angezeigt.

Ich empfehle die width- und height-Attribute anzugeben, auch wenn sie optional sind, weil sonst bei vielen Bildern die Seite während dem Laden "auseinanderspringt" weil am Anfang die Grösse des Bildes nicht bekannt ist.

Hier ein Beispielcode:

<img src="bild.jpg" width="200" height="150" alt="Mein Bild" />

Der Slash am Schluss wird benötigt, damit es gültiges XHTML ist.

Beispielseite

3.5. Tabellen

Etwas schwieriger sind Tabellen. Eine Tabelle beginnt mit <table> und endet mit </table>. Anschliessend kommt eine Zeile, welche mit <tr> anfängt und mit </tr> aufhört und schliesslich die Spalten von Rechts nach links, die mit <td> anfangen und mit </td> enden. Hier ein Code einer Beispieltabelle:

<table>
<tr>
<td>Zeile 1, Spalte 1;</td>
<td>Zeile 1, Spalte 2;</td>
</tr>
<tr>
<td>Zeile 2, Spalte 1;</td>
<td>Zeile 2, Spalte 2;</td>
</tr>
</table>

Will mal bestimmte Zellen der Tabelle hervorheben (z. B. die Überschriften), verwendet man anstelle von td das Tag th.

Hier noch einige Attribute des Tags table:

• border: die Dicke des Tabellenrahmens in Pixeln
• cellspacing: Abstand zwischen den Zellen in Pixeln
• cellpadding: Abstand um den Text in einer Zelle in Pixeln

Ich empfehle jedoch, diese Attribute mit Hilfe von CSS zu setzen.

Beispielseite

Tabellen sollten für das Anzeigen von tabellarischen Daten verwendet werden und nicht für das Seiten-Layout. Für das Layout der Seite ist CSS zuständig.