HTML Tutorial

Herzlich Willkommen im HTML Tutorial. In diesem Tutorial versuche ich, dir die Hypertext Markup Language etwas näher zu bringen und dir eine Einführung in die wichtigsten Funktionen mit an die Hand zu geben.

Dieses Tutorial besteht aus insgesamt 9 Kapiteln, die du dir hier am Bildschirm betrachten kannst. Alternativ kannst du dir das Tutorial hier auch als PDF-Dokument herunterladen (378 KB).

 

1. Einleitung

1.1 Was ist HTML

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 kannst du die Struktur deiner Webseite erstellen und sie mit Inhalt füllen. Das heißt Tabellen anlegen, Texte schreiben, Formulare erstellen, Bilder einfügen und vieles mehr. HTML bietet allerdings keine Möglichkeiten (mehr) zur grafischen Gestaltung. Dies wird inzwischen vollständig vom CSS-Stylesheet der Website gemacht.

 

1.2 Welche Programme brauche ich?

Heutzutage gibt es viele Editoren, mit denen du ohne HTML-Kenntnisse schnell und einfach eine Webseite basteln kannst. Jedoch ist es immer sinnvoll, sich doch ein wenig mit der Materie zu beschäftigen. Zum einen generieren viele der so genannten WYSIWYG-Editoren 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 oder ändern. Hilfreich dann, wenn man anderen Personen schnell etwas präsentieren möchte, oder der Editor gerade nicht zur Verfügung steht.

Womit du hingegen immer zurechtkommst – und dieses (oder ein ähnliches) Programm ist auf jedem Rechner installiert – ist ein ganz normaler Texteditor. Denn den brauchst du, 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 du während dem Arbeiten mit diesen Tools eine bessere Übersicht hast. Meine persönliche Empfehlung: Notepad++

Dieses Tutorial soll einen Einstieg in HTML ermöglichen. Eine komplette HTML-Referenz soll es dabei jedoch nicht darstellen. Wenn du eine komplette HTML-Referenz möchten, empfehle ich dir 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="https://webmasterparadies.de">Webmasterparadies.de</a>

 

In diesem Beispiel ist <a> 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="https://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 deiner 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 du erstellen möchtest. Neben HTML gibt es noch einige andere Attribute, die du hier einfügen können. Nähere Informationen dazu kannst du hier auf der Webseite im Bereich „Wie erstelle ich validen Code“ nachlesen.

Im Beispiel oben wäre nun ein HTML-Dokument in der Auszeichnungssprache HTML 4.01 angelegt worden. Das moderne HTML 5 wird schlicht mit <!DOCTYPE html> angegeben.

Hinweis:
In den folgenden Beispielen werde ich den Doctype aus Gründen der Übersichtlichkeit nicht weiter angeben. Dennoch solltest du 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 deiner 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 beachte dabei, dass der Text im Titel-Bereich deiner Webseite nicht weiter formatiert werden kann.

3.4 BODY-Tag

Hier kommt quasi der gesamte Inhalt deiner Webseite rein, der im Browser dargestellt werden soll. Dazu zählen Texte, Grafiken und Scripts. Eben einfach alles, was dem Seitenbesucher angezeigt werden soll.

3.5 Hintergrundfarbe und -bild

Früher hast du an dieser Stelle Informationen dazu gefunden, wie du ein Hintergrundbild einfügen oder die Hintergrundfarbe deiner Website bestimmen kannst. Da HTML inzwischen nicht mehr für das Styling der Website zuständig ist, werden diese Angaben im CSS-Stylesheet der Website gemacht.

Daher habe ich mich dazu entschieden, die entsprechenden Informationen an dieser Stelle zu entfernen und verweise auf das CSS-Tutorial.

 

4. Einfache Tags

4.1 Überschriften

Mit Hilfe von einigen einfachen Tags ist es möglich, Überschriften auf deiner Webseite zu erstellen.

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 kleiner wird, ohne weitere Formatierung, die Überschrift dargestellt.

Du solltest bei der Verwendung der Überschriften bedenken, dass diese semantisch geordnet sind. Das heißt, die Hauptüberschrift sollte mit <h1> beginnen, über <h2> zu <h3> gehen und irgendwann mit <h6>, der kleinsten Ebene, enden. Du musst dabei nicht immer bis zur kleinsten Ebene vordringen. Allerdings sollten keine Ebenen übersprungen werden. Weitere Ebenen (zum Beispiel ein „<h7>“) gibt es nicht.

 

4.2 Absätze und Zeilenumbrüche

Um den Textfluss zu fördern ist es sinnvoll, mit 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>

 

Hinweise:

Unterstrichener Text ist mit dem Tag <u> zwar möglich, sollte nach Möglichkeit aber nicht unbedingt verwendet werden. Es besteht eine Verwechselungsgefahr mit Hyperlinks, die standardmäßig ebenfalls unterstrichen dargestellt werden. Weiterhin gibt es noch die Tags <strong> und <em>. Dabei wird <strong> vom Browser wie <b> dargestellt und <em> wird dargestellt wie <i>. Es gibt jedoch Unterschiede in der Bedeutung der Tags.

Texte, die mit <strong> und <em> ausgezeichnet werden, erhalten eine semantische Bedeutung von Wichtigkeit. Das heißt, dass ein Text, der mit <strong> dargestellt wird, nicht nur fettgedruckt dargestellt wird, sondern auch semantisch wichtig ist.

 

4.4 Ausrichtung von Text, Grafiken, etc.

An dieser Stelle hättest du früher Informationen dazu gefunden, wie du die verschiedenen Elemente deiner Website (wie etwa Texte oder Grafiken) ausrichten kannst.

In HTML werden jedoch keine Elemente mehr formatiert, worunter auch die Ausrichtung von Elementen fällt. Dies wird inzwischen ausschließlich mit CSS realisiert. Daher habe ich mich dazu entschieden, die entsprechenden Erklärungen zu entfernen und verweise stattdessen auf das CSS-Tutorial.

 

5. Schrift-Formatierung

Schriftart und Schriftgröße eines Textes lässt sich mit Hilfe von CSS-Verändern. Der alte HTML-Gebrauch (z.B. <font face="Verdana"> anstelle von <span style="font:family:Verdana">) inzwischen als deprecated (sprich: veraltet) 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 kannst du Schriftarten auf deinen 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>

Bedenke, 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 du sehen kannst, 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="https://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 deinem Webserver im gleichen Verzeichnis befinden muss. Mit dem zweiten Link hingegen wird https://webmasterparadies.de angesteuert. Beide Links öffnen sich im gleichen Fenster bzw. Frame.

 

6.2 Verweisziele

Natürlich hast du 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="https://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 du beispielsweise mit Frames arbeitest und die „seite2.htm“ im gleichen Frame geöffnet werden soll. Mit dem Attribut target="_blank" erreichst du, dass die Zielseite in einem neuen Browserfenster geöffnet wird – sinnvoll zum Beispiel für Links auf fremde Seiten.

 

6.3 E-Mail-Adressen verlinken

Auch E-Mail-Adressen lassen sich mit einem Hyperlink versehen. Voraussetzung für diese Methode ist, dass der Benutzer auf seinem Computer ein E-Mail-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?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 E-Mail-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 E-Mail (beispielsweise eine Anrede) lässt sich mit dem dritten Link bewerkstelligen. Der vierte Link hingegen schickt eine E-Mail 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 du innerhalb einer langen HTML-Seite eine Möglichkeit zur Navigation zur Verfügung stellen möchtest, kannst du 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 du nun zum Ende dieser Datei scrollst, findest du dort zwei Links, mit denen du zu Kapitel 1, oder zum Anfang zurückspringen kannst.

Um Anker nun erfolgreich einsetzen zu können, musst du dabei folgendes Beachten: Der Anker wird über den Tag <a name="ankername"> definiert. Wenn du nun einen Link zu diesem Anker setzen möchtest, musst du 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 deine 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="https://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 du bei einer großen Grafik die angezeigte Größe beschränkst, ä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 deiner 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 Pop-up 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 formatieren

Tabellen lassen sich mit CSS recht einfach formatieren. Weitere Informationen dazu, findest du im CSS-Tutorial.

 

9. Frames

Dieser Abschnitt erklärt die Erstellung von Frames.

 

Ich rate jedoch dringend vom Einsatz von Frames ab. In HTML 5 werden Frames nicht mehr unterstützt. Frames gelten als veraltet. Auch Suchmaschinen haben Probleme, Inhalte von Frame-Seiten vollständig zu erfassen.

 

 

 

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 du siehst, 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öchtest du, 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 deine 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.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.