abnorm Media GmbH

Übersicht

Sie möchten innerhalb weniger Tagen HTML lernen? Dann sind Sie hier genau richtig. abnorm media bietet Ihnen nachfolgend ein kostenloses Tutorial zum schnellen und einfachen Lernen von HTML...





Einführung

Was ist HTML?

HTML ist sozusagen die "Standardprogrammiersprache" im Internet und dient zum Aufbau und der elementaren Gestaltung von Webseiten. Nahezu 90% der Seiten im Web sind in HTML geschrieben. Egal, ob Sie später noch andere Programmiersprachen, wie z.B. CSS, JavaScript, PHP, lernen und anwenden möchten, Sie benötigen immer HTML um die Webseiten dem Surfer übersichtlich aufgebaut und strukturiert anzeigen zu können.

Allerdings ist HTML keine richtige Programmiersprache, sondern nur eine Anwendungssprache, da es nicht mit Variablen, Funktionen und anderen Elementen arbeitet, die eine richtige Programmiersprache auszeichnen. Einfach gesagt: HTML kann keinerlei Berechnungen anstellen, was die Mindestanforderung an eine Programmiersprache ist.

Dieses Tutorial dient dazu, Ihnen alle notwendigen Kenntnisse zu verschaffen, damit Sie selbst Webseiten erstellen können. Es werden alle regelmäßig genutzten HTML-Codes und deren Eigenschaften erklärt. Sicher gibt es noch viele weitere HTML-Codes. Diese werden jedoch von kaum einem Programmierer eingesetzt oder funktionieren nicht in jedem Browser und werden daher nicht in diesem Tutorial erwähnt. Am Ende des Tutorials erfahren Sie, wo Sie weitere Informationen zu den HTML-Codes finden, die nicht in diesem Tutorial beschrieben wurden.

Erste Schritte

Um überhaupt Webseiten erstellen zu können, benötigen Sie zuerst einen (HTML-)Editor, wie z.B. Notepad++. Selbstverständlich können sie auch jeden anderen Editor verwenden, der sich zur Programmierung von Webseiten eignet.

Möchten Sie die Website ins Internet stellen, benötigen Sie noch einen so genannten FTP-Client. Hier empfehlen wir Ihnen WinSCP. Mit dem FTP-Client laden Sie die Dateien auf einen so genannten Webspace oder Server. Günstige Anbieter für Webspaces für weniger als 1 Euro je Monat finden Sie überall im Web. Für dieses Tutorial können Sie jedoch das Ergebnis nahezu aller Schritte direkt auf Ihrem PC ansehen, ohne dass Sie die Website ins Internet laden.

Außerdem sollten Sie mehrere Browser (z.B. Microsoft Internet Explorer, Mozilla Firefox, Opera, Safari, Google Chrome) auf Ihren PC installiert haben, um Ihre Webseite damit betrachten zu können, da es eventuell kleine Differenzen bei der Darstellung geben kann.



Das Grundprinzip von HTML

Der HTML-Code

Ein HTML-Code ist in der Regel so aufgebaut:
<CODE>
In dem Beispiel ist das Wort CODE Platzhalter für einen HTML-Code. Die Zeichen < und > zeigen dem Browser, dass es sich hier um einen HTML-Code handelt und nicht um normalen Text.

</CODE>
Das ist das Ende des HTML-Codes. Dass es sich hier um einen schließenden HTML-Code handelt, wird durch / (=Slash) angezeigt.
Achtung! Nahezu alle HTML-Codes haben einen Anfang und ein Ende. Auf die wenigen Ausnahmen, dir nur einen Anfangstag (=Anfangscode) haben, wird in diesem Tutorial hingewiesen. In XHTML (= eine verbesserte HTML-Variante) haben ALLE HTML-Codes auch einen Endtag (=Endcode).

Ein vollständiger HTML-Code sieht also so aus:
<CODE></CODE>

Zwischen dem Anfang des Codes (<CODE>) und dem Ende (</CODE>) können Texte und/oder weitere HTML-Codes stehen.
Beispiele:
<CODE> Text </CODE>
<CODE><CODE2></CODE2></CODE>
<CODE> Text <CODE2> Text </CODE2></CODE>
Diese Verschachtelung von Codes ist beliebig erweiterbar.

Attribute

Vielen der HTML-Codes können auch noch so genannte Attribute (=Eigenschaften) zugewiesen werden.
Beispiel:
<CODE ATTRIBUTNAME="ATTRIBUTWERT"></CODE>
Hier wird einfach das Attribut (ATTRIBUTNAME="ATTRIBUTWERT") getrennt durch ein Leerzeichen in den Anfangstag des HTML-Codes geschrieben. Zuerst wird immer der Name des Attributs (ATTRIBUTNAME) genannt. Danach folgt ein Gleichheitszeichen und in Anführungszeichen steht dann der Wert des Attributes (ATTRIBUTWERT.

Selbstverständlich kann ein HTML-Code auch mehrere Attribute haben. Diese werden ebenfalls durch ein Leerzeichen voneinander getrennt.
Beispiel:
<CODE ATTRIBUT1="WERT1" ATTRIBUT2="WERT2" ATTRIBUT3="WERT3"></CODE>

Viele der HTML-Codes haben unterschiedliche Attribute, die wiederum unterschiedliche Werte haben können bzw. dürfen. Welcher HTML-Code welche Attribute hat und wie diese eingesetzt werden, wird in diesem Tutorial beim jeweiligen HTML-Element erklärt.

Hinweis! Bei den HTML-Codes und den Attributsnamen ist es egal, ob Sie diese in Groß- oder Kleinbuchstaben schreiben.
Achtung! Bei den Attributwerten ist es nicht egal, ob diese groß oder klein geschrieben werden!



Das Grundgerüst

Der Dokumenttyp

Zu Beginn benötigt jedes HTML-Dokument einen so genannten Dokumenttyp. Dieser wird in die erste Zeile des HTML-Dokuments geschrieben und gibt dem Browser sowie dem Gültigkeitstest von W3C (=Internetstandard) Informationen darüber, in welcher HTML-Version das aktuelle Dokument geschrieben ist und wie die einzelnen Elemente dargestellt werden müssen.

Der Dokumenttyp sieht bei unseren HTML-Dokumenten immer so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Was bedeutet dieser Code?
Das HTML zeigt dem Browser hier, dass es sich um normales HTML und nicht um XHTML, der verbessern HTML-Version, handelt.
4.01 gibt die verwendete HTML-Version an. Momentan ist dies die aktuellste HTML-Version. Version 5 ist jedoch schon im Test.
Traditional sagt hier, dass es sich um die gebräuchliche (traditionelle) Programmierung handelt. Hier gibt es alternativ noch Frameset oder gar keine Angabe, wobei Traditional mit ungefähr 99% in nahezu allen HTML-Dokumenten verwendet wird.
http://www.w3.org/TR/html4/loose.dtd gibt hier noch an, wo der verwendete Programmierstandard bei W3C bzw. W3 zu finden ist.

Der Seitenkopf

Jedes HTML-Dokument hat einen so genannten Head (=Seitenkopf). Dieser Head ist für den Surfer unsichtbar, wird jedoch für einige wichtige Angaben bezüglich der Webseite benötigt. Hier stehen z.B. der Titel der Webseite, der oben im Browser angezeigt wird, Informationen für Suchmaschinen oder welche CSS- oder JavaScript-Dateien importiert werden müssen.

Zunächst beschäftigen wir uns nur mit dem Titel der Webseite. Informationen für Suchmaschinen werden wir uns erst in einem der letzten Kapitel dieses Tutotrials ansehen...

<head>

Um dem Browser zeigen zu können, welcher Teil des HTML-Dokuments der für den Surfer unsichtbare Head und welcher Teil der Body (=Seiteninhalt) ist, benötigen wir folgenden Code:
<head></head>

Zwischen diesen Code werden die Informationen geschrieben. Dies geschieht mit Hilfe weiterer Codes und sieht dann in etwa so aus: 
<head>
        <CODE>
        <CODE>
        <CODE>
        ...
</head>

<title>

Wie oben bereits erklärt, wird im Head des HTML-Dokuments der Titel der Webseite angegeben, der später oben im Browser des Surfers zu sehen ist. Dies geschieht mit folgendem HTML-Code: 
<title>TEXT</title>
Anstelle des Wortes TEXT kann von Ihnen ein beliebiger Text gewählt werden, der dann in der Titelleiste des Browsers angezeigt wird, sobald dieses HTML-Dokument aufgerufen wird.

Der (vollständige) Head eines HTML-Dokuments mit einem Titel sieht dann so aus: 
<head>
         <title>abnorm.de - Webdesign & Programmierung</title>
</head>

Der Seiteninhalt

Neben dem für den Surfer unsichtbaren Head des HTML-Dokuments gibt es noch den so genannten Body, der den eigentlichen Inhalt der Webseite enthält. Hier stehen nun sämtliche Codes und Texte, die der Surfer später beim Betrachten der Seite sehen soll.

<body>

Um dem Browser zu zeigen, welcher Teil des HTML-Dokuments der Body ist, benötigen wir folgenden Code: 
<body>
        <CODE>
        <CODE>
        <CODE>
        ...
</body>
Zwischen dem Anfang und dem Ende des Body-Tags wird der eigentliche Inhalt durch Text und weitere HTML-Codes definiert.

Attribute des body-Tags

Folgende Attribute kann der body-Tag haben:
Achtung! Die Attribute bgcolor und background können nie gleichzeitig verwendet werden, da der Hintergrund der Webseite nur eine Grafik ODER eine Farbe sein kann.

Ein Beispiel für einen Body-Code mit Attributen wäre z.B.: 
<body link="red" alink="blue" vlink="blue" text="black" bgcolor="white">
        <CODE>
        <CODE>
        <CODE>
        ...
</body>

Das komplette Grundgerüst

Nachdem wir uns nun den Head und den Body einer Webseite angesehen haben, wird nun die Platzierung dieser im HTML-Dokument beschrieben. Zuerst benötigen wir jedoch noch einen weiteren HTML-Code, der dem Browser sagt, dass es sich bei der geladenen Webseite um ein HTML-Dokument handelt.

<html>

Beispiel: 
<html></html>

Dieser Code umfasst dem kompletten restlichen Code des HTML-Dokuments. Zwischen dem Anfang und dem Ende des html-Tags stehen zuerst der Head- und dann der Body-Code. Das Grundgerüst einer Webseite sieht also so aus: 
<html>
        <head>
                 <title>TITEL</title>
        </head>
        <body>
                <CODE>
                <CODE>
                <CODE>
                ...
        </body>
</html>

Im Regelfall akzeptiert der Browser auch Webseiten, die weder einen html-Tag noch einen head- oder body-Tag haben, also der eigentliche Code des Inhalts unvermittelt beginnt. Dies ist jedoch kein gültiges (valides) HTML-Dokument und kann eventuell bei manchen Browsern zu Fehlern führen und wird auch von Suchmaschinen wie Google nicht so behandelt, wie valide Webseiten behandelt werden.



Elementare Infos

Leerzeichen, Tabulatoren, usw.

Wie Sie vielleicht bereits festgestellt haben, werden bei einer Webseite so genannte "unsichtbare Zeichen" wie Tabulatoren (auch Tabs genannt, werden mit der Taste gemacht, die zwei entgegengesetzten Pfeile hat und sich auf der linken Seite der Tastatur befindet), Leerzeichen und Zeilenumbrüche nicht so dargestellt, wie diese im HTML-Dokument stehen. Wenn Sie im HTML-Dokument eines dieser Zeichen machen, hat dies keinerlei Auswirkungen auf das Aussehen der Webseite. D.h. wenn Sie den HTML-Code mit Leerzeichen oder Tabulatoren einrücken, oder mit der Enter-Taste eine neue Zeile beginnen, wird dies beim Anzeigen der Webseite im Browser nicht gezeigt.

Hinweis! Bei den Leerzeichen gibt es eine Besonderheit. Stehen diese zwischen normalen Text, also nicht zwischen zwei HTML-Codes, wird auch auf der Webseite ein Leerzeichen sichtbar.
Achtung! Wenn Sie mehrere Leerzeichen hintereinander machen, auch beim Schreiben von normalem Text, wird immer nur eines auf der Webseite selbst angezeigt werden.

Wenn Sie jedoch möchten, dass mehrere Leerzeichen hintereinander angezeigt werden, so müssen Sie diese mit folgendem Code machen:
&nbsp;
Dieser Code steht für ein Leerzeichen, wiederholen Sie diesen mehrmals hintereinander, werden auch auf der eigentlichen Webseite mehrere Leerzeichen direkt hintereinander angezeigt.

Sonderzeichen

In HTML gibt es eine Reihe von Sonderzeichen, die Sie nicht einfach mit den normalen Zeichen Ihrer Tastatur in den HTML-Code schreiben sollten, da es hier zu Fehlern kommen könnte. Bestes Beispiel hierfür sind das Größer- und Kleinerzeichen, da hier der Browser annehmen könnte, dass es sich um einen HTML-Code handelt, wenn Sie eines dieser Zeichen normal eingeben. Aber auch die Umlaute sind ein gutes Beispiel für Sonderzeichen, denn diese existieren ja bekanntlich nur bei uns in Deutschland und werden daher von Browsern, die kein deutsches Sprachpaket enthalten, als kryptische Zeichen dargestellt.

Alle Sonderzeichen in HTML beginnen mit einem &-Zeichen und enden mit einem ; (=Semikolon oder Strichpunkt). Zwischen diesen beiden Zeichen stehen immer noch bestimmte Buchstaben, die dem Browser dann sagen, um welches Sonderzeichen es sich hier handelt.

Achtung! Die hier beschriebenen Sonderzeichen sind nur im normalen Text Ihrer Webseite zu verwenden. Diese sollten Sie nicht in den HTML-Codes oder Attributen verwenden!

< und >

Wenn Sie das Kleiner-als-Zeichen auf ihrer Webseite darstellen möchten, so müssen Sie dazu folgenden Code eingeben:
&lt;
Zum Darstellen des Größer-als-Zeichen sollten Sie diesen Code verwenden:
&gt;

Leerzeichen

Wie bereits im vorherigen Kapitel beschrieben können Sie Leerzeichen mit nachfolgendem Code darstellen. Dies sollten Sie jedoch nur dann tun, wenn Sie mehrere Leerzeichen direkt hintereinander benötigen. Sollten Sie einen normalen Text schreiben, bei dem zwischen den einzelnen Worten nur ein Leerzeichen ist, können Sie dies in HTML auch wie in jedem anderen Programm mit der Leertaste tun.
&nbsp;

Das &-Zeichen

Wenn Sie das &-Zeichen in Ihren Dokument verwenden möchten, so sollen Sie stattdessen folgenden Code dafür verwenden:
&amp;

Das Euro-Symbol (€)

Auch das Euro-Symbol zählt zu den Sonderzeichen und hat einen eigenen Code.
&euro;

Das Paragraph-Symbol (§)

Der Code für das Paragraph-Symbol ist:
&sect;

Das Copyright-Symbol (©), das TM-Symbol (™) und das Eingetragene-Marke-Symbol (®)

Zur korrekten Darstellung des Copyright-Symbols ist folgender Code nötig:
&copy;
Der Code für das ™-Symbol:
&trade;
Zur Verwendung des ®-Symbols:
&reg;

Die doppelten Anführungszeichen

Auch für die doppelten Anführungszeichen gibt es in HTML einen besonderen Code:
&quote;

Die Umlaute

Für die Umlaute existiert folgender Code:
&uuml;
Der Umlaut, der mit diesem Code angezeigt wird, ist das kleine ü. Wenn Sie das erste u dieses Codes gegen ein a austauschen, wird daraus ein ä und wenn Sie es mit einem o ersetzen, wird ein ö angezeigt.
Sie sehen also, dass in der Buchstabenkombination für Umlaute immer der normale deutsche Vokal für den jeweiligen Umlaut steht und danach uml (für Umlaut) folgt.
Wenn Sie Großbuchstaben, also ein großes Ä, Ü oder Ö darstellen möchten, machen Sie diesen Vokal groß schreiben.
Beispiel für ein großes Ä:
&Auml;

Das scharfe S (ß)

Auch das scharfe S existiert nur im Deutschen und hat deshalb einen eigenen Code:
&szlig;


Hinweis! Wenn Sie eines der oben genannten Sonderzeichen in Ihrem HTML-Dokument machen möchten, müssen Sie nicht zwingend die Codes dafür verwenden, sondern können diese auch wie gewohnt ganz normal mit Ihrer Tastatur machen. Bedenken Sie jedoch, dass dies zu Darstellungsproblemen bei nicht-deutschsprachigen Browsern kommen kann oder auch, wenn Ihre Webseite auf einem Server gehostet wird, der nicht den deutschen Zeichensatz "ISO-8859-1" verwendet.

Achtung! Es gibt noch viele weitere Sonderzeichen in HTML. Diese werden hier jedoch nicht aufgeführt, da sie extrem selten benötigt werden.

Farben

Da eine Webseite in der Regel aus mehreren verschiedenen Farben und nicht nur aus schwarzen und weißen Inhalten besteht, erfahren Sie hier mehr über die so genannten Farbcodes in HTML.

Es gibt zwei verschiedene Arten von Farbcodes...

Englische Namen

Zur Darstellung von Farben gibt es in HTML die Möglichkeit die gewünschte Farbe mit dem englischen Namen dieser auszuwählen. Diese Variante bietet jedoch nur begrenzt viele Farben, nämlich 16 Stück.

Die Namen dieser Farbcodes sind:
aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red und yellow

Hexadezimalcodes

Die Hexadezimalcodes bieten nahezu unbegrenzt viele verschiedene Farben für Ihre Webseite. Hier können Sie zwischen 156 - also 11390625 - verschiedenen Farben wählen.

Wenn Sie eine Farbe im Hexadezimalcode angeben möchten, so müssen Sie hier immer zuerst ein # machen, um dem Browser zu zeigen, dass es sich hier um einen Hexadezimalcode handelt. Anschließend folgen sechs Zahlen bzw. Buchstaben, die die Farbmischung und die Farbstärke angeben. Hier ist zu beachten, dass die Zahlen 0 bis 9 und nur die Buchstaben von A bis F zur Verfügung stehen, wobei folgende Reihenfolge gilt:
0123456789ABCDEF

Hier steht 0 für ganz dunkel und F für ganz hell. Die Farbe Schwarz hat somit den Hexadezimalcode #000000 und die Farbe Weiß den Code #FFFFFF.

Hinweis! Es ist egal, ob Sie die Buchstaben groß oder klein schreiben.

Um noch andere Farben darstellen zu können, müssen Sie wissen, wie die Farbmischung der Codes aufgebaut ist. Die Hexadezimalcodes bestehen aus dem bekannten RGB-System (rot, grün, blau). Das bedeutet, dass die ersten zwei Zeichen des Hexadezimalcodes für den Rotanteil der Farbe stehen, die nächsten zwei für den Grünanteil und die letzten zwei für den Blauanteil. Die Farbe, die später im Browser angezeigt ist, ist also die Mischung aus den Farben rot, grün und blau sowie deren Farbintensität.

Achtung! Die Farben werden nicht aus den normalen aus der Kunst bekannten Grundfarben rot, gelb und blau gemischt, sondern aus rot, grün und blau!

Das normale Rot hat somit folgenden Hexadezimalcode:
#FF0000
Die Farbe Grün:
#00FF00
Die Farbe Blau:
#0000FF
Wenn Sie nun Gelb darstellen möchten, müssen Sie die einzelnen Farben mischen. Das sieht dann so aus:
#FFFF00
Auf Basis dieses Wissens können Sie nun alle Farben selbst mischen. Jedoch hat jeder normale Mensch keine Ahnung, welche Farbe beispielsweise der Code #FF7F00 oder #00C070 darstellt. Aus diesem Grund finden Sie in nahezu jedem Programm zum Erstellen von Webseiten ein Auswahlfeld, bei dem Sie Ihre gewünschte Farbe auswählen und anklicken können. Diese Farbe wird dann automatisch als Hexadezimalcode eingefügt oder Ihnen wird der dazugehörige Code für diese Farbe angezeigt.

Einrücken

Ihre Webseiten werden später mehrere hundert Zeilen Code umfassen. Da dieser dann extrem unübersichtlich für Sie wird, erfahren Sie hier, wie man richtig einrückt um den Überblick über den eigenen Code zu bewahren.

Zum Einrücken benötigen Sie die Tabulatortaste, welche Sie links auf Ihrer Tastatur finden (enthält zwei entgegengesetzte Pfeile).

Eingerückt wird immer dann, wenn ein HTML-Code in einem anderen steht.

Beispiel mit html, head, title und body: 
<html>
         <head>
                 <title>Titel der Seite<title>
         </head>
         <body>
                 text... text... text...
                 text... <b>text...</b> text...
                 text... text... text...
         </body>
<html>
Hier sieht man sofort, dass html zwei Tochterelemente hat, nämlich head und body, da diese eingerückt sind.

head hat nur ein Tochterelement: title.

body hat in diesem Fall keine weiteren Tochterelemente, sondern nur Text. In der Regel wird body immer noch weitere Tochterelemente haben, welche dann wiederum eingerückt werden müssen.

Wenn Sie sich das Beispiel oben ansehen, dann ist sehr schnell zu sehen, wo body wieder endet, da es auf der selben "Ebene" liegt wie der Anfang. So müssen Sie nicht ewig nach dem Ende eines HTML-Elements suchen. Dies wird vor allem später viele Vorteile mit sich bringen, wenn Sie HTML-Elemente verwenden, die auch mehrmals, ineinander verschachtelt, verwendet werden.

Hinweis! In dem Beispiel sehen sie auch den b-Code. Dieser macht den darin enthaltenen Text fett. Da dieser Code sich nur auf ein kleines Textstück bezieht, wird hier nicht eingerückt!

Dateipfade

Zum Erstellen von Webseiten benötigt man immer wieder Dateipfade. Dies ist z.B. nötig, um anzugeben, wo ein Link hinführen soll oder wo ein Bild zu finden ist. Dabei gibt es verschiedene Sachen zu beachten...

Aufbau einer Web-Adresse (=URL/URI)

URL bedeutet Uniform Resource Locator und gibt an, wo sich ein bestimmtes Objekt oder eine bestimmte Webseite im Internet befindet. Alternativ wird im Web dazu noch der Begriff URI (=Uniform Resource Identifier) oder Webadresse verwendet.
So sieht eine Beispiel-URL aus:
http://www.meineseite.de/webseiten/seite1.htm#absatz2
http:// steht hier für das Protokoll, das verwendet werden soll um diese Seite aufzurufen. Alternativ dazu gibt es noch https:// (für eine sichere, verschlüsselte Verbindung) und ftp:// (für einen FTP-Zugang).
www. ist die Subdomain. Standardmäßig verwenden alle Webseiten das www. am Anfang. Dieses kann in der Regel jedoch weggelassen werden und man kann trotzdem auf dieselben Inhalte zugreifen. Sollte anstatt des www. z.B. tutorials. stehen (wie z.B. für https://tutorials.abnorm.de/html/4_5_dateipfade.html), handelt es sich hier um eine so genannte Subdomain. Dies ist eine weitere Unterteilung der Domain.
meineseite.de ist die eigentliche Domain bestehend aus einem beliebigen Text und dem jeweiligen Länderkürzel.
webseiten/ ist ein Unterordner oder Verzeichnis der Domain, ähnlich den Ordnern auf einem normalen PC.
seite1.htm ist der Name der Datei mit dazugehörigem Dateityp. Hier könnten auch Bilddateien, Musikdateien, PDF-Dateien, usw. stehen. Es ist egal, ob Sie bei Ihren HTML-Dokument den Dateitypen .html oder .htm nennen. 90% der Programmierer nutzen jedoch .html als Dateitypen.
#absatz2 ist eine so genannte Sprungmarke. Diese sagt dem Browser, dass er nach dem Laden der Webseite zur Stelle "absatz2" springen soll. Diese Stelle muss jedoch vorher im HTML-Dokument festgelegt worden sein.

Achtung! Sämtliche Bestandteile der URL dürfen nur die normalen Buchstaben (keine Umlaute!), die Zahlen 0 bis 9 und Binde- bzw. Unterstriche enthalten. Sollten Sie dies nicht beachten, kann die Seite eventuell nicht aufgerufen werden, egal ob diese existiert oder nicht!

Dateien und Verzeichnisse

Eine Datei erkennt man daran, dass diese einen Punkt enthält, nach dem dann der Dateityp (z.B. html, jpg, gif, pdf, ...) folgt. Ein Verzeichnis endet meist mit einem Slash (/). Dies ist jedoch nicht zwingend nötig.
Beispiel:
http://www.meineseite.de/webseiten
Hier fehlt der Slash am Ende, jedoch handelt es sich hierbei trotzdem um einen Ordner bzw. ein Verzeichnis, da kein Punkt mit Dateityp im Namen zu finden ist.

Auch die eigentliche Domain http://www.meineseite.de ist ein Verzeichnis, nämlich der Hauptordner bzw. das Hauptverzeichnis, denn es gibt ja keinen übergeordneten Ordner mehr. Viele Browser fügen deshalb automatisch einen Slash am Ende hinzu, wenn Sie eine Domain eingeben.

Automatische Startseite

Sicher kennen Sie das, dass Sie eine Domain eingeben und dann wird auch gleich eine Webseite angezeigt, obwohl Sie kein Verzeichnis und auch keine Datei angegeben haben.

Sie werden auch feststellen, dass dies bei Ihnen nicht funktionieren wird, da es sich bei der Domain um ein Verzeichnis handelt, wie bereits oben beschrieben, und der Browser ja nicht weiß, welche Ihrer Seiten die eigentliche Startseite ist. Stattdessen wird wahrscheinlich sogar eine Fehlermeldung mit dem Code 403 Forbidden angezeigt, die besagt, dass in diesem Verzeichnis keine Standarddatei gefunden wurde oder bei den Dateirechten etwas nicht stimmt. In Ihrem Fall trifft aber ersteres zu.

Damit beim Aufrufen der bloßen Domain auch gleich eine Datei geladen wird, müssen Sie die Datei, die zu Beginn geladen werden soll index.html oder index.htm nennen. Sollten Sie beide Versionen - also .html und .htm - verwenden, ist die .html-Version höherrangig. Alternativ zu index.html gibt es auch noch start.html oder default.html, wobei index.html wiederum höherrangig ist und start.html und default.html nicht von jedem Browser gefunden werden. Deshalb sollten sie nur index.html verwenden!

Selbiges gilt auch für normale Verzeichnisse. Verlinken Sie z.B. auf http://www.meineseite.de/webseiten/, werden Sie auch die 403 Forbidden Fehlermeldung erhalten, wenn dieser Ordner keine index.html enthält. Verlinken Sie jedoch direkt auf eine Datei, wie z.B. http://www.meineseite.de/webseiten/seite1.htm, dann wird diese gefunden, da Sie ja eine Datei angegeben haben.

komplette URL

Sie könnten jedes Mal, wenn Sie Bild oder einen Link angeben möchten, die komplette Adresse dazu angeben, z.B. http://www.ihreseite.de/bilder/bild1.jpg, http://www.ihreseite.de/bilder/bild2.jpg, ...

Diese Variante hat jedoch drei Nachtteile:
  1. Alle Programmierer sind in der Regel ziemlich faul und möchten nicht jedes Mal die komplette Adresse zu Ihrer Webseite eingeben müssen.
  2. Dies funktioniert nur, wenn Sie die Webseite online gestellt haben und diese dann dort anschauen. Wenn Sie die Webseite jedoch auf Ihrem PC zu Testzwecken ansehen wollen, wird dies nicht funktionieren.
  3. Ändert sich die Adresse Ihrer Webseite beispielsweise von http://www.ihreseite.de in http://www.meineseite.de, müssen sie die die Dateipfade in allen Dateien wieder ändern. Das ist sehr aufwändig!
Achtung! Wenn Sie die komplette URL verwenden, dann beginnen Sie diese immer mit http:// und nicht gleich mit www., da der Browser sonst denkt, dass es sich um ein Verzeichnis handelt und die Seite kann nicht gefunden werden!

Achtung! Sollten Sie eine Seite einer anderen Webseite aufrufen möchten, müssen Sie immer die komplette URL angeben. Beispiel: Ihre Seite ist http://www.ihreseite.de und Sie möchten http://www.andereseite.de aufrufen. Hier ist die komplette URL der anderen Seite notwendig!

Beginnender Slash (/)

Ein Slash ist der deutsche Schrägstrich. Sollten Sie bei Links oder bei Bildern auf interne - also unter Ihrer Domain befindliche - Inhalte verweisen wollen, hilft Ihnen der Slash, um diese Adresse abzukürzen.

Steht der Slash am Anfang einer Adresse, wie in nachfolgendem Beispiel, so bedeutet dies, dass der Browser im Hauptverzeichnis der Domain nachschauen soll, um das gesuchte Element zu finden. Der beginnende Slash ersetzt also die eigentliche Domain.
Beispiel:
/webseiten/seite1.htm
Geben Sie in Ihren HTML-Dokumenten diese Adresse z.B. für einen Link ein, sieht der Browser im Hauptverzeichnis nach. Das ist in diesem Fall die Domain, weil die Domain keinen Überordner oder -verzeichnis haben kann. Nun folgen der Ordner webseiten/ und die Datei seite1.htm. Dem Browser wird also gesagt, dass er in das Hauptverzeichnis (http://www.meineseite.de/) gehen soll, dann in den Ordner webseiten/, der sich darin befindet und anschließend die Datei seite1.htm öffnen, die sich in diesem Ordner befindet.

Bei dieser Variante sparen Sie sich also das ständige Eingeben des Protokolls und der Domain. Außerdem funktioniert die Webseite auch dann noch, wenn sich die Domain Ihrer Webseite ändert, da Sie hier ja keine Domainangaben machen.

Hinweis! Wenn Sie die Webseite auf Ihrem eigenen PC ansehen und die Dateipfade mit dem Slash beginnen, wird Ihr PC auch im Hauptordner suchen. Dies ist bei Windows-PCs das Festplatten-Laufwerk (z.B. C:). Befindet sich Ihre Webseite also nicht direkt im Ordner C:, können Sie diese offline, auf Ihrem PC, nicht komplett richtig ansehen, sondern nur im Web.

Ein Punkt + Slash (./)

Wenn Sie eine Datei aufrufen möchten, die sich im selben Verzeichnis befindet, wie die aktuelle, benötigen Sie ./ dazu.
Beispiel:
./seite2.htm
Diese Anweisung sagt dem Browser, dass er nach seite2.htm im selben Ordner suchen soll, in dem sich auch die aktuell aufgerufene Datei befindet. Dies funktioniert also nur, wenn die aktuelle Seite auch im gleichen Ordner ist, wie die neu aufgerufene.

Hinweis! Die Angabe von ./ für das gleiche Verzeichnis ist nicht zwingend nötig. Alle Browser suchen auch im gleichen Ordner, in dem sich das aktuelle Dokument befindet, wenn kein ./ angegeben wurde, sondern für das Beispiel oben einfach nur seite2.htm.

Zwei Punkte + Slash (../)

Um eine Datei aufzurufen, die sich im "Elternordner" befindet, müssen Sie ../ verwenden.
Beispiel:
../index.htm
Bei diesem Beispiel wird der Browser angewiesen die Datei index.htm im übergeordneten Verzeichnis des aktuellen HTML-Dokuments zu suchen. Dies funktioniert nur dann, wenn sich die aufzurufende Datei direkt im nächst höher gelegenen Ordner befindet.

Hinweis! Selbstverständlich kann das ../ auch wiederholt werden, wenn Sie eine Datei aufrufen möchten, die in einem zwei oder mehr Ebenen höher gelegenen Verzeichnis liegt. Beispiel: ../../../test.html ruft die Datei test.html auf, die vom aktuellen Dokument aus gesehen drei Ordner höher liegt.

Grafiktypen

Im Web werden nahezu überall Grafiken verwendet, jedoch ist den meisten Surfern nicht bekannt, dass hier nur drei verschiedene Grafiktypen verwendet werden und welche Vor- und Nachteile diese haben.

JPG bzw. JPEG

Dieser Grafiktyp hat die Dateiendung .jpg oder .jpeg und wird überwiegend für Fotos oder hochauflösende Webseitenelemente verwendet. Allerdings können JPGs keine durchsichte (=transparente) Stellen enthalten und benötigen in der Regel mehr Speicherplatz als die anderen beiden Grafiktypen.

GIF

GIF (mit der Dateiendung .gif) ist momentan der am meisten verwendete Dateityp im Web. GIFs können transparente Stellen enthalten, animiert sein (z.B. Banner) und benötigen weniger Speicherplatz aufgrund eines Speicherverfahrens, das einer GIF-Datei nur die nötigsten Farben zuweist. Nachteil dieses Dateityps ist, dass Fotos keine gute Qualität haben.

PNG

PNG (mit der Dateiendung .png) ist der neuste Grafiktyp und soll die Vorteile von JPG und GIF vereinen. Dieser Grafiktyp speichert Fotos in guter Qualität und kann transparente Stellen darstellen. Nachteile sind, dass die transparenten Stellen in älteren Browsern grau dargestellt werde und dass PNGs mehr Speicherplatz benötigen als GIFs.

Achtung! Es gibt noch einige andere Grafiktypen, die auch ab und an einmal im Web verwendet werden. Diese sind jedoch äußerst selten.

Speicherplatz

Im Web sollte immer darauf geachtet werden, dass Grafiken so wenig Speicherplatz wie möglich benötigen, da nicht jeder Internetnutzer einen schnellen DSL-Anschluss hat und sonst beispielsweise bei einem 5MB großen Photo bis zu 10 Minuten warten muss, bis dieses in seinem Browser vollständig geladen ist.

Hinweis! Viele Grafikprogramme haben deshalb eine Funktion, um weboptimierte Grafiken auszugeben, die dann weniger Speicherplatz benötigen.

Achtung! Wenn bei einer Grafikdatei der benötigte Speicherplatz reduziert wird, so leidet die Qualität der Grafik darunter. Dies ist bis zu einem gewissen Maße nicht sichtbar. Wird der Speicherplatz einer Grafik jedoch extrem verkleinert, so verliert diese Datei sehr stark an Schärfe und es werden weniger unterschiedliche Farben verwendet.

Dateirechte

Wie bereits bei den Dateipfaden angesprochen, kommt es ab und an zu der Fehlermeldung 403 Forbidden, auch dann, wenn eine index.html existiert.
Dies ist dann der Fall, wenn die Datei nicht genügend Rechte hat.

Bei den Zugriffsrechten einer Datei gibt es zu beachten, dass diese für den Besitzer, für Gruppen und für die Besucher gesetzt werden müssen. Den Dateien können Lese- (r), Schreib- (w) und Ausführrechte (x) gegeben werden.
r hat den Wert 4, w hat den Wert 2, x hat den Wert 1
Daraus ergibt sich folgende Liste:
--- = 0 (keine Rechte)
--x = 1 (nur ausführen)
-w- = 2 (nur schreiben)
r-- = 4 (nur lesen)
r-x = 5 (lesen und ausführen)
rw- = 6 (lesen und schreiben)
rwx = 7 (lesen, schreiben und ausführen => alle Rechte)
Die Rechte können meist in Form von Buchstaben ODER Zahlen angegeben werden, wobei die meisten FTP-Programme Zahlen bevorzugen.

Hinweis! Viele FTP-Programme erlauben auch das Setzen von Rechten, indem man diese einfach anklickt und dann speichert.

Die Rechte einer Datei sind in folgender Reihenfolge aufgebaut (ohne die senkrechten Striche):
Besitzer|Gruppe|Besucher
Diese drei Teile sind dann jeweils so aufgebaut (wie bereits oben in der Liste schon beschrieben):
rwx (für lesen|schreiben|ausführen)
Die Standardrechte einer Datei sind 644 bzw. rw-r--r--. Die Standardrechte eines Ordners oder Verzeichnisses sind 755 bzw. rwxr-xr-x.

Hinweis! Diese Rechte haben die Dateien in der Regel gleich nach dem Hochladen und müssen bei normalen HTML-Dateien nicht geändert werden, da HTML-Dateien nicht ausführbar sind und auch nichts selbstständig schreiben können.

Achtung! Viele FTP-Programme, die mit Zahlen bei der Rechtevergabe arbeiten, möchten, dass am Anfang eine 0 angegeben wird und dann erst die eigentlichen Rechte folgen, da dies der Serverstandard ist.

Achtung! Die Dateirechte brauchen Sie in HTML nur dann zu verwenden bzw. ändern, wenn Sie z.B. nicht möchten, dass Ihre Besucher eine bestimmte Datei oder einen bestimmen Ordner ansehen können oder wenn Sie eine bestimmte Datei für Sie nicht löschbar oder überschreibbar machen möchten.

Umfassende Attribute

Es gibt einige wenige Attribute, die nahezu jeder HTML-Code besitzt.
Diese sind:



Texte formatieren

Normale Texte

Wie Sie bereits in einem früheren Kapitel erfahren haben, werden Tabulatoren, Zeilenumbrüche und mehrere direkt hintereinander verwendete Leerzeichen, die Sie im Code eingegeben haben, nicht auf der Webseite angezeigt, egal, ob Sie diese im Code oder Text machen.

Manchmal möchte man jedoch, dass genau diese Zeichen auch angezeigt werden. Dafür gibt es einen besonderen HTML-Code.

<pre>

<pre> (für "präformatierter Textabschnitt") ist der so genannte Schreibmaschinentext. Text, der innerhalb dieses Codes steht, wird in einer Schreibmaschinenschriftart dargestellt und zeigt jedes Zeichen genau so an, wie es im Code steht. Es werden also alle Leerzeichen, Zeilenumbrüche und Tabulatoren angezeigt.

Achtung! HTML-Codes, die sich innerhalb von pre befinden werden ausgeführt und nicht so angezeigt, wie diese im Code stehen!

Attribute des pre-Tags

width gibt die Breite des Schreibmaschinentextes an und ist das einzige Attribut dieses Codes.

Überschriften

Eine Webseite enthält meist viele Überschriften. Damit man diese nicht immer alle einzeln formatieren muss, gibt es in HTML dafür vordefinierte Codes.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Die vordefinierten Überschriften haben die Codes <h1> bis <h6>. Hier gilt, dass H1 größer ist als H2, H2 größer als H3, usw.

Hinweis! Die Verwendung dieser Codes für die Überschriften empfiehlt sich auch besonders, wenn Ihre Seite bei Google oder einer anderen Suchmaschine besser gefunden werden soll, denn je größer die Überschrift (h1, h2, ...) desto besser für die Platzierung in den Suchergebnissen.

Attribute von <h1>, <h2>, ...

Die Überschriften haben folgende zwei optionale Attribute:

Zeilenumbrüche & Absätze

Zum Formatieren von Texten benötigt man oft Absätze und Zeilenumbrüche. Jedoch kann man diese nicht einfach wie gewohnt mit dem Drücken auf die Enter-Taste machen, da dies nur zu einem Zeilenumbruch im Code führt, aber nicht auf der Webseite.

Lediglich dann, wenn der Text länger ist als das Element (z.B. die Webseite oder eine Box), das ihn enthält, macht der Browser einen automatischen Zeilenumbruch und sorgt so dafür, dass die Webseite nicht auseinandergezogen wird.

Zeilenumbrüche (<br>)

Wenn Sie einen Zeilenumbruch machen möchten, der auch auf der Webseite sichtbar wird, müssen sie dazu <br> verwenden.

Achtung! Dieser HTML-Code hat keinen Endtag. Sie schreiben einfach nur <br> und kein Ende in den Code, wenn Sie einen Zeilenumbruch machen möchten.

Absätze (<p>)

Um einen Absatz zu machen, können Sie zwei br-Codes direkt hintereinander verwenden.
Es empfiehlt sich hier die Verwendung von <p>, da dies zum einen professioneller ist und zum anderen vor allem auch später einige Vorteile beim Arbeiten mit CSS mit sich bringt.

Der Text, der zu einem Absatz gehört, muss zwischen den p-Code.
Beispiel:
<p> Text für Absatz 1... </p> <p> Text für Absatz 2... </p>

Attribute des p-Tags

Folgende optionale Attribute können für den p-Tag verwendet werden:

Zeilenumbruch verhindern (<nobr>)

Manchmal möchte man verhindern, dass der Browser beim Anzeigen der Webseite einen automatischen Zeilenumbruch macht. Um dies zu verhindern, kann <nobr> verwendet werden.
Beispiel:
<nobr>Text der größer ist als das Element, das ihn enthält und der nicht automatisch umbrechen darf...</nobr>

Fett, Kursiv & Unterstrichen

Fett (<b>)

Um einen bestimmten Text oder Textabschnitt fett gedruckt erscheinen zu lassen müssen Sie diesen zwischen die beiden b-Tags schreiben.
Beispiel:
normaler Text <b>fetter Text</b> wieder normaler Text...
Hinweis! Alternativ zum b-Tag kann auch <strong> verwendet werden. Allerdings ist der b-Tag weiter verbreitet.

Kursiv (<i>)

Einen Text kursiv zu formatieren ist ähnlich einfach, wie ihn zu unterstreichen. Dazu benötigen Sie lediglich den i-Tag.
Beispiel:
normaler Text <i>kursiver Text</i> wieder normaler Text...

Unterstreichen (<u>)

Der u-Tag wird zum Unterstreichen von Texten verwendet.
Beispiel:
normaler Text <u>unterstrichener Text</u> wieder normaler Text...

Kombinationen

Selbstverständlich kann man diese Codes auch beliebig kombinieren, wenn man z.B. einen fetten und unterstrichenen Text will. Beispiel:
normaler Text <u><b>fetter und unterstrichener Text</b></u> wieder normaler Text...

Zentrieren

In HTML können Sie Texte oder auch andere Objekte ganz einfach zentrieren, denn dafür gibt es einen besonderen Code und Sie müssen dazu nicht jedes Mal das Attribut algin in Absätzen verwenden.

<center>

Der center-Tag hilft beim Zentrieren von Webseitenelementen. Dazu müssen diese lediglich zwischen diesem Code stehen.
Beispiel:
linksbündiger Text
<center>zentrierter Text</center>
wieder linksbündiger Text...
Achtung! Sie brauchen kein <br> vor oder nach dem center-Code machen. Dies wird vom Browser automatisch gemacht, da in einer Zeile beispielsweise nicht gleichzeitig linksbündiger Text und zentrierter Text stehen kann.

Schriftart, -größe und -farbe

Nun können Sie Ihre Texte bereits zentriert, fett, kursiv und unterstrichen darstellen. Dies ist jedoch noch nicht alles, womit Text formatiert werden kann, denn schließlich möchten Sie sicher auch die Schriftart, -größe und -farbe Ihrer Webseiten bestimmen können.

Schriftart, -größe und -farbe (<font>)

Zum Ändern und Festlegen der Schriftart, -größe und -farbe hilft Ihnen der font-Tag.
Beispiel:
text... <font>text...</font> text...
Hinweis! Der font-Code bewirkt in diesem Beispiel gar nichts, denn dieser benötigt immer Attribute, um irgendetwas zu ändern.

Achtung! Laut dem neusten HTML-Standard ist der font-Tag veraltet. Solange Sie jedoch nur HTML und noch kein CSS können, müssen und sollten Sie diesen verwenden. Ihre Webseite wird dennoch richtig dargestellt werden.

Attribute des font-Tags

Durchgestrichen, Hochgestellt & Tiefgestellt

Text durchstreichen (<s>)

Möchten Sie einen durchgestrichenen Text auf Ihrer Webseite darstellen, so sollten Sie den strike-Tag bzw. den s-Tag (=Abkürzung) verwenden.
Beispiel:
<s>Dieser Text wird durchgestrichen...</s> <strike>und dieser Text auch...<strike>

Hochgestellt (<sup>)

Wenn Sie Text hochgestellt darstellen müssen, weil Sie z.B. mathematische Gleichungen mit Potenzen oder m2 angeben möchten, müssen Sie hierfür den sup-Tag verwenden.
Beispiel:
m<sup></sup>

Tiefgestellt (<sub>)

Müssen Sie bestimmten Text (z.B. Indizes in der Mathematik) tiefgestellt darstellen, so können Sie dazu ganz einfach den sub-Tag verwenden.
Beispiel:
X<sub></sub>




Links

Normale Links

Jede Webseite im Web hat Links mit der Sie auf andere Webseiten oder auf Seiten der eigenen Webseite verweist. Dieses Kapitel zeigt Ihnen, wie auch Sie Links in Ihre Webseite einbauen können.

Links (<a>)

Zum Erstellen eines Links benötigen wir den a-Tag. Dieser umfasst Texte oder Bilder, die verlinkt werden sollen.
Beispiel:
<a>Link zu Google</a>
Hier wird der Text "Link zu Google" verlinkt. Der a-Tag ist jedoch ohne Attribute nutzlos.

Attribute des a-Tags

E-Mails senden

Sicher haben Sie das schon öfter einmal im Web gesehen, dass eine E-Mail-Adresse verlinkt ist und wenn man darauf klickt, wird das eigene E-Mail-Programm geöffnet mit einer leeren Nachricht, in der bisher nur die angeklickte Empfängeradresse steht. Wie dies funktioniert, erfahren Sie hier.

Wenn Sie einen E-Mail-Link setzen möchten, benötigen Sie auch den a-Tag, dessen Attribut target jedoch NICHT. title kann gesetzt werden, wenn Sie dies möchten, ist aber nicht nötig. Einzig und allein href ist zwingend nötig.

Der Wert von href ist bei einem E-Mail-Link nicht wie gewohnt einfach eine Datei oder dergleichen. Hier muss nun die Empfänger-E-Mail-Adresse angegeben werden. Dies allein reicht jedoch nicht. Vor die E-Mail-Adresse muss noch mailto: geschrieben werden, um den Browser zu zeigen, dass es sich hier nicht um eine Datei oder einen Ordner handelt, sondern um eine E-Mail-Adresse.
Beispiel:
<a href="mailto:meinname@meineseite.de">Klicken Sie hier, um mir eine E-Mail zu schreiben.</a>


Sie können dem E-Mail-Programm über den Link jedoch noch weitere Texte, wie z.B. den Betreff oder die Nachricht, übergeben. Dazu hängen Sie an die E-Mail-Adresse ein Fragezeichen (?) und anschließend einen der folgenden Begriffe: Nach dem Begriff muss dann ein Gleichheitszeichen (=) stehen und ein beliebiger Text, so wie er in der Mail stehen soll.
Beispiel:
<a href="mailto:meinname@meineseite.de?subject=Testbetreff">Klicken Sie hier, um mir eine E-Mail zu schreiben.</a>


Möchten Sie mehr als nur eine der 4 Optionen übergeben, so müssen sie diese mit dem Und-Zeichen (&) verbinden.
Beispiel:
<a href="mailto:meinname@meineseite.de?subject=Testbetreff&body=meinenachricht&cc=andereadresse@meineseite.de">Klicken Sie hier, um mir eine E-Mail zu schreiben.</a>

Anker & Sprungmarken

In einem früheren Kapitel haben Sie bereits erfahren, wie eine Sprungmarke in der Adresse aussieht. Dieses Kapitel zeigt Ihnen nun, wie Sie eigene Anker und Sprungmarken erstellen können.

Dafür benötigen wir wieder den a-Tag, allerdings etwas anders als bei den normalen Links.

Wenn Sie einen Anker bzw. eine Sprungmarke in einem Dokument setzen möchten, zu der der Browser springen soll, wenn ein Dokument aufgerufen wird, müssen Sie an die Stelle, an die der Browser springen soll den a-Tag setzen. Dieser hat in diesem Fall nur ein Attribut: name. Den Wert dieses Attributs können Sie selbst festlegen. Er darf jedoch nur aus Buchstaben, Zeichen und Unterstrichen bestehen.
Beispiel:
Überschrift 1
Text...
Text...
Text...

<a name="anker">Überschrift für nächsten Absatz mit Anker</a>
Text...
Text...
Text...
Nun benötigen wir noch einen Link, der zu diesem Anker führt. Diesen legen wir auch wie gewohnt über den a-Tag an. Zu beachten gilt hier nur, dass bei href keine Datei angegeben wird sondern eine Raute (#) mit dem Namen des Ankers, den wir vorher festgelegt haben.
Beispiel:
<a href="#anker">Ankerlink</a>
Wird dieser Link nun ganz oben in der Webseite eingebaut und ein Besucher klickt darauf springt der Browser soweit nach unten, bis er den Anker "anker" findet. Anschließend wird in der Adressleiste des Browsers ganz hinten ein "#anker" an die ursprüngliche Adresse angehängt.

Achtung! Ist die Seite nicht ausreichend groß, d.h. man muss nicht weit genug nach unten scrollen, um zu dem Anker zu gelangen, kann es sein, dass kein Sprung zu sehen ist, auch wenn dieser stattfindet.

Hinweis! Selbstverständlich können Sie in Ihren Links auch Anker aus anderen Dateien aufrufen. Dazu muss dann jedoch der Dateipfad zu der Datei, die den Anker enthält bei href wie im Kapitel "Dateipfade" erklärt, angegeben werden und danach erst das "#anker".

Hinweis! Der neuste HTML-Standard 5.0 verwendet anstatt name das Attribut id, um einen Anker zu setzen. In allen HTML-Dokument, die Sie schreiben, ist es egal, welche der beiden Attribute Sie für das Setzen eines Ankers verwenden.



Bilder

In diesem Kapitel erfahren Sie, wie Sie Fotos und Bilder bzw. Grafiken in Ihre Webseite einbinden können.

Bilder (<img>)

Zum Anzeigen von Bildern auf Ihrer Webseite benötigen Sie den img-Tag. Hinweis! Dieser img-Code ist nutzlos solange er keine Attribute hat.

Achtung! Auch der img-Tag hat kein Ende, also keinen schließenden Tag!

Hinweis! Beachten Sie für dieses Kapitel auch das Kapitel "Grafiktypen"!

Attribute des img-Tags

Grafiken ausrichten

Zum Ausrichten von Grafiken wird das align-Attribut des img-Tags benötigt. Ausrichten einer Grafik bedeutet, dass Text der vor oder nach der Grafik im HTML-Code um die Grafik herumfließt. Dazu gibt es die vertikale und die horizontale Ausrichtung. Es können jedoch nie beide gleichzeitig verwendet werden.

Eine Ausrichtung von Grafiken ist nur dann möglich, wenn die Grafik größer ist als ein Buchstabe im Text.

Vertikale Ausrichtung
Die vertikale Ausrichtung von Grafiken wird in der Praxis kaum verwendet, da man hier nur eine Zeile beachtet, in der die Grafik platziert wird. Hier wird angegeben, wo der Text, der links und rechts neben der Grafik steht, fortlaufen soll. Werte dabei sind top für oben, middle für die Mitte der Grafik und bottom für unten.
Beispiel:
Text... <img src="meinbild.jpg" alt="Ein Bild" align="top"> weiterer Text...
Bei diesem Beispiel wird die Textzeile oben mit dem Bild abschließen und dann auf der anderen Seite des Bildes wieder oben fortlaufen.

Horizontale Ausrichtung
Die horizontale Ausrichtung wird in der Praxis dagegen ziemlich häufig verwendet, da man hier angeben kann, auf welcher Seite der Grafik der normale Text weiterverlaufen soll. Die Grafik wird dadurch also direkt in den Text eingeschoben. Folgende Werte könnten dafür verwendet werden: left für links und right für rechts
Beispiel:
Text....<img src="meinbild.jpg" alt="Ein Bild" align="left">Text2...<br>Text2...<br>Text2...
Bei diesem Beispiel wird "Text2" auf der rechten Seite des Bildes stehen. align="left" gibt hier an, dass das Bild links auf der Webseite platziert werden soll und rechts davon dann andere Objekte, wie z.B. Text, stehen dürfen.

Hinweis! Bei der Ausrichtung von Grafiken helfen Ihnen die Attribute hspace und vspace, wenn Sie möchten, dass zwischen der Grafik und dem Text mehr Abstand sein soll.



Layouthilfen

Für die Gestaltung des Seitenlayouts gibt es einige besondere Codes...

<span>

Der span-Tag wird zur Formatierung von Text verwendet. Dieser Code ist jedoch ohne die Verwendung von CSS nutzlos.

horizontale Linie (<hr>)

Dieser Code erzeugt eine horizontale (Trenn-)Linie im HTML-Dokument. Ohne Angabe eines Attributs verläuft diese Linie komplett von links nach rechts und ist 2 Pixel hoch.

Achtung! Der hr-Tag hat kein Ende, also keinen schließenden Tag.

Attribute des hr-Tags

Gruppenfelder (<fieldset>)

Der fieldset-Code wird zum Zusammenfassen mehrerer zusammengehöriger Elemente (z.B. Eingabefelder) auf einer Webseite verwendet. Um die Elemente, die sich zwischen diesem Code befinden, wird ein dünner Rahmen gezogen.

Damit Sie der Gruppe einen Namen geben können, müssen Sie direkt in diese den legend-Tag einfügen. Dieser Code sorgt dafür, dass der Rahmen unterbrochen wird und stattdessen der Text, der zwischen dem Code steht, angezeigt wird.
Beispiel: 
<fieldset>
         <legend>Gruppentitel</legend>
         Gruppeninhalt...
         Gruppeninhalt...
         Gruppeninhalt...
</fieldset>




Aufzählungslisten

Normale Liste

Zunächst erfahren Sie hier, wie Sie eine gewöhnliche Aufzählung mit Punkten bzw. Spiegelstrichen erstellen können.

normale Aufzählungslisten (<ul>)

Um eine Aufzählung in HTML einzuleiten, müssen Sie den ul-Tag benutzen. Dieser sagt dem Browser, dass der nachfolgende Code eingerückt werden soll.

Hinweis: Der ul-Tag wird überwiegend bei Aufzählungen verwendet. Er kann jedoch auch dazu verwendet werden, normalen Text oder Bilder einzurücken.

Achtung: Alle Browser fügen derzeit direkt über und unter dem ul-Tag eine Leerzeile ein. Diese Leerzeile können Sie nur mit CSS entfernen.

Attribute des ul-Tags

Der ul-Tag besitzt ein besonders wichtiges Attribut:

Aufzählungszeichen (<li>)

Listenpunkte stellen Sie nun mit dem li-Code dar. Zwischen den Code-Anfang und dem -Ende schreiben Sie den Text, der zum jeweiligen Aufzählungspunkt gehören soll. Der Text wird dann automatisch soweit eingerückt, dass dieser, sofern er mehrere Zeilen benötigt, immer hinter dem Aufzählungspunkt steht.
Beispiel: 
<ul>
         <li>Aufzählungspunkt 1</li>
         <li>Aufzählungspunkt 2</li>
         <li>Aufzählungspunkt 3</li>
</ul>

Hinweis: Sie können den li-Tag auch ohne den ul-Tag verwenden. Allerdings werden die Aufzählungspunkte dann nicht eingerückt und Text, der länger als eine Zeile ist, wird dann unschön unter dem Aufzählungszeichen fortgesetzt.

Nummerische Listen

Für nummerische Listen gibt es einen besonderen HTML-Code, der es Ihnen erspart, die jeweilige Zahl vor die Aufzählungspunkte zu schreiben. Außerdem nummeriert dieser Code die Aufzählungspunkte immer korrekt durch, auch dann, wenn Sie mal einen Aufzählungspunkt verschieben oder entfernen sollten.

Nummerische Aufzählungslisten (<ol>)

Damit Sie eine nummerische Liste anlegen können, benötigen Sie den ol-Tag. Dieser wird wie der ul-Tag verwendet, hat jedoch andere Attribute.

Zum Erstellen der einzelnen Aufzählungspunkte verwenden Sie wieder den li-Tag, wie im vorherigen Kapitel beschrieben.
Beispiel: 
<ol>
         <li>Aufzählungspunkt 1</li>
         <li>Aufzählungspunkt 2</li>
         <li>Aufzählungspunkt 3</li>
</ol>

Attribute des ol-Tags

Der ol-Tag hat zwei besondere Attribute:

Alphanummerische Listen

Alphanummerische Aufzählungslisten (<ol>)

Neben den nummerischen Listen können in HTML auch ganz einfach alphanummerische Listen erstellt werden. Dies geschieht ebenfalls mit dem ol-Tag (nähere Beschreibung hierzu im vorherigen Kapitel).

Hier muss jedoch das Attribut type angegeben werden. Als Wert geben Sie nun a (für kleine Buchstaben als Aufzählungszeichen) oder A (für Großbuchstaben als Aufzählungszeichen).
Beispiel: 
<ol type="a">
         <li>Aufzählungspunkt a</li>
         <li>Aufzählungspunkt b</li>
         <li>Aufzählungspunkt c</li>
</ol>




Kommentare

Kommentare

Ab und an (vor allem dann, wenn der Code besonders lang wird) möchte man kleine Notizen in den Code schreiben, die ein späteres Bearbeiten erleichtern. Aus diesem Grund wurden in HTML die so genannten Kommentare eingeführt.

Um einen Kommentar einzuleiten, müssen sie folgende Zeichenfolge eingeben:
<!--

Jeglicher Code und Text, der nun folgt, wird nicht ausgewertet und bleibt somit auch für den Besucher unsichtbar. Um den Kommentar wieder zu beenden, müssen Sie folgendes eingeben:
//-->


Beispiel für einen Code mit Kommentaren 
Normaler Text...
<!-- unsichtbarer Kommentar:
Alles was hier steht, wird nicht angezeigt
und vom Browser auch nicht ausgewertet...
Testen Sie es!
//-->
weiter im Text...


Hinweis: Häufig ist im Web auch die Schreibweise --> - also ohne die beiden Slashes (/) - zu sehen. Auch diese Schreibweise beendet einen Kommentar.

Achtung: Achten Sie darauf, was Sie in die Kommentare schreiben. Der Browser wertet den Inhalt eines Kommentars zwar nicht aus, aber wer sich den Quellcode bzw. -text einer Webseite ansieht, kann sämtliche Kommentare lesen.



Tabellen

Das Grundgerüst

Für viele Inhalte im Web verwenden wir Tabellen. Sei es für das Design von Webseiten ohne CSS oder um Informationen geordnet und übersichtlich darzustellen, wir benötigen stets Tabellen.

Tabelle einleiten (<table>)

Mit dem table-Tag sagen Sie dem Browser, dass hier nun eine Tabelle beginnt.

Attribute es table-Tags

Der table-Tag hat einige wichtige Attribute:

Zeilen (<tr>)

Zum Anlegen einer neuen Zeile innerhalb einer Tabelle verwenden Sie den tr-Tag. Dieser muss zwischen <table> und </table> stehen.
Beispiel: 
<table>
         <tr> </tr> <!-- Zeile 1 //-->
         <tr> </tr> <!-- Zeile 2 //-->
         <tr> </tr> <!-- Zeile 3 //-->
</table>
Achtung: In die einzelnen Zeilen dürfen noch keine Texte geschrieben werden. Dies ist erst erlaubt, sobald eine vollständige Zelle angelegt wurde, wie weiter unten beschrieben wird.

Attribute des tr-Tags

Zellen (<td>)

Um nun aus der Tabellenzeile eine komplette beschreibbare Zelle zu machen, wir der td-Tag benötigt. Der td-Tag muss sich innerhalb eines tr-Codes befinden. Es können auch mehrere td-Tags in einem tr-Code stehen, da eine Zeile auch mehrere Zellen haben kann.
Beispiel: 
<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>
         <tr><td>Zeile 3 Spalte 1</td><td>Zeile 3 Spalte 2</td></tr>
</table>
Hinweis: In die einzelnen Zellen darf nun Text geschrieben werden.

Attribute des td-Tags (und auch das th-Tags)

Achtung: Bitte beachten Sie, dass bei einer Tabelle bzw. Matrix jede Zeile die gleiche Anzahl an Spalten haben muss und jede Spalte die gleiche Anzahl an Zeilen.

Tabellenkopf, -inhalt, -fuß

Es gibt noch HTML-Codes für den Tabellenkopf (<thead>), -inhalt (<tbody>), -fuß (<tfoot>). Diese sind jedoch kaum noch gebräuchlich und können vollkommen durch die tr- und td-Tags ersetzt werden.

Zellen verbinden

Oftmals ist es nötig in Tabellen eine oder mehrere Zellen zu verbinden. Nachfolgend erfahren Sie mehr über die beiden HTML-Attribute, die dies erlauben.

Hinweis: Beide Attribute können nur im td-Tag (oder th-Tag) verwendet werden!

horizontale Zellen verbinden mit colspan

colspan verbindet horizontal gelagerte Zellen miteinander. Dabei muss beachtet werden, dass die Zellen, die mit einander verbunden werden, zu einer "verschmelzen". D.h. es ist auch nur ein td-Tag für x Zellen nötig, wenn diese miteinander verbunden werden.

Wert des Attributs ist die Anzahl an Zellen, die miteinander verbunden werden. colspan="1" ist überflüssig, da dies bedeutet, es handelt sich einfach nur um die aktuelle Zelle.

Beispiel mit verbundenen Zellen: 
<table>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td colspan="2">Zelle 1 und 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td colspan="2">Zelle 2 und 3</td>
 </tr>
 <tr>
  <td colspan="3">Zelle 1, 2 und 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
</table>

vertikale Zellen verbinden mit rowspan

Mit rowspan können Zellen, die untereinander liegen miteinander verbunden werden. Hier gilt das Gleiche wie für colspan.

Hinweis: Bei diesem Attribut werden die einzelnen td-Tags nicht innerhalb eines tr-Tags zusammengeführt, sondern in mehreren tr-Tags ein td-Tag.

Beispiel: 
<table>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td rowspan="3">Zelle 1 der Zeilen 2 und 3</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
 <tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
  <td>Zelle 3</td>
 </tr>
</table>


Hinweis: Kombinationen aus colspan und rospan sind ebenfalls möglich.



Formulare

Das Grundgerüst

Im Web gibt es eine Vielzahl an Formularen. Egal, ob Sie sich irgendwo registrieren, einen Gästebucheintrag hinterlassen oder eine Kontaktanfrage an den Webmaster senden wollen, überall kommen HTML-Formulare zum Einsatz.

Hinweis: Damit diese Formulare allerdings auch einen Nutzen haben und nicht einfach nur abgesendet werden können und nichts geschieht, wird eine weitere Programmiersprache, wie z.B. PHP, Perl, Python (erlauben das Verarbeiten und Speichern von Formulareingaben) oder JavaScript (erlaubt Seitenmanipulationen mit Hilfe von Formularen), benötigt. Da diese Programmiersprachen erst nach dem Erlernen von HTML oder CSS näher betrachtet werden sollen, dient dieses Kapitel lediglich der Vollständigkeit aller HTML-Codes und -Elemente.

Der form-Tag

Um ein Formular, das später auch abgesendet werden kann, zu erstellen, wird der form-Tag benötigt. Dieser stellt im Grunde das Grundgerüst des Formulars dar. Innerhalb des form-Codes müssen alle Formularfelder zu finden sein, die zu diesem Formular gehören.

Auf einer Website können mehrere Formulare sein, deswegen begrenzt form des jeweilige Formular.

Beispiel: 
<form>
 Formular 1 mit Formularfeldern...
</form>
<br>
<br>
<form>
 Formular 2 mit Formularfeldern...
</form>
Hinweis: Innerhalb des form-Codes dürfen nahezu alle HTML-Codes, wie z.B. Links, Bilder Absätze, usw. stehen.

Attribute des form-Tags

Eingabefelder

Der input-Tag

Es gibt in HTML verschiedene Formularfelder. Alle Formularfelder (bis auf zwei) werden mit dem input-Tag generiert. Dabei legt das Attribut type des input-Tags fest, um welches Formularfeld es sich später handeln wird.
Achtung: Der input-Tag ist einer der wenigen HTML-Codes, der kein Ende hat!

Allgemeine Attribute des input-Tags

Der input-Tag hat einige Attribute, die für alle Feldtypen gleich sind. Diese sind:

Einzeilige Eingabefelder

Es gibt in HTML drei verschiedene einzeilige Eingabefelder:

Mehrzeilige Textfelder

Zum Schreiben längerer Texte mit Absätzen, werden mehrzeilige Textfelder benötigt. Diese sind auf nahezu jeder Website (in Foren, Gästebüchern, Kontaktformularen, usw.) zu finden.

Für das Generieren eines mehrzeiligen Textfeldes gibt es in HTML einen gesonderten Code, den textarea-Tag. Dieser ist ausnahmsweise kein Attribut des input-Tags sondern ein eigenständiger Code.

Der Standardtext eines mehrzeiligen Textfelder wird jede noch nicht, wie bei den einzeiligen Textfeldern im Attribut value untergebracht, sondern steht zwischen dem Anfangs- und Endtag von textarea.

Beispiel: 
<textarea name="meintext">Der Text dieses Textfeldes
die 2. Zeile
und die 3. Zeile
...</textarea>

Attribute des textarea-Tags

Beispiel für ein leeres, mehrzeiliges Textfeld mit Schreibschutz: 
<textarea rows="7" cols="70" name="kommentar" readonly></textarea>

Buttons

In HTML gibt es verschiedene Buttons. Nachfolgend erfahren Sie mehr zu den einzelnen Typen und deren Eigenschaften.

Der normale Button

Der normale Button kann über zwei unterschiedliche Codes generiert werden. Diese sind: 
<input type="button" name="button1"> <!-- 1. Variante //-->
<button name="button2"></button> <!-- 2. Variante //-->
Gebräuchlicher ist Variante 1.

Hinweis: Ein normaler Button hat ohne die Programmiersprache JavaScript oder einer verwandten keinerlei Funktionalität.

Der Zurücksetzen-Button

Dieser Button wird zwar kaum noch verwendet, sollte aber aus Gründen der Vollständigkeit doch erwähnt werden. Dieser Button soll ein Formular, in das vom Benutzer bereits irgendwelche Daten eingegeben wurden, welche eventuell falsch waren, in den Ausgangszustand zurücksetzen. Ausgangszustand bedeutet, dass das Formular nach dem Klick auf den Button wieder so aussieht, wie es direkt nach dem Laden der Seite aussah.

Achtung: Sollten Sie den Formularfeldern irgendwelche Standardwerte zugewiesen haben, so nehmen die einzelnen Felder wieder diese Werte an nach einem Klick auf den Reset-Button.

Der Resetbutton wird so generiert: 
<input type="reset" name="reset1" value="Zurücksetzen">
Der Wert des Attributs value sorgt in diesem Fall für die Aufschrift des Buttons. Wird dieses Attribut nicht angegeben, verwendet jeder Browser eine eigene Standardaufschrift. Dies ist jedoch nicht ratsam!

Der Sende-Button

Zum Absenden eines Formulars wird ein Sende-Button darin benötigt. Der Code eines Sende-Buttons sieht so aus: 
<input type="submit" name="senden" value="Absenden!">
Wie Sie sehen, wird auch beim Sendebutton der unter value angegebene Wert für die Buttonaufschrift verwendet. Sollten Sie hier keinen Wert angeben, so verwendet jeder Browser seinen eigenen Standardwert.

Bilder-Buttons

Oftmals möchte man für den Sende-Button nicht einen dieser unschönen Buttons verwenden, die nur mit CSS (andere Programmiersprache) schöner gemacht werden können. Deshalb gibt es in HTML so genannte Grafik- oder Bilder-Buttons.

Der Bilder-Button entspricht in seiner Funktion dem Sende-Button, ist jedoch anders aufgebaut: 
<input type="image" name="senden" src="/tutorials/pfad/zum/bild.gf">
Wie Sie sehen, wurde hier das Attribut value durch src ersetzt. Dieses neue Attribut enthält den Pfad zur jeweiligen Grafik. Dieser Pfad wird so angegeben, wie weiter vorne im Kapitel "Dateipfade" erklärt.

Optional können noch die Attribute width für die Grafikbreite und height für die Grafikhöhe angegeben werden, sollte die Grafik größer sein, als sie benötigt wird.

Auswallisten

Sie möchten in HTML eine Auswahlliste erstellen? Dafür gibt es gleich mehrere Codes und Varianten, je nachdem, wie viele Element Ihre Liste haben soll...

Die Checkbox

Sicher kennen Sie die kleinen quadratischen Felder auch, auf die man klickt und so einen Haken in das Kästchen setzen kann. Diese Methode kommt besonders häufig bei der Akzeptierung von AGB oder Nutzungsbedingungen zum Einsatz.

Zur Erstellung einer Checkbox benötigen Sie wieder den input-Tag. Allerdings erhält das Attribut type nun den Wert checkbox. Außerdem müssen Sie das Attribut das Attribut value mit einem Wert versehen, den die Checkbox senden soll, wenn Sie angeklickt wird. Ist der Haken nicht gesetzt, wird kein Wert übertragen.

Hinweis: Wie bereits im vorherigen Kapitel erwähnt, können Sie mit den gesendeten Daten noch nichts anfangen. Sie können sich lediglich Mails mit diesen zusenden lassen.

Neben diesen Attributen sollten Sie, wie bereits im vorherigen Kapitel gelernt, dem input-Tag noch das name-Attribut zuweisen und.

Möchten Sie, dass ein Wert beim Laden der Seite bereits, dass ein Haken in die Checkbox gesetzt wird, müssen dieser das Attribut checked zuweisen.

Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"

Beispiel: 
<input type="checkbox" name="agb_akzeptiert" value="ja" checked="checked"> Ich akzeptiere die AGB!

Radio-Buttons

Manchmal benötigt man jedoch eine Liste aus mehreren Optionen, von denen nur eine ausgewählt werden kann.

Hierfür gibt es den Attributwert radio für das input-Attribut type. Auch Radiobuttons muss mit dem Attribut value ein Wert zugewiesen werden, da sonst keine Werte gesendet werden können.

Wie bei jedem Eingabefeld, ist auch hier das name-Attribut nötig. Dieser hat bei den Radio-Buttons sogar noch eine zweite Bedeutung: Radio-Buttons mit demselben Namen gehören zu einer Gruppe. Innerhalb einer Gruppe kann immer nur ein Element ausgewählt werden.

Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen diesem das Attribut checked zuweisen.

Hinweis: Das Attribut checked kann ohne Attributwert verwendet werden oder Sie schreiben es so: checked="checked"

Achtung: Verwenden Sie das checked-Attribut mehr als einmal innerhalb einer Gruppe, wird automatisch der letzte Radio-Button ausgewählt.

Beispiel: 
Wollen Sie etwas kaufen?<br>
<input type="radio" name="kaufen" value="ja" checked> ja!<br>
<input type="radio" name="kaufen" value="nein"> nein!<br><br>

Welches Produkt möchten Sie kaufen?<br>
<input type="radio" name="produkt" value="produkt1"> Produkt 1
<input type="radio" name="produkt" value="pordukt2" checked="checked"> Produkt 2
<input type="radio" name="produkt" value="produkt3"> Produkt 3

Drop-Down-Listen

Hat man eine große Liste an Elementen aus denen der Surfer eines oder mehrere auswählen soll, ist es nicht ratsam Radio-Buttons oder Checkboxen zu verwenden. Für diese Listen gibt es die platzsparenden Drop-Down-Listen.

Zur Generierung einer Drop-Down-Liste benötigen Sie mindestens zwei HTML-Codes: den select-Tag zur Einleitung der Drop-Down-Liste und den Option-Tag für die einzelnen Werte der Liste.

Das Attribut name wird in den select-Tag geschrieben.
Verwendenden Sie außerdem das size-Attribut im select-Tag, wird aus einer herunterklappbaren Liste eine eckige Liste, in der mit Hilfe der Strg-Taste eine oder mehrere Elemente ausgewählt werden können, wenn Sie auch noch das multiple-Attribut (ohne Attributwert) setzen. size gibt dabei die Menge der angezeigten Elemente der Liste an, die zu sehen sein sollen, ohne dass man darin scrollen muss.

Zwischen den Anfangs- und den Endtag von select werden so viele option-Codes geschrieben, wie die Liste Elemente enthalten soll. Zwischen den Anfangs- und den Endtag eines option-Codes wird dann der Text geschrieben, der in der Drop-Down-Liste angezeigt werden soll.

Möchten Sie, dass die Drop-Down-Liste genau den Text sendet, der ausgewählt wurde, müssen Sie kein value-Attribut verwenden. Andernfalls müssen Sie dieses in den jeweiligen option-Anfangstag schreiben und ihm einen Wert zuweisen.

Möchten Sie, dass ein Wert beim Laden der Seite bereits ein Wert der Liste ausgewählt ist, müssen dem dazugehörigen options-Tag das Attribut selected zuweisen.

Hinweis: Das Attribut selected kann ohne Attributwert verwendet werden oder Sie schreiben es so: selected="selected"

Beispiel: 
<select name="aufklappbareListe">
 <option value="1" selected>Listenwert 1</option>
 <option>Listenwert2</option>
</select>
<br><br>

<select name="normaleListe" size="5">
 <option selected="selected" value="1">Listenwert 1</option>
 <option>Listenwert2</option>
</select>
<br><br>

<select name="mehrfachListe" size="5" multiple>
 <option selected="selected" value="1">Listenwert 1</option>
 <option>Listenwert2</option>
 <option>Listenwert3</option>
 <option>Listenwert4</option>
</select>
Möchten Sie, dass die Werte innerhalb einer Drop-Down-Liste in Gruppen angezeigt werden, müssen Sie den optgroup-Code dazu verwenden.

Zwischen den Anfangs- und Endtag dieses Codes werden alle option-Codes geschrieben, die zur jeweiligen Gruppe gehören sollen.

Um den einzelnen Gruppen Namen geben zu können, müssen Sie optgroup das Attribut label zuweisen. Der Wert dieses Attributs wird der Gruppentitel.

Beispiel: 
<select name="aufklappbareListe">
 <optgroup label="Gruppe1">
  <option value="1" selected>Listenwert 1</option>
  <option>Listenwert2</option>
 </optgroup>
 <optgroup label="Gruppe2">
  <option>Listenwert5</option>
  <option>Listenwert6</option>
  <option>Listenwert7</option>
 </optgroup>
</select>

Feldbezeichnungen

Der label-Tag

Für die Feldbezeichnungen in HTML wird in der Regel der label-Tag verwendet. Dieser erleichtert dem Nutzer die Verwendung der Felder. Klickt er z.B. die Feldbezeichnung des jeweiligen Eingabefeldes an, wird dieses automatisch ausgewählt. Bei Checkboxen wird sogar ein Haken gesetzt oder entfernt, wenn nur der dazugehörige Text angeklickt wird. Ähnlich sieht es mit den Radio-Auswahlfeldern aus.

Zur Erstellung dieser Feldbezeichnungen gibt es zwei Möglichkeiten.

Variante 1: Sie der label-Code umfasst den Text, den Sie für die Feldbezeichnung wählen und das dazugehörige Eingabefeld.

Achtung: Hier darf sich nur ein Eingabefeld innerhalb des label-Codes befinden! Andernfalls sollten Sie die zweite Variante verwenden.

Beispiel: 
<label>Mein Name: <input type="text" name="meinname"></label>
Diese Schreibweise ist jedoch nicht immer möglich. Dies ist z.B. dann der Fall, wenn Sie eine Tabelle für Ihre Formulare verwenden, denn der HTML-Standard schreibt vor, dass die HTML-Tags in umgekehrter Reihenfolge wieder geschlossen werden müssen, als sie geöffnet werden.

Variante 2: Sie weisen dem label-Tag das Attribut for zu. Der Attributwert sollte dann die Feld-ID des Eingabefeldes sein.

Beispiel: 
<label for="idmeinname">Mein Name:</label> <input type="text" name="meinname" id="idmeinname">
Diese Schreibweise wird auch vom HTML-Standard vorgeschlagen.



Frames

Normale Frames

Sie kennen diese Websites bestimmt auch. Sie haben oben und/oder links eine Navigation und wenn man darauf klickt, wird nur im eigentlichen Inhaltsteil der Website etwas neues geladen und nicht die komplette Website.

Oder haben Sie sich schon gefragt, wie aufwändig und unkomfortabel HTML eigentlich ist, weil Sie auf jeder Seite Ihrer Website die komplette Navigation, den Kopf der Website und anderes erneut programmieren oder hineinkopieren müssen? Aber nicht nur das. Möchten Sie einmal einen Navigationspunkt Ihrer Website ändern, müssen Sie das in zig-Dateien machen, da Sie ja die Navigation in jede Seite eingebaut haben.

Aus diesem Grund gibt es so genannte Frames.

Frames erlauben Ihnen das Erstellen einer Website aus mehreren Websites.

Achtung: Suchmaschinen, wie Google mögen Frames überhaupt nicht. Der Grund dafür ist, dass der eigentliche Inhalt der Website nicht dort steht, wo er erwartet wird. Die Suchmaschine muss zuerst den Frames folgen, um den eigentlichen Inhalt zu finden und benötigt ausgedrückt so mehr "Power". Außerdem fehlen eventuell wichtige Seitenelemente (z.B. die Navigation oder der eigentliche Inhalt), wenn Surfer über Google auf eine Seite mit Frames geführt werden. Solange Sie nur HTML und keine serverseitige Scriptsprache können, müssen Sie Frames verwenden, sofern Sie nicht jedes Mal die komplette Navigation bzw. den kompletten Header neu programmieren möchten. Möchten Sie mit Ihrer Website in den Suchmaschinen präsent sein und auch wirklich gefunden werden, so sollten Sie auf Frames verzichten und jede Seite Ihrer Website mit dem Grundgerüst versehen.

Der frameset-Tag

Der frameset-Tag stellt das Grundgerüst des Frames dar. Er legt fest, wie viele Frames auf der Website enthalten sind, wie groß diese sind und welche Anordnung vorliegen soll.

Da die Seite, die das Frameset enthält, keinen eigentlichen Inhalt mehr haben kann, wird hier der body-Code mit allen seinen Inhalten herausgelassen. Stattdessen wird dort der frameset-code platziert. Da die Erklärung des Aufbaus eines Framesets mit Frames extrem kompliziert ist, zeigen wir Ihnen hier einige Beispiel-Codes und beschreiben, was diese besagen.

Beispiel 1: 
<frameset rows="100,*" frameborder="1" border="1">
 <frame name="oben" frameborder="1" src="oben.html" scrolling="yes" noresize>
 <frame name="unten" frameborder="1" src="unten.html" scrolling="auto" noresize>
</frameset>
Hier sehen Sie ein Frameset bestehend aus zwei horizontalen Frames, z.B. für den Seitenkopf mit Navigation und darunter der eigentliche Seiteninhalt.

Dass es sich um zwei horizontale Frames handelt, sehen wir an dem Attribut rows für Zeilen. Dieses Attribut legt die Anzahl der "Zeilen" und die Größe dieser fest. Somit ist der obere Frame 100 Pixel hoch, während der untere Frame eine variable Höhe erhält. Dafür steht der Stern.

Hinweis: Es ist ratsam, dass Sie den Stern für mindestens einen Frame verwenden, da sich die Bildschirmauflösung von Surfer zu Surfer ändert. Würden Sie in dem Beispiel oben z.B. angeben, dass der zweite Frame 1000 Pixel hoch sein soll, so könnten Surfer mit einer niedrigeren Bildschirmauflösung nur einen Teil der Website sehen, während andere Surfer mit einer hohen Auflösung unten im freien Raum einen hässlichen grauen Bereich sehen.

Die Attribute frameborder und border geben die Breite der Framelinien an. Sollen die Linien verschwinden, müssen Sie allen drei Attributen den Wert 0 zuweisen.

Im Attribut src steht die jeweilige HTML-Datei, die im Frame angezeigt werden soll. Bei der Angabe dieses Attributwertes sollte auf korrekte Dateipfade geachtet werden, die bereits in einem früheren Kapitel behandelt wurden. Andernfalls kann es passieren, dass die Frames eine Fehlermeldung anstatt der gewünschten Website anzeigen. Sollte dies der Fall sein, müssen Sie den Dateipfad überprüfen.

Wie Sie sehen, hat auch jeder Frame das name-Attribut. Dieses Attribut sollte auf jeden Fall verwendet werden. Es enthält einen beliebigen Namen.

Achtung: Achten Sie darauf, dass der Name innerhalb eines Framesets nur einmal verwendet wird! Außerdem muss der Name mit einem Buchstaben beginnen und darf anschließend nur Buchstaben, Zahlen, Bindestriche (-), Unterstriche (_), Punkte (.) oder Doppelpunkte (:) enthalten. Es dürfen keine Leerzeichen oder Umlaute verwendet werden!

Das Attribut scrolling bestimmt, ob der Browser im jeweiligen Frame Scrollbalken immer anzeigen soll (yes), nie anzeigen soll (no) oder nur bei Bedarf anzeigen soll (auto). auto ist die Standardeinstellung, wenn nichts anderes angegeben wurde.

Verwenden Sie das Attribut noresize, wenn Sie nicht möchten, dass der Betrachter Ihrer Website, die Frames größer oder kleiner machen kann. Sollten Sie die Framelinien ausgeblendet haben, ist dieses Attribut unnötig. Bitte beachten Sie, dass dieses Attribut keinen Attributwert hat!


Beispiel 2: 
<frameset cols="*,*" frameborder="1" border="1">
           <frame name="links" src="links.html">
           <frame name="rechts" src="rechts.html">
         </frameset>
Hier haben wir nun eine Frameset bestehend aus zwei vertikalen Frames, die beide gleich groß sind.

Sehen Sie sich das Frameset genauer an, sehen Sie dieses Mal das Attribut cols anstelle von rows. cols steht hier für Spalten.

Alle anderen Attribute sind bereits bekannt.


Beispiel 3: 
<frameset rows="*" cols="90,*" frameborder="1" border="1">
 <frame name="links" src="links.html">
 <frameset rows="90,*" frameborder="1" border="1">
   <frame name="oben" src="oben.html">
   <frame name="main" src="http://www.andere-seite.de/main.html">
 </frameset>
</frameset>
Dieses Beispiel zeigt nun eine Kombination aus horizontalen und vertikalen Frames. Zunächst wurde ein Frame aus zwei vertikalen Frames angelegt. Anstelle des zweiten bzw. rechten Frames, steht nun wieder ein Frameset mit zwei horizontalen Frames. Dieses unterteilt den zweiten/rechten Frame in zwei weitere Frames.

Außerdem sehen Sie hier, dass der Frame mit dem Namen main eine andere, externe Website enthält. Dies soll Ihnen zeigen, dass sich die Inhalte eines Frames nicht auf die eigene Website beschränken, sondern Sie auch andere Websites in Ihre Frames integrieren können.

Links in Frames

Sie haben sich sicher schon gefragt, warum wir den Frames eindeutige Namen zuweisen müssen. Dies ist immer dann nötig, wenn man mit Links innerhalb der einzelnen Seiten arbeitet, die in den Frames angezeigt werden.

Zunächst sollten Sie wissen, dass Links, die in einem Frame angeklickt werden und kein target-Attribut haben, sich im selben Frame wieder öffnen. Dies können wir z.B. mit dem Attributwert _blank verhindern, welcher beim Klick auf einen Link, das Ziel in einem neuen Fenster öffnet.

Neben diesem Attributwert, haben wir in einem früheren Kapitel bereits _top, _parent, _self gelernt ohne zu wissen, was diese wirklich tun. Sofern Sie keine Frames verwenden, haben diese alle ein und dieselbe Bedeutung: Der angeklickte Link soll sich im selben Fenster öffnen, wie die aktuelle Seite. Sie können hier das target-Attribut weglassen, da dies der Standardwert für alle Links ist.

Verwenden Sie jedoch Frames können diese Attributwerte ab und an dieselbe Bedeutung haben, müssen es jedoch nicht. _top bedeutet, dass der angeklickte Link alle Frames der aktuellen Seite auflösen und die Website im kompletten Fenster öffnen soll. _parent bedeutet, dass der angeklickte Link das aktuelle Frameset auflösen und die Website im nächste höher gelegenen Frame öffnen soll. _self hingegen bedeutet, dass der angeklickte Link die Website im aktuelle Frame öffnen soll.

Wahrscheinlich haben Sie sich schon gefragt, warum Sie den einzelnen Frames Namen geben sollten. Mit Hilfe der Namen ist das gezielte Ansprechen eines Frames möglich. Haben Sie z.B. ein Frameset aus drei Frames (Navigation rechts, Kopf oben, und Seiteninhalt) angelegt, so würden alle Links aus der Navigation in dem kleinen Navigations-Frame geöffnet werden, anstatt im Inhalts-Frame. Hier würden Ihnen auch die Attributwerte _top, _self, _parent oder _blank nicht weiterhelfen.

Anstelle dieser verwenden wir nun einen Framenamen im target-Attribut.

Zur Veranschaulichung gehen wir von diesem Frameset aus: 
<frameset rows="*" cols="90,*" frameborder="1" border="1">
 <frame name="navigation" src="navigation.html">
 <frameset rows="90,*" frameborder="1" border="1">
   <frame name="kopf" src="oben.html">
   <frame name="inhalt" src="main.html">
 </frameset>
</frameset>
Um nun mit einem Klick auf einen Link des Frames navigation die entsprechende Seite im Frame inhalt zu öffnen, geben wir nun dem entsprechenden Link das target-Attribut mit dem Namen des Frames, in dem der Link geöffnet werden soll.

Hier ein Beispiellink in der navigation.html, der im Frame inhalt geöffnet werden soll: 
<a href="neuer_inhalt.html" target="inhalt">Beispiellink</a>


Achtung: Sollten Sie einen Framenamen nicht hinterlegt haben, diesen aber als Attributwert für target in einem Link verwenden, so wird ein neues Fenster geöffnet.

Hinweis: Sollten Sie die Wirkung der Attributwerte _self und _parent verstehen, brauchen Sie sich keine Gedanken deswegen zu machen. Es reicht in der Regel, wenn Sie mit den Framenamen und den Attributwerten _top und _blank arbeiten können.

Keine Frames

Manche ältere Browser oder aber Text-Browser, wie lynx oder w3m, können keine Frames darstellen. Aus diesem Grund wurde in HTML der noframes-Tag eingeführt, um die Website den Nutzern dieser Browser ebenfalls zugänglich machen zu können.

Der noframes-Tag

Dieser Code verwendet keine Attribute. Zwischen seinen Anfangs- und End-Tag schreiben Sie Inhalte, die Angezeigt werden sollen, sollte der Browser keine Frames unterstützen. Sie können dabei alle HTML-Codes verwenden, die Sie innerhalb des body-Tags verwenden dürfen. Außerdem sollten Sie innerhalb des noframes-Codes, den body-Tag verwenden, um den Seiteninhalt einzuleiten.

Der noframes-Code wird innerhalb eines Framesets verwendet und vor den schließenden frameset-Tag gesetzt.

Beispiel: 
<frameset rows="*" cols="90,*" frameborder="1" border="1">
 <frame name="navigation" src="navigation.html">
 <frameset rows="90,*" frameborder="1" border="1">
   <frame name="kopf" src="oben.html">
   <frame name="inhalt" src="main.html">
 </frameset>
 <noframes>
  <body>
   Ihr Browser unterstützt keine Frames. Aus diesem Grund kann diese Website nicht richtig dargestellt werden.<br>
   <a href="/tutorials/alternative.html">Hier können Sie eine Alternativseite aufrufen...</a>
  </body>
 </noframes>
</frameset>

Inline-Frames

Manchmal möchte man eine andere Website (z.B. direkt in den Text oder darunter) in die eigene einbauen oder integrieren. Die Verwendung normaler Frames wäre hierfür allerdings zu aufwendig und nicht empfehlenswert. Aus diesem Grund gibt es die so genannten Inline-Frames (oder kurz I-Frames).

Der iframe-Tag

Der iframe-Code ist ein Code, der direkt in den Seiteninhalt integriert werden kann und dort einen Frame erzeugt. Zwischen seinem Anfangs- und End-Tag stehen keine Inhalte. Viele Programmierer schreiben dorthin allerdings einen kurzen Text, der bei älteren Browsern und Text-Browsern angezeigt wird, wenn diese den iframe-Tag nicht unterstützen.

Beispiel: 
<iframe>Ihr Browser unterstützt keine I-Frames...</iframe>

Attribute des iframe-Tags

Zur Formatierung des I-Frames stehen Ihnen einige Attribute zur Verfügung:



Bewegte Objekte

Der blink-Tag

Manchmal möchte man in HTML blinkenden Text darstellen. Doch leider ist HTML für derartige Effekte nicht die richtige Programmiersprache bzw. Anwendungssprache. Dazu wäre beispielsweise die Programmiersprache JavaScript nötig.

Es gibt jedoch einen HTML-Code, der einen blinkenden Text erstellt: Der blink-Code. Text, der blinken soll, wird einfach zwischen den Anfang und das Ende des Codes geschrieben.

Beispiel:
<blink>Dieser Text blinkt...</blink>
Achtung: Der blink-Tag ist kein offizieller HTML-Code. Er wird deshalb auch nur von den Browsern Mozilla Firefox und Opera richtig dargestellt.

Der marquee-Tag

Auf anderen Websites haben Sie es bestimmt schon einmal gesehen: Das Laufrad in dem Text und Bilder von link nach rechts laufen. Auch diesen Effekt müsste man eigentlich mit JavaScript erzeugen.

Aber HTML kennt für diesen Effekt den marquee-Tag. Text, Bilder und andere Objekte, die zwischen dem Anfangs- und dem Endtag stehen, werden über den Bildschirm bewegt.

Beispiel:
<marquee>Lauftext... Lauftext... Lauftext...</marquee>
Hinweis: Wenn Sie die Laufrichtung verändern möchten, so verwenden Sie bitte das Attribut direction und weisen ihm einen der folgenden Werte zu: top für nach oben, bottom für nach unten oder right für nach rechts.



Container

Der div-Tag

Der div-Tag erzeugt einen so genannten Container oder Kasten, der eine Gruppe von Inhalten umfasst. Da der div-Tag allerdings ohne CSS keinerlei Formatierungen erlaubt oder somit völlig nutzlos ist, wurde dieser hier nur aus Gründen der Vollständigkeit erwähnt.

Hinweis: Bitte vergessen Sie den div-Tag nicht, wenn Sie sich CSS auch noch aneignen wollen, denn dieser ist in Verbindung mit CSS ein sehr wichtiges Formatierungswerkzeug!



Metatags






© Copyright by abnorm media GmbH