HTML-Tutorial

Details
Zuletzt aktualisiert am Sonntag, 01. Juli 2012 08:11
Geschrieben von Jan Pionzewski

 

Herzlich Willkommen im HTML-Tutorial. In diesem Tutorial versuche ich, Ihnen die Hypertext Markup Language etwas näher zu bringen und Ihnen eine Einführung in die wichtigsten Funktionen mit an die Hand zu geben.
Dieses Tutorial besteht aus insgesamt 9 Kapiteln. Sie können sich dabei über das Navigationsmenü fortbewegen oder auch einfach alle Kapitel auf einmal anzeigen lassen.
Wenn Sie möchten, können Sie sich das Tutorial auch als PDF-Dokument hier herunterladen (378 KB).

 



1. Einleitung

Wer eine Webseite erstellen möchte, kommt dabei nicht ohne HTML aus. HTML ist eine Auszeichnungssprache für Webseiten. Die Abkürzung HTML steht dabei für Hypertext Markup Language. Mit HTML können Sie Ihre Webseite grundlegend formatieren, das heißt Tabellen anlegen, Schriftarten festlegen, Formulare erstellen, Frames und vieles mehr. Allerdings bietet HTML dabei nicht so viele Möglichkeiten zu grafischen Gestaltung wie beispielsweise CSS dies ermöglicht. Aber für die allererste Webseite reicht "nacktes" HTML vollkommen aus.

Heutzutage gibt es viele Editoren, mit denen Sie ohne HTML-Kenntnisse schnell und einfach eine Webseite basteln können. Jedoch ist es immer sinnvoll, sich doch ein wenig mit der Materie zu beschäftigen. Zum einen generieren viele der so genannten WYSIWYG-Editoren (WYSIWYG = What you see is what you get) aufgeblähten HTML-Code, der viele unnötige Tags produziert. Zum anderen kann man, wenn man zumindest die grundlegendsten HTML-Funktionen kennt, auch mal ohne einen solchen Editor schnell etwas basteln. Hilfreich dann, wenn man anderen Personen schnell etwas präsentieren möchte, oder der Editor gerade nicht zur Verfügung steht.
Womit Sie hingegen immer zurechtkommen - und dieses (oder ein ähnliches) Programm ist auf jedem Rechner installiert - ist ein ganz normaler Texteditor. Denn den brauchen Sie, um HTML-Dateien zu erstellen. Nicht mehr, und nicht weniger. Notepad in Windows reicht dabei schon aus. Aber es gibt auch noch andere Texteditoren, die eine sogenannte Syntax-Highlighting-Funktion besitzen. Das heißt, dass diese Editoren HTML-Tags optisch hervorheben, so dass Sie während dem Arbeiten mit diesen Tools eine bessere Übersicht haben.

Dieses Tutorial soll einen Einstieg in HTML ermöglichen. Eine komplette HTML-Referenz soll es dabei jedoch nicht darstellen. Wenn Sie eine komplette HTML-Referenz möchten, empfehlen wir Ihnen an dieser Stelle SelfHTML (http://de.selfhtml.org).

 



2. Tags und Attribute

 

2.1 Tags

Um HTML verstehen zu können, sollten erst einmal die grundlegendsten Begriffe erklärt werden. HTML ist aufgeteilt in Tags, denen Attribute zugewiesen werden können. Fast alle HTML-Tags bestehen aus einem einleitenden und einem abschließenden Tag. Tags werden dabei mit spitzen Klammern markiert. Attribute werden diesen Tags zugeordnet. Der Text, der zwischen den Tags steht, ist der Gültigkeitsbereich dieser Tags.


Beispiel:

<a href="http://www.webmasterparadies.de">Webmasterparadies.de</a>

 

<a> ist in diesem Beispiel der HTML-Tag, der einen Link zu einer anderen Webseite definiert. Der Text, der zwischen dem einleitenden <a> und dem abschließenden </a> steht, würde nun ein Hyperlink zu einer anderen Webseite sein. Text, der vor oder nach diesen Tags steht, würde nicht als Link dargestellt werden.

 

2.2 Attribute

Attribute können den meisten HTML-Tags zugewiesen werden. Als Attribut versteht man beispielsweise Zusatzformatierungen, die der Tag alleine nicht darstellen würde.

Beispiel:

<a href="http://www.webmasterparadies.de" target="_blank">Webmasterparadies.de</a>

 

Wie im ersten Beispiel wird auch hier wieder ein Hyperlink zu einer anderen Webseite angelegt. Diesmal ist jedoch das zusätzliche Attribut target="_blank" hinzugekommen. Dieses Attribut bewirkt, dass sich die Seite, auf die verwiesen wird, in einem neuen Fenster öffnet. Ohne diese Angabe, würde die neue Webseite im gleichen Fenster oder im gleichen Frame geöffnet werden.
Streng genommen müsste man jedoch noch bemerken, dass selbst das href="/..." schon ein Attribut ist, denn dieses definiert die Zielseite, auf die verlinkt wird. Doch ohne diesen Wert funktioniert kein Hyperlink.

 



3. Grundgerüst einer HTML-Datei

Jedes HTML-Dokument ist gleich aufgebaut. Dabei enthält es einen HEAD-Bereich und einen BODY-Bereich. Im HEAD-Bereich werden nicht sichtbare Befehle dargestellt, wie beispielsweise Meta-Angaben zu Autor oder Suchbegriffen. Im Body-Bereich werden dann dementsprechend die Befehle dargestellt, die auch für den Besucher Ihrer Seite sichtbar sein sollen. Darüber Hinaus werden vor jedem HTML-Dokument noch Angaben zur verwendeten "HTML-Sprache" gemacht.

Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

</body>
</html>


3.1 Doctype

Der Docytpe gibt an, welche Art von HTML-Dokument Sie erstellen möchten. Neben HTML gibt es noch einige andere Attribute, die Sie hier einfügen können. Nähere Informationen dazu können Sie hier auf der Webseite im Bereich "Wie erstelle ich validen Code" nachlesen.

Hinweis:
In den folgenden Beispielen werden wir den Doctype aus Gründen der Übersichtlichkeit nicht weiter angeben. Dennoch sollten Sie zu beginn jeder HTML-Seite eine Angabe dazu machen, um validen HTML-Code zu erzeugen.


3.2 HTML-Tag

Der HTML-Tag umschließt alle anderen Tags und zeigt dem Browser, dass ab hier eine HTML-Seite beginnt.


3.3 HEAD-Tag

Im HEAD einer Webseite werden verschiedene Meta-Angaben zur Seite gemacht. Dies können Informationen über den Autor sein, oder aber auch über die Seite. Diese Angaben sind zum Beispiel für Suchmaschinen wichtig. Auch in den Kopf-Bereich Ihrer Webseite gehören die Angaben zum Titel der Webseite, die auf dem Browser angegeben wird. Die Titel-Angabe wird dabei über den <title>...</title>-Tag realisiert.


Beispiel:

<head>
<title>Webmasterparadies.de - ... everything for your web-start</title>
</head>


Bitte beachten Sie dabei, dass der Text im Titel-Bereich Ihrer Seite nicht weiter formatiert werden kann.


3.4 BODY-Tag

Hier kommt quasi der gesamte Inhalt Ihrer Webseite rein, der im Browser dargestellt werden soll.

3.5 Hintergrundfarbe und -bild

Ebenfalls zum Grundgerüst der Seite gehört die Wahl eines Hintergrundbildes oder einer Hintergrundfarbe. Diese Angaben werden direkt im <body>-Tag vorgenommen.

Beispiel für Hintergrundbild:

<html>
<head>
  <title>Webmasterparadies.de</title>
<body background="hintergrundgrafik.jpg">

</body>
</html>


Beispiel für Hintergrundfarbe:

<html>
<head>
  <title>Webmasterparadies.de</title>
<body bgcolor="lightblue">

</body>
</html>


Hinweis:

Hintergrundgrafiken werden standardmäßig vom Browser gekachelt. Wählen Sie also ein zu kleines Hintergrundbild, könnte dies zu unschönen Effekten führen. Die Angabe zur Farbe des Hintergrundes kann entweder, wie in unserem Beispiel, per englischer Angabe erfolgen, oder aber über einen Hexadezimal-Wert der Farbe. Beispielsweise #FF0000 für rot. Wenn Sie hingegen auf beide angaben verzichten, wird standardmäßig ein weißer Hintergrund angezeigt, wenn der User dieses Attribut im Browser nicht geändert hat.

 



4. Einfache Tags


4.1 Überschriften

Mit Hilfe von einigen einfachen Tags ist es möglich, Überschriften auf Ihrer Webseite zu gestalten. Diese Überschriften lassen sich auch mit weiteren Attributen versehen.

Beispiel:

<html>
<head>
  <title>Webmasterparadies.de</title>
</head>
<body>

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

</body>
</html>


Je höher der Wert, desto niedriger ist die Größe der Überschrift.


4.2 Absätze und Zeilenumbrüche

Um den Textfluss zu fördern ist es sinnvoll, mittels Absätzen und Zeilenumbrüchen den Text zu formatieren.

Beispiel:

<html>
<head>
  <title>Webmasterparadies.de</title>
</head>
<body>

<p>Dies ist ein normaler Standardtext. Er wird dazu verwendet, Beispiele aufzuzeigen und so weiter. Wenn man beispielsweise einen Absatz einfügen möchte, muss man dazu einfach das <p>-Tag verwenden.</p>

<p>Denn dann wird ein schöner Absatz eingefügt, der den Textfluss erhöhen kann. Möchte man hingegen nur einen Zeilenumbruch haben, reicht das <br>-Tag dazu vollkommen aus. Aus Gründen der Übersicht sollte man dann auch im Code selbst einen Zeilenumbruch einfügen, sonst findet man sich hinterher nicht mehr zurecht.<br>
Wichtig ist die Angabe der Tags, da Browser nämlich leere Zeilen oder Absätze ignorieren, wenn diese nicht durch entsprechende Tags gekennzeichnet werden.</p>

</body>
</html>


4.3 Texthervorhebungen

Natürlich lässt sich Text in HTML auch nicht nur durch Absätze und Zeilenumbrüche formatieren. Fettschrift, Kursivschrift und unterstrichener Text gehören ebenfalls dazu, um wichtige Textpassagen hervorheben zu können.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><b>Mit dem Tag <b> wird Text fett dargestellt</b></p>
<p><i>Mit dem Tag <i> hingegen erreicht man kursiven Text</i></p>
<p><u>Möchte man Text unterstreichen, hilft das Tag <u> dabei</u></p>


</body>
</html>


Natürlich lassen sich diese Tags auch beliebig kombinieren.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><b><i><u>Dies ist ein fetter, kursiver und unterstrichener Text</u></i></b></p>

</body>
</html>


4.4 Ausrichtung von Text, Grafiken, etc.

Natürlich möchte man manche Dinge nicht immer nur links auf der Seite stehen haben. Daher kann man mit HTML auch so gut wie alle Elemente ausrichten.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<h1 align="right">Eine Überschrift, die rechts steht</h1>

</body>
</html>


Um ein bestimmtes Element auszurichten, muss es mit dem Attribut align="..." versehen werden. Mögliche Werte sind:

Beispiele für mögliche Ausrichtungen
align="left"
 Das Element wird linksbündig ausgerichtet
align="right" Das Element wird rechtsbündig ausgerichtet
align="center" Das Element wird zentriert
align="justify" Blocksatz







 

5. Schrift-Formatierung

Schriftart und Schriftgröße lassen sich in HTML natürlich auch verändern. Doch müssen Sie bei Schriftarten aufpassen, denn bei Ihrem Besucher werden nur die Schriftarten angezeigt, die er auch auf seinem Rechner installiert hat. Wenn Sie also eine exotische Schriftart verwenden, die Ihr Besucher nicht installiert hat, wird bei ihm automatisch die voreingestellte Standard-Schriftart angezeigt (auf Windows-Rechnern meist Times New Roman). Daher sollten Sie versuchen, die eingesetzten Schriftarten auf die Standard-Schriftarten zu beschränken, die jeder installiert auf. Auf den meisten Windows-Rechnern ist das:

 

  • Arial
  • Courier New
  • Tahoma
  • Times New Roman
  • Verdana

 

Hinweis:
Die Schrift-Formatierungen werden dabei im CSS-Format angegeben, da der alte HTML-Gebrauch (z.B. <font face="Verdana" anstelle von <span style="font:family:Verdana">) inzwischen als deprecated gekennzeichnet wurde. Das heißt, dass diese alten HTML-Angaben in Zukunft aus dem HTML-Standard entfallen sollen. Dieses Tutorial wird sich daher, obwohl es eigentlich ein HTML-Tutorial ist, an diesen Angaben orientieren und die Schrift-Formatierung im CSS-Format erklären.


5.1 Schriftarten

Und so können sie Schriftarten auf Ihren Seiten definieren:

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p>
  <span style="font-family:Verdana">Schrift in Verdana</span><br>
  <span style="font-family:Exotisch01,Verdana">Dieser Text wird in Exotisch01 dargestellt. Wenn diese Schriftart nicht verfügbar ist, wird hingegen Verdana genommen</span>
</p>

</body>
</html>


Bedenken Sie, dass die angegebene Schriftart so lange weiter benutzt wird, bis der <span>-Tag wieder geschlossen wird (dies gilt im Übrigen ja sowieso für jeden HTML-Tag).


5.2 Schriftgröße

Auch die Schriftgröße lässt sich selbstverständlich verändern.

Beispiel:

<html>
<head>
  <title>Schriftart, Schriftgr&ouml;&szlig;e und Schriftfarbe - CSS-Entsprechungen</title>
</head>
<body>

<p>
   <span style="font-size:250%">Sehr großer Text</span><br>
   <span style="font-size:50%">Sehr kleiner Text</span><br>
   <span style="font-size:1.2em">Text etwas größer als normal</span><br>
   <span style="font-size:1em">Standardgröße, wie sie beim Benutzer eingestellt ist</span><br>
   <span style="font-size:0.8em">Text deutlich kleiner als normal</span>
</p>

</body>
</html>


5.3 Schriftfarbe

Die Farbe des Textes lässt sich natürlich ebenso verändern, wie auch die Größe und Schriftart.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p>
  <span style="color:#FF0000">Knallroter Text</span><br>
  <span style="color:#00C000">Grüner Text</span><br>
  <span style="color:#0000FF">Blauer Text</span><br>
  <span style="color:lightblue">Hellblauer Text</span><br>
  <span style="color:pink">Pinker Text</span><br>
  <span style="color:darkred">Dunkelroter Text</span>
</p>

</body>
</html>


Wie Sie sehen, können dabei die Angaben zur Farbe sowohl als Hexadezimal-Wert, als auch als englischer Begriff angegeben werden.


 


6. Links (Verweise)

Ein wesentlicher Bestandteil von Internetseiten sind Verweise, oder auch Links genannt. Verweise können sich auf Punkte innerhalb einer HTML-Datei beziehen, oder auf fremde Webseiten, Downloads, etc. Den Möglichkeiten sind dabei praktisch keine Grenzen gesetzt.


6.1 Standard-Verweis auf eine andere Webseite

Mit dem HTML-Tag <a> lassen sich Verweise auf andere Webseiten setzen. Dazu muss das Attribut href="/..." angegeben werden, da hiermit das Verweisziel definiert wird.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="/seite2.htm">Seite 2</a></p>
<p><a href="http://www.webmasterparadies.de">Webmasterparadies.de - ... everything for your web-start</a></p>

</body>
</html>


Erläuterung:

Bei dem ersten Link wird die HTML-Datei "seite2.htm" geöffnet, die sich auf Ihrem Webserver im gleichen Verzeichnis befinden muss. Mit dem zweiten Link hingegen wird http://www.webmasterparadies.de angesteuert. Beide Links öffnen sich im gleichen Fenster bzw. Frame.


6.2 Verweisziele

Natürlich haben Sie auch die Möglichkeit, einem Link verschiedene Ziele zuzuordnen.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="/seite2.htm" target="_top">Seite 2</a></p>
<p><a href="/seite2.htm" target="_parent">Seite 2</a></p>
<p><a href="http://www.webmasterparadies.de" target="_blank">Webmasterparadies.de - ... everything for your web-start</a></p>

</body>
</html>


Erläuterung:

Mit dem zusätzlichen Attribug target="_top" wird die seite2.htm zwar im gleichen Browser-Fenster angezeigt, jedoch werden dabei z.B. die Frames entfernt. Das Attribut target="_parent" wird dann verwendet, wenn Sie beispielsweise mit Frames arbeiten und die seite2.htm im gleichen Frame geöffnet werden soll. Mit dem Attribut target="_blank" erreichen Sie, dass die Zielseite in einem neuen Browserfenster geöffnet wird - sinnvoll zum Beispiel für Links auf fremde Seiten.


6.3 eMail-Adressen verlinken

Auch eMail-Adressen lassen sich mit einem Hyperlink versehen. Voraussetzung für diese Methode ist, dass der Benutzer auf seinem Computer ein eMail-Programm installiert haben muss. Hat er dies nicht (z.B. weil er einen Web-Mailer wie GMX benutzt), funktioniert diese Methode nicht.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="mailto:name@domain.de">eMail schreiben</a></p>
<p><a href="mailto:name@domain.de?subject=Hallo">eMail mit vordefinierter Betreffzeile schreiben</a></p>
<p><a href="mailto:name@domain.de?body=Sehr geehre Damen und Herren">eMail mit vordefiniertem Text schreiben</a></p>
<p><a href="mailto:name@domain.de,name2@domain.de?cc=name@domain2.de">eMail an zwei Hauptempfänger und einen cc-Empfänger schreiben</a></p>
<p><a href="mailto:name@domain.de?subject=Feedback&body=Sehr geehrte Damen und Herren">eMail-Link kombiniert mit Betreffzeile und vordefiniertem Text</a></p>

</body>
</html>

 

Erklärung:
Ein eMail-Link lässt sich mit verschiedenen Optionen versehen. Der erste Link in dem Beispiel schreibt eine ganz normale eMail ohne vordefinierten Text an den genannten Empfänger. Der zweite Link gibt einen entsprechenden Text in der Betreffzeile vor. Einen vordefinierten Text in der eMail (beispielsweise eine Anrede) lässt sich mit dem dritten Link bewerkstelligen. Der vierte Link hingegen schickt eine eMail an zwei Hauptempfänger und einen sichtbaren (cc) Kopieempfänger. Der letzte Link kombiniert eine vordefinierte Textzeile mit einem vordefinierten Text.

Hinweis:
Die genannten Optionen sind nicht als HTML-Standard definiert. Sie werden dennoch von vielen Browsern korrekt interpretiert. Eine Garantie für die Funktion bei jedem Browser und jedem Mail-Programm gibt es jedoch nicht.


6.4 Anker definieren

Wenn Sie innerhalb einer langen HTML-Seite eine Möglichkeit zur Navigation zur Verfügung stellen möchten, können Sie die Anker-Methode verwenden. Dabei wird ein Textbestandteil als Anker definiert. Der Verweis zeigt dann jedoch nicht zu einer anderen Webseite, sondern eben zu diesem Anker. So kann innerhalb eines langen Dokumentes per Mausklick hin und her gesprungen werden.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<h1><a name="anfang">Anfangsüberschrift, mit Anker. Das sind viele Linien</a></h1>
<p><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr></p>
<h2><a name="kapitel1">Kapitel 1, mit Anker</a></h2>
<p>Dies könnte ein sehr langer Beispieltext werden, wir verkürzen das ganze aber mit Linien</p>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr>
<h2><a name="kapitel2">Kapitel 2, mit Anker</a></h2>
<p>Wenn Sie möchten, können Sie nun zu <a href="#kapitel1">Kapitel 1</a> zurückspringen, oder aber zum <a href="#anfang">Anfang</a></p>

</body>
</html>


Erläuterung:

Dieses etwas unkonventionelle Beispiel erzeugt eine HTML-Datei, die in verschiedene "Kapitel" aufgeteilt ist. Dazwischen finden sich unzählige, horizontale Linien, um das Prinzip zu deutlicher machen zu können.
Wenn Sie nun zum Ende dieser Datei scrollen, finden Sie dort zwei Links, mit denen Sie zu Kapitel 1, oder zum Anfang zurückspringen können.
Um Anker nun erfolgreich einsetzen zu können, müssen Sie dabei folgendes Beachten: Der Anker wird über den Tag <a name="ankername"> definiert. Wenn Sie nun einen Link zu diesem Anker setzen möchten, müssen Sie als Zielseite den Ankernamen mit einer vorangestellten Raute verwenden: <a href="#ankername">.

 



7. Grafiken einbinden

In HTML besteht selbstverständlich auch die Möglichkeit, Grafiken und Bilder in die eigene Webseite einzubinden. Wie das genau funktioniert und was es dabei zu beachten gibt, wird in diesem Teil des Tutorials erklärt.


7.1 Grafiken einbinden

Um ein Bild in Ihre Webseite einzubinden, muss dafür der IMG-Tag benutzt werden. Über das Attribut src="/..." wird der Pfad zum Bild definiert.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<img src="/bild.jpg">
<img src="/../grafiken/bild02.jpg>
<img src="http://www.webmasterparadies.de/logo.jpg">

</body>
</html>


7.2 Höhe und Breite von Bildern definieren

Mit der Angabe zu Höhe und Breite eines Bildes lassen sich verschiedene Effekte erzielen. Zum einen kann so ein großes Bild kleiner dargestellt werden, zum anderen wird durch die Angabe aber auch der entsprechende Platzhalter des Browsers in der definierten Größe angezeigt.
Wenn ein Bild noch nicht vollständig geladen ist, zeigt der Browser standardmäßig einen Platzhalter an. Dieser soll dem Surfer zeigen, dass an dieser Stelle noch ein Bild geladen wird. Ist nun keine Größenangabe zu dem Bild definiert, fällt der Platzhalter in einer bestimmten Standardgröße aus. Das kann bewirken, dass das Design der Webseite nicht mehr passt, oder bei mehreren Grafiken das Browserbild anfängt "herumzuspringen", wenn die Grafiken nach und nach geladen werden. Um dies zu vermeiden ist es also immer sinnvoll, Höhe und Breite des Bildes anzugeben. Die Angabe erfolgt dabei in Pixel.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<img src="/04.jpg" width="100" height="100">

</body>
</html>


Hinweis:
Wenn Sie bei einer großen Grafik die angezeigte Größe beschränken, ändert sich dadurch nicht die Dateigröße der Grafik. Die Grafik wird nur verkleinert dargestellt.


7.3 Alternativtexte für Grafiken

Es besteht auch die Möglichkeit, Alternativtexte für Grafiken zu verwenden. Alternativtexte werden für Browser verwendet, die keine Bilder darstellen (z.B. sogenannte Screenreader für sehbehinderte Menschen) oder für die Index-Programme einer Suchmaschine. Diese können anhand des Alternativtextes Rückschlüsse auf den Inhalt Ihrer Seiten schließen.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<img src="/portrait.jpg" alt="Portraitfoto vom Autor der Seite" title="Dies ist mein Portraitfoto">

</body>
</html>

 

Erläuterung:
Das Attribut alt="..." wird für den Alternativtext verwendet, den Screenreader oder Suchmaschinen-Indexer benutzen. Das Attribut title="..." wird für ein kleines PopUp verwendet, welches automatisch dann erscheint, wenn der Benutzer den Mauszeiger auf dem Bild ruhen lässt. Das Attribut alt="..." sollte also ausschließlich als Alternativtext für das Bild benutzt werden, während das title="..."-Attribut für zusätzliche Informationen dienen kann.

 


 

8. Tabellen

Mit HTML ist es selbstverständlich möglich, Tabellen zu erzeugen. Ob Tabellen nun als Designtechnisches Element eingesetzt werden, oder um Text übersichtlich aufzulisten, oder wie auch immer - es gibt verschiedene Einsatzmöglichkeiten für Tabellen.


8.1 Tabellen erstellen

Eine Tabelle zu erstellen ist relativ einfach.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<table>
  <tr>
    <th>Pro</th>
    <th>Contra</th>
  </tr>
  <tr>
    <td>Design</td>
    <td>Ladezeiten</td>
  </tr>
  <tr>
    <td>Inhalt</td>
    <td>Aktualität</td>
  </tr>
</table>

</body>
</html>

 

Erläuterung:
Eine Tabelle wird immer mit dem <table>-Tag eingeleitet. Das Tag <tr> wird dabei für eine neue Zeile verwendet (tr = table row), <th> für die Tabellenüberschriften (th = table header), <td> für die einzelnen Tabellenzellen (td = table data), in denen der Inhalt stehen soll.


8.2 Tabellen-Elemente ausrichten

Natürlich lassen sich mit dem bekannten Attribut align="..." die Inhalte der Tabelle auch entsprechend ausrichten.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<table align="center">
  <tr>
    <th>Pro</th>
    <th>Contra</th>
  </tr>
  <tr align="right">
    <td>Design</td>
    <td>Ladezeiten</td>
  </tr>
  <tr align="right">
    <td>Inhalt</td>
    <td>Aktualität</td>
  </tr>
</table>

</body>
</html>


Erläuterung:
Mit diesem Beispiel würde die Tabelle mittig auf dem Bildschirm dargestellt werden. Die Inhalte der beiden Reihen würden in diesem Fall rechts ausgerichtet sein.


8.3 Hintergrundgrafik und Hintergrundfarbe

In Tabellen lassen sich auch Hintergrundgrafiken und -farben einrichten.

Beispiel:

<table bgcolor="grey">
  <tr>
    <th>Pro</th>
    <th>Contra</th>
  </tr>
  <tr>
    <td background="grafik.gif">Design</td>
    <td background="grafik2.gif">Ladezeiten</td>
  </tr>
  <tr>
    <td background="grafik.gif">Inhalt</td>
    <td background="grafik2.gif">Aktualität</td>
  </tr>
</table>

</body>
</html>

 

Erläuterung:
Mit dem Attribut bgcolor="..." lässt sich eine Hintergrundfarbe definieren. Ob Sie nun dabei die Hexadezimal-Form wählen, oder englische Begriffe verwenden, bleibt Ihnen überlassen. Das Attribut background="..." definiert eine Hintergrundgrafik.


8.4 Rahmenstärke

Standardmäßig werden Tabellen mit einem Rahmen angezeigt. Dieser Rahmen lässt sich entweder ganz abschalten, oder sogar verdicken - je nachdem, was Sie bevorzugen.

Beispiel:

<table border="1">
  <tr>
    <th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit normalem Rahmen</th>
  </tr>
</table>

 

<table border="5">
  <tr>
    <th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit normalem Rahmen und breitem 3D-Effekt</th>
  </tr>
</table>

 

<table border="1" cellspacing="7">
  <tr>
    <th>Tabelle (bestehend aus einer Zeile und einer Zelle) mit breitem Rahmen</th>
  </tr>
</table>

 

<table border="0">
  <tr>
    <th>Tabelle (bestehend aus einer Zeile und einer Zelle) ohne Rahmen</th>
  </tr>
</table>

 

Erläuterung:
Wie Sie anhand der Beispiele sehen können, gibt es verschiedene Attribute, die verschiedenes bewirken. Das Attribut border="..." sorgt dafür, ob Tabellenrahmen angezeigt werden, oder nicht. Je höher der Wert bei diesem Attribut ist, desto stärker wirkt der 3D-Effekt des Rahmens. Wenn Sie stattdessen nur die Rahmendicke verändern möchten, müssen Sie das Attribut cellspacing="..." verwenden.
Auch die Kombination border="0" und cellspacing="..." ist möglich, um zwischen den einzelnen Tabellenzellen einen höheren Abstand zu erlangen, aber ohne dabei einen Rahmen anzuzeigen.


8.5 Abstand vom Zelleninhalt zum Zellenrand

Um den Abstand zwischen Zelleninhalt und Zellenrand zu verändern, müssen Sie das Attribut cellpadding="..." wählen. Je höher der Wert gewählt wird, desto höher ist auch der Abstand.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<table border="2" cellpadding="10">
  <tr>
    <th>Pro</th>
    <th>Contra</th>
  </tr>
  <tr>
    <td>Design</td>
    <td>Ladezeiten</td>
  </tr>
  <tr>
    <td>Inhalt</td>
    <td>Aktualität</td>
  </tr>
</table>

</body>
</html>


8.6 Breite und Höhe von Tabellen definieren

Um Tabellen in Ihrer Breite und Höhe zu beschränken, können die Attribute width="..." oder height="..." verwendet werden. Als Angabe sind prozentuale Werte möglich, aber auch absolute Werke, die dann in Pixel angegeben werden.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<table border="2" cellpadding="2" width="500" align="center">
  <tr>
    <th width="80%">Pro</th>
    <th width="20%">Contra</th>
  </tr>
  <tr>
    <td>Design</td>
    <td>Ladezeiten</td>
  </tr>
  <tr>
    <td>Inhalt</td>
    <td>Aktualität</td>
  </tr>
</table>

</body>
</html>


Erläuterung:
Mit diesem Beispiel wird eine 500 Pixel breite Tabelle erzeugt. Die Spalte "Pro" ist dabei 80% von diesen 500 Pixel breit, die Spalte "Contra" hingegen nur 20%.


 

9. Frames

Frames werden dazu verwendet, den Bildschirminhalte auf mehrere Bereiche aufzuteilen. Die Anordnung und die Größe der Frames können Sie dabei frei bestimmen.
Frames sind immer dann sinnvoll einzusetzen, wenn Sie beispielsweise die Navigation vom eigentlichen Inhalt trennen möchten. So muss nicht die komplette Navigation immer neu geladen werden. Auch ein Einsatz in Bildergalerien könnte sinnvoll sein. So lässt sich ein Bereich des Bildschirms mit Vorschaugrafiken versehen, der andere Bereich zeigt die Bilder dann in voller Größe an.

 

9.1 Frames definieren

Frames werden mit dem Tag <frameset> eingeleitet.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>

<frameset cols="20%,60%,20%>
<frame name="Links" src="/links.htm">
<frame name="Mitte" src="/mitte.htm">
<frame name="Rechts" src="/rechts.htm">

<noframes>
  <body>
  <h1>Dieser Bereich wird nur dann angezeigt, wenn der Browser keine Frames darstellen kann</h1>
  </body>
</noframes>
</frameset>

</html>


Anzeigebeispiel:

links mitte rechts

 

Erläuterung:
Wie Sie sehen, wird eine HTML-Datei mit Frames etwas anders aufgebaut, als eine Datei ohne Frames. Noch vor dem <body>-Tag wird das Frameset definiert. Nach der Frameset-Definition folgt ein <noframes>-Bereich, in dem dann schlussendlich auch der <body>-Bereich eingefügt wird. Der <noframes>-Bereich ist wichtig, um einen Alternativtext für Browser anzeigen zu können, die keine Frames unterstützen.

Hinweis:
Jedes Frame sollte, so wie im Beispiel angegeben, einen bestimmten Namen erhalten. Dies ist für die Navigation wichtig. Möchten Sie, anhand des Beispiels, aus der Navigation heraus einen Inhalt öffnen, so muss die Zielangabe für den Link mit dem Attribut target="Mitte" angegeben werden. Ansonsten wird der Link im gleichen Frame geöffnet.

 

9.2 Verschachtelte Frames

Auch verschaltete Frames sind möglich.

Beispiel:

<frameset cols="20%,*>
  <frame name="Links" src="/links.htm">
    <frameset rows="20%,*>
      <frame name="Oben" src="/oben.htm">
      <frame name="Unten" src="/unten.htm">
    </frameset>
</frameset>


Anzeigebeispiel:

Links Oben
Unten
 

Erläuterung:
Das Sternchen bei der Breitenangabe bedeutet, dass das nicht definierte Frame (in Bezug auf die Breite) den restlichen Platz in dem Frameset für sich beanspruchen kann.


9.3 Scrollbalken

Normalerweise werden Frames automatisch mit einem Scrollbalken versehen, sobald der Inhalt des Frames größer ist, als in das Frame selbst. Um dieses Verhalten zu unterbinden, ist das Attribut scrolling="no" vonnöten.


Beispiel:

<frameset cols="20%,* scrolling="no">
  <frame name="Links" src="/links.htm">
    <frameset rows="20%,*>
      <frame name="Oben" src="/oben.htm">
      <frame name="Unten" src="/unten.htm">
    </frameset>
</frameset>


Hinweis:
Die Scrollbalken zu unterbinden ist nicht empfehlenswert! Die Webseite könnte dadurch für Ihre Besucher unzugänglich werden, wenn diese eine niedrige Bildschirmauflösung eingestellt haben!


9.4 Veränderung der Framegröße unterbinden

Standardmäßig können Frames vom Benutzer in Ihrer Größe verändert werden. Dazu muss der Besucher einfach an den Rand des Framesets klicken und kann diesen dann durch Ziehen vergrößern oder verkleinern.
Um dies zu unterbinden, ist der Einsatz des Attributs noresize nötig.


Beispiel:

<frameset cols="20%,*>
  <frame name="Links" src="/links.htm" noresize>
    <frameset rows="20%,*>
      <frame name="Oben" src="/oben.htm" noresize>
      <frame name="Unten" src="/unten.htm" noresize>
    </frameset>
</frameset>


9.5 Rahmen der Frames verbergen

Standardmäßig werden im Browser Rahmen um die Frames angezeigt. Diese lassen sich jedoch mit den Attributen border="...", frameborder="...", und framespacing="..." ausblenden oder verbreitern.

Beispiel:

<frameset cols="20%,*>
  <frame name="Links" src="/links.htm" frameborder="0" framespacing="0" border="0">
    <frameset rows="20%,*>
      <frame name="Oben" src="/oben.htm" frameborder="0" framespacing="0" border="0">
      <frame name="Unten" src="/unten.htm" frameborder="0" framespacing="0" border="0">
    </frameset>
</frameset>


Erläuterung:
Mit diesem Beispiel würden keine Rahmen um die Frames mehr angezeigt. Außerdem wird der Abstand zwischen den Framefenstern (framespacing="0") ebenfalls auf 0 gesetzt.


Kommentar schreiben

Sicherheitscode
Aktualisieren