HTML Tutorial

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

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

 

1. Einleitung

1.1 Was ist HTML

Wer eine Website erstellen möchte, kommt dabei nicht ohne HTML aus. Denn HTML ist die 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 zudem 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 bspw. viele Editoren, mit denen du ohne HTML-Kenntnisse schnell und einfach eine Webseite basteln kannst. Es ist jedoch immer sinnvoll, sich doch ein wenig mit der Materie zu beschäftigen. Zum einen generieren dabei viele der so genannten WYSIWYG-Editoren aufgeblähten HTML-Code, der 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. Das ist hilfreich, wenn man bspw. 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 ist dabei: Notepad++

Dieses HTML 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, muss man zuerst die grundlegenden Begriffe erklären. HTML ist aufgeteilt in Tags, denen du entsprechend Attribute zuweisen kannst. Fast alle HTML Tags bestehen dabei aus einem einleitenden und einem abschließenden Tag. Tags werden immer mit spitzen Klammern markiert. Die Attribute werden schließlich diesen Tags zugeordnet. Der Text, der zwischen den Tags steht, ist dabei der Gültigkeitsbereich dieser Tags.

Beispiel:

<p>Schau dir doch zudem mal das HTML Tutorial auf <a href="https://webmasterparadies.de/tutorials/html-tutorial">Webmasterparadies.de</a> an.</p>

 

Erklärung:

Dieses Beispiel beinhaltet unter dem Strich die beiden HTML Tags a und p. Mit p definiert man dabei einen Text, mit a hingegen einen Hyperlink zu einer anderen Seite.

Baut man dieses Snippet in ein HTML Dokument ein, zeigt der Browser anschließend folgenden Text an: „Schau dir doch zudem mal das HTML Tutorial auf Webmasterparadies.de an.“ Das Wort „Webmasterparadies.de“ ist dabei mit einem Hyperlink versehen, der zum HTML Tutorial führt, da dieses zwischen den einleitenden und abschließenden a-Tags steht.

 

2.2 Attribute

Du kannst dabei den meisten HTML Tags entsprechende Attribute zuweisen. Unter einem Attribut versteht man bspw. zusätzliche Anweisungen, die der Browser beachten soll.

Beispiel:

<a href="https://webmasterparadies.de" target="_blank" rel="noopener">Webmasterparadies.de</a>

 

Du erzeugst, ebenso wie im ersten Beispiel, auch wieder einen Hyperlink zu einer anderen Website. Diesmal ist jedoch das zusätzliche Attribut target="_blank" hinzugekommen. Dieses Attribut bewirkt, dass sich die verlinkte Seite in einem neuen Browserfenster öffnet. Ohne diese Angabe öffnet der Browser die neue Website hingegen im gleichen Fenster.

Streng betrachtet ist das href="..." ebenfalls ein Attribut. Es bestimmt immerhin die Zielseite, auf die man verlinkt. Ohne diesen Wert funktioniert jedoch kein Hyperlink, so dass a und href immer zusammenstehen müssen.

 


Anzeige


 

3. Grundgerüst einer HTML-Datei

Jedes HTML Dokument ist im Grunde genommen gleich aufgebaut. Es enthält einen HEAD-, sowie einen BODY-Bereich. Der Header ist  dabei (mal vom Titel-Attribut abgesehen) für nicht sichtbare Angaben vorgesehen. So enthält er bspw. Meta-Angaben zu Auto oder eine Beschreibung für Google & Co. Im Body-Bereich hingegen kommt schließlich alles rein, was deine Besucher auf deiner Website sehen sollen. Darüber hinaus sollte jedes HTML Dokument zudem noch eine Angabe zur verwendeten HTML Sprache enthalten.

 

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 dabei an, welche Art von HTML-Dokument du erstellen möchtest. Neben HTML gibt es noch weitere Attribute, die du hier ebenfalls einfügen kannst. Nähere Informationen dazu kannst du im Artikel „Valider HTML-Code: Warum das wichtig ist“ nachlesen.

Mit dem Beispiel oben legst du somit ein HTML Dokument in der Auszeichnungssprache HTML 4.01 an. Das wesentlich modernere HTML 5 gibst du hingegen schlicht mit <!DOCTYPE html> an.

Hinweis:
In den folgenden Beispielen gebe ich den Doctype jedoch aus Gründen der Übersichtlichkeit nicht weiter an. 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 schließlich, 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 bspw. 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 - SEO, Webdesign und vieles mehr...</title>
</head>

 

Bitte beachte dabei, dass du den Text im Titel-Bereich deiner Webseite nicht weiter formatieren kannst.

 

3.4 BODY-Tag

In diesem Bereich gehört unter dem Strich alles, was der Browser anzeigen soll. Dazu zählen bspw. Texte, Grafiken und Scripts. Eben einfach alles, was du demzufolge dem Besucher deiner Website anzeigen möchtest.

3.5 Hintergrundfarbe und -bild

Früher hatte ich an dieser Stelle Informationen stehen, wie du ein Hintergrundbild oder die Farbe deiner Website ändern kannst. HTML ist jedoch schon lange nicht mehr für das Styling der Website zuständig. Dies wird hingegen nur noch mit CSS gemacht.

Ich habe mich daher dazu entschieden, diese Informationen hier zu entfernen und verweise lieber auf das CSS-Tutorial.

 

4. Einfache Tags

4.1 Überschriften

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

Beispiel:

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

<h1>Erste Überschrift</h1>
<h2>Zweite Überschrift</h2>
<h3>Dritte Überschrift</h3>
<h4>Vierte Überschrift</h4>
<h5>Fünfte Überschrift</h5>
<h6>Sechste Überschrift</h6>

</body>
</html>

 

Je höher der Wert, desto kleiner wird, ohne weitere Formatierung, die Überschrift dabei dargestellt.

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

Nähere Informationen zu diesem Thema kannst du zudem im Artikel Überschriften und SEO: Was ist zu beachten? nachlesen.

 

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 bspw. 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>

 

Erklärung:

Wie im Beispiel direkt beschrieben, sorgt die Verwendung des Tags <p> für einen neuen Absatz. Das Tag <br /> hingegen erzeugt einen einfachen Zeilenumbruch ohne Absatz. Die Abstände zwischen den Absätzen kannst du dabei mit CSS steuern.

 

4.3 Texthervorhebungen

Natürlich lässt sich Text in HTML dabei 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 im Normalfall ebenso 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 dabei 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.

 

4.5 Aufzählungszeichen und Listen

Du kannst Texte auch gliedern, indem du sie in Listen unterteilst. Du kannst sie dazu entweder in geordnete oder in ungeordnete Listen unterteilen. Ich stelle dir dazu beide Möglichkeiten nun vor.

4.5.1 Geordnete Liste

Eine geordnete Liste erstellt du mit den nachstehenden HTML Tags.

Beispiel:

<ol>
 <li>Diese Liste</li>
 <li>ist ein Beispiel</li>
 <li>für eine geordnete Liste.</li>
</ol>

 

Erklärung:

Mit dem Tag <ol> (ordered list) erstellst du dabei eine geordnete Liste. Der Browser zeigt diese Liste hierdurch, sofern du sie nicht anders formatierst, mit einer fortlaufenden Zahl an.

 

4.5.2 Ungeordnete Liste

Eine ungeordnete Liste ist ebenso einfach möglich. Der zu verwendende HTML Tag unterscheidet sich dabei nur minimal.

Beispiel:

<ul>
 <li>Während hingegen</li>
 <li>diese Liste ein Beispiel</li>
 <li>für eine ungeordnete Liste ist</li>
</ul>

 

Erklärung:

Mit dem Tag <ul> (unordered list) kannst du dabei eine ungeordnete Liste erstellen. Der Browser zeigt diese Liste schließlich mit einem ausgefüllten Kreis an, der als Aufzählungspunkt dient.

 

Du kannst die Listen darüber hinaus noch viel besser gestalten. Wie das funktioniert, kannst du dabei im Artikel Listen in HTML erstellen und gestalten nachlesen.

 

 

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">) ist inzwischen als veraltet gekennzeichnet. 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 dabei so lange weiter benutzt wird, bis der <span>-Tag wieder geschlossen wird. Das gilt im Übrigen ja sowieso für jeden HTML-Tag.

 

5.2 Schriftgröße

Auch die Schriftgröße lässt sich entsprechend 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.

 


Anzeige


 

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 Attribut 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">E-Mail schreiben</a></p>
<p><a href="mailto:name@domain.de?subject=Hallo">E-Mail mit vordefinierter Betreffzeile schreiben</a></p>
<p><a href="mailto:name@domain.de?body=Sehr geehre Damen und Herren">Eine E-Mail mit vordefiniertem Text schreiben</a></p>
<p><a href="mailto:name@domain.de,name2?cc=name@domain2.de">Diese E-Mail 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 dabei eine ganz normale E-Mail ohne vordefinierten Text an den genannten Empfänger. Der zweite Link hingegen gibt einen entsprechenden Text in der Betreffzeile vor. Einen vordefinierten Text in der E-Mail (bspw. eine Anrede) lässt sich schließlich 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 dazu 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 schließlich 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 im Folgenden in verschiedene „Kapitel“ aufgeteilt ist. Dazwischen finden sich dabei 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 immer über den Tag <a name="ankername"> definiert. Wenn du nun einen Link zu diesem Anker setzen möchtest, musst du dabei 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 einen Platzhalter an. Dieser soll dem Nutzer dabei zeigen, dass an dieser Stelle noch ein Bild geladen wird. Ist jedoch 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 dabei nur verkleinert dargestellt.

 

7.3 Alternativtexte für Grafiken

Es besteht auch die Möglichkeit, Alternativtexte für Grafiken zu verwenden. Alternativtexte werden dabei 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="..." verwendet man demzufolge für den Alternativtext, den Screenreader oder Suchmaschinen-Indexer benutzen. Das Attribut title="..." hingegen erzeugt ein kleines Pop-up, welches automatisch 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 im Grunde genommen 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.

 


Anzeige


 

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 dabei etwas anders aufgebaut, als eine Datei ohne Frames. Noch vor dem <body>-Tag wird hierzu das Frameset definiert. Nach der Frameset-Definition folgt ein <noframes>-Bereich, in dem dann schließlich auch der <body> Bereich eingefügt wird. Der <noframes>-Bereich ist überdies wichtig, um einen Alternativtext für Browser anzeigen zu können, die keine Frames unterstützen.

 

Hinweis:

Jedes Frame sollte, wie zuvor im Beispiel genannt, einen bestimmten Namen erhalten. Dies ist dabei später für die Navigation wichtig. Möchtest du, anhand des Beispiels, aus der Navigation heraus einen Inhalt öffnen, so muss dabei 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 aber 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 jedoch 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

Normalerweise können Frames vom Benutzer immer 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 jedoch 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

Normalerweise zeigt der Browser dabei Rahmen um Frames herum an. 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 dabei 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.