Eingangsseite
Liste mit weiteren wichtigen Tags (Modul 1.4) oder
Referenzliste mit allen wichtigenTags (Modul 1.5)
Fortsetzung des Kurses: html-Seiten mit Netscape Composer (Modul 1.6)
|
Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 1 "Webbasic"/Modul 1.3 "html-Grundlagen" |
| (© copyright) Letzte Änderungen: |
Grundlagen zu:
Seitenstruktur | Textformatierung |
Hintergrundfarbe, Querbalken, Listen, Tabellen |
Links und Bilder | Anker
Wir beginnen mit der Erlernung der wesentlichen Merkmale und Strukturen der Hyptertext Markup Language, also der Seitenbeschreibungssprache, auf der "Internet"-Seiten (genauer Angebote des World-Wide-Webs) vor allem basieren.
Hinweis: Näheres zur Entwicklung des WWW und von html erfahren Sie in der Anlage html-xhtml-xml am Ende dieses Kurses
Warum soll ich dies noch "von Hand" lernen?
Auch wenn einem heute Webeditoren-Programme die Arbeit, Webseiten zu erstellen, wesentlich erleichtern, ist es doch essenziell, die Grundlagen und Grundstrukturen der einfachen Seitenbeschreibungssprache html zu verstehen. Andernfalls werden Sie die größten Schwierigkeiten haben, Fehler, die auch mit noch so professionellen Webeditoren regelmäßig auftreten, zu erkennen und wieder zu beseitigen. Außerdem werden Sie nur so verstehen, welche Möglichkeiten und Einschränkungen html bietet und können nur so den vollen Umfang kommerzieller Webeditoren nutzen.
Das müssen Sie wissen:
Ein html-Dokument wird in reinem ascii-Textcode geschrieben (das sind die Buchstaben von a-z sowie die Zahlen 1-0. Umlaute, Sonderzeichen, Formatierungen, Seitenstruktur, Einbindungen von Bildern und ggf. anderen Dateiformaten (- diese bleiben extern und werden per Pfadangabe eingebunden -) sowie Links auf andere Seitenteile oder andere Webseiten müssen deshalb alle in Ascii-Code definiert werden.
Ein html-Dokument besteht aus einen Kopf (head) und Körperteil (body). Anfang und Ende des Headers sowie des Bodyteils müssen ebenfalls definiert werden. Außerdem muss dem empfangenden Browser (das ist Ihr Programm zum Ansehen von www-Internetseiten, also z.B. Netscape Navigator oder Internet Explorer) am Anfang mitgeteilt werden, dass es sich um ein html-Dokument handelt. Am Schluss muss ihm ebenfalls mitgeteilt werden, dass das html-Dokument zu Ende ist. Das allereinfachste Dokument besteht deshalb aus folgender Syntax (in Rot). Der dabei im Browser später angezeigte Inhalt dieser Seite ist in Blau angegeben.
<html>
<head>
</head>
<body>meine erste Website
</body>
</html>
Wichtig: Die obigen Farben dienen nur zur Erläuterung, sie werden auf der Webseite nicht dargestellt und müssen auch nicht so geschrieben werden. Zur Farbdarstellung von Schriften und anderem kommen wir später.
Diese Syntax kann mit jeder Wortverarbeitung geschrieben werden (z.B. Word, Wordpad, SimpleText). Wichtig ist, dass das Dokument als reines Textfile abgespeichert wird und die Dateiendung .html bekommt. Außerdem dürfen im Dateinamen keine Leerzeichen, Kommas, Punkte oder Umlaute stehen. Ein möglicher Name wäre also z.B.
ersteseite.html
Tipp: Am besten schreiben Sie alle Dateinamen in kleiner Schrift. Viele Webserver unterscheiden zwischen Groß- und Kleinbuchstaben, damit können später ggf. Probleme auftreten, die Sie vermeiden, wenn alle Dateinamen ausschließlich klein geschrieben werden.
Tipp: Lassen Sie sich unter Windows auch die registrierten Dateiendungen anzeigen (im WindowsExplorer unter Optionen ensprechendes Feld demarkieren), damit sie kontrollieren können, ob die Datei das richtige Format hat. Wird automatisch .txt angefügt, löschen Sie diese Endung und fügen stattdessen .html an.
Sie brauchen eine nähere Anleitung zu diesem Tipp? Finden Sie hier.
Alles, was oben in den < > Klammern steht, sind sog. Marken (Tags, Einzahl: Tag), die nicht auf der dargestellten Seite angezeigt werden. Dies gilt für alle Tags. Sie nehmen nur Struktur-, Formatier- und Steueraufgaben wahr. In der Regel müssen sie geöffnet <beliebigerTag> und wieder geschlossen </beliebigerTag> werden. Die Bezeichnungen der Tags sind vordefiniert (z.B. head, body)
Übung: Rufen wir unsere Datei einmal im Browser auf. Klicken Sie hier, sehen Sie das Ergebnis an, schauen in den Quelltext (idR. im Menupunkt "Ansicht") und schließen Sie danach ggf. wieder das Fenster.
Versuchen Sie dies, nachzuvollziehen. Nehmen Sie Ihren Texteditor, erstellen Sie die Datei und rufen Sie offline mit Ihrem Browser auf (unter Menüpunkt Datei -> Datei öffnen).
Wir ergänzen unsere Seite. Zum einen hatten wir noch keine Überschrift für die Titelleiste des Browsers und zum anderen wollen wir mehr Text haben. Die Überschrift wird in den Header eingefügt. Alles, was ansonsten auf der Seite angezeigt wird, steht im body.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>Willkommen auf meiner ersten Webseite!
Sehr schön ist sie noch nicht, aber es ist ein hübscher Anfang.
Gruß
Ihr Webmaster
</body>
</html>
Übung: Ändern Sie Ihre Seite entsprechen, speichern wieder und rufen Sie sie im Browser auf. Sie wird etwa aussehen wie auf diesem Link. (danach die aufgegangene Seite ggf. wieder schließen).
Was ist passiert? Zwar hat das mit der Titelleiste geklappt, aber schade, weder Zeilenumbrüche noch die Umlaute und das ß sind richtig dargestellt. Schöner Schaden!
Hinweis: Falls die Umlaute offline (d.h. bevor sie auf einen Server geladen werden) in Ihrem Browser doch richtig dargestellt werden, hatten Sie Glück. Spätestens, wenn Ihre Seite online über das http-Protokoll (dazu später) vom Server aufgerufen wird, allerspätestens, wenn dies jemand aus dem Ausland macht, der einen anderen Standardzeichensatz verwendet, würden die Umlaute und das ß falsch dargestellt. Warum? ö, ü, ß etc. ist kein Ascii-Code. Wir müssen also diese Sonderzeichen mit Hilfe des Ascii-Zeichensatzes kodieren. Sehen Sie unten wie das geht. Außerdem müssen wir Befehle dafür eingeben, dass neue Zeilen gebildet werden. Der richtige Code wäre so.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>Willkommen auf meiner ersten Webseite!
<br>
<br>
Sehr schön ist sie noch nicht, aber es ist ein hübscher Anfang.'
<br>
<br>
Gruß
<br>
Ihr Webmaster
</body>
</html>
Hinweis: Sie könnten alles auch kompakter schreiben, es muss nicht bei jedem Tag eine neue Zeile begonnen werden. Im Extremfall könnte obige Seite auch so geschrieben sein, aber das wäre extrem unübersichtlich, nicht wahr? Insgesamt wird nur immer ein Leerzeichen angegeben, selbst wenn sie zwischen die Wörter mehrere Leerzeichen setzen (es gibt aber codierte Leerzeichen, mit denen man dies erreichen kann, dazu später). Eine neue Zeile wird nur mit dem tag <br> gebildet, egal, ob Sie mit Ihrem Texteditor Leerzeichen eingefügt haben oder nicht.
<html><head><title>Meine erste Webseite</title></head><body>Willkommen auf meiner ersten Webseite!<br><br>Sehr schön ist sie noch nicht, aber es ist ein hübscher Anfang.'<br><br>Gruß<br>
Ihr Webmaster</body></html>
Probieren Sie es aus und ändern Ihre Datei entsprechend. Sie sollten danach in Ihrem Browser derartiges sehen.
Wir haben die Zeilenumbrüche mit <br> (für Break geschrieben). Wenn man nur einen neuen Zeilenbeginn möchte, ist dies ok, ansonsten sollte man für den Beginn eines neuen Abschnitts (Paragraph) aber die tags <p> </p> verwenden.
Obiger html-code sähe dann folgendermaßen aus:
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body><P>Willkommen auf meiner ersten Webseite!</p>
<p>Sehr schön ist sie noch nicht, aber es ist ein hübscher Anfang.'</p>
<p>Gruß
<br>
Ihr Webmaster</p>
</body>
</html>
Jeder Abschnitt ist also zwischen <p> und </p> eingebettet. Dazwischen können auch andere Tags stehen, in unserem Fall also noch ein <br>, welches wir gelassen haben, da zwischen "Gruß" und "Ihr Webmaster" nur ein Zeilenwechsel stehen soll, aber kein neuer Absatz (mit Leerzeile dazwischen) beginnen soll.
Probieren Sie es mit aus und ändern Ihr Dokument!
Tipp: Übrigens konnten Tags bislang groß oder klein geschrieben werden. Es ist also egal, ob Sie <body> oder <BODY>, <br> oder <BR> usw. schreiben. In zukünftigen Versionen von html (xhtml) sollen bzw. müssen aber alle Tags kleingeschrieben werden. Also schreiben wir am besten von vorneherein Tags in Kleinbuchstaben (näheres zu xhtml finden Sie in Anlage html-xhtml-xml. Bevor Sie diese aber ggf. lesen, sollten Sie mit dem html-Code vertraut sein).
Jetzt wollen wir aber noch ein bisschen besser strukturieren:
Es ist z.B. sinnvoll, den Willkommensgruß als Überschrift zu definieren (danach suchen z.B. Suchmaschinen im Web), dabei wird auch automatisch eine bestimmte Schriftgröße eingestellt (s.u.) Die Überschriftensyntax lautet z.B. <h2>Titel</h2> (größte Überschrift ist <h1>, kleinste ist <h6>, h steht für header).
Außerdem spielen wir noch ein bißchen:
- "Schön" soll in Fettschrift kommen. Der Bold-Tag dafür ist <b>
- "Hübscher Anfang" soll kursiv sein (tag <i> für italics), dabei "Anfang" aber noch fettgeschrieben werden.
- "Ihr Webmaster" soll sogar noch in roter Farbe kommen und noch eine Schriftgröße größer. Wenn man an den Schriften was ändert, gibt es dafür den <font> tag. Man muss als sog. Attribut allerdings noch eingeben was man ändern will, es können auch mehrere Attribute sein, wie in unserem Fall (da sind es zwei, eines für die Schriftgröße und eines für die Farbe. Am Ende muss der Tag natürlich zugemacht werden, da genügt aber dann das </font> Vergleichen Sie mit der untenstehenden Synax.
So sieht dies dann also aus:
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body><h2>Willkommen auf meiner ersten Webseite!</h2>
<p>Sehr <b>schön</b> ist sie noch nicht, aber es ist ein <i>hübscher <b>Anfang.</b></i></p>
<p>Gruß
<br>
<font size="4" color="#ff0000">Ihr Webmaster</font></p>
</body>
</html>
Haben Sie's ausprobiert und Ihr html-Dokument geändert? Es sollte nun im Browser so aussehen.
Was können wir daraus ableiten:
- Haben Sie's bemerkt? Die Überschrift benötigt keine <p>tags. Wir haben sie für diese Codezeile durch <h2> bzw. </h2> ersetzt.
- Tags können verschachtelt werden (wie oben bei "hübscher Anfang"). Achten Sie aber auf die richtige Reihenfolge (oben wird erst <i> aufgemacht, danach <b>, also muss </b> als erstes geschlossen werden, danach <i>.
Hinweis: Browser sind unterschiedlich fehlertolerant. Mit den meisten Browsern bekommen Sie eine korrekte Darstellung, auch wenn Sie zuerst <i>, dann <b> aufmachen, und danach zuerst wieder mit </i> und danach </b> schließen. Dies ist jedoch keine korrekte Verschachtelung und manche Browser zeigen nur Fehlersalat an. Insbesondere für zukünftige html-Versionen (insb. xhtml) wird diese Fehlertoleranz nicht mehr vorhanden sein, also bitte gleich richtig angewöhnen.
- Die Größenänderung der Schrift erfolgt innerhalb des tags <font> durch das Attribut size="4" . Die Standardschriftgröße hat die Size 3. Alternativ hätten wir auch das Attribut size="+1" verwenden können. Ganz schön logisch, dies alles!
- Das Attribut der Farbänderung ist etwas kompliziert: color="#ff0000"> Rausgekommen ist dadurch ein kräftiges Rot. Die Farbe wird durch sog. RGB-Angaben innerhalb der Gänsefüßchen angegeben. RGB steht für RotGrünBlau und ist ein sog. positives Farbmischungsmodell aus diesen drei Grundfarben. Die Intensität für diese drei Einzelfarben wird jeweils zwischen 0 und 255 angegeben.
Haken dabei: das ganze wird in Hexadezimalzahlen angegeben (gab's wohl mal an der Schule?). 0 wird als 00 dargestellt, 255 als FF. In unserem Beispiel ist also Rot mit maximaler Intensität, Grün und Blau jeweils mit 0 Intensität angegeben. Sie können ja mal rumspielen. Was könnte z.B. bei 25AAD5 herauskommen? Man sollte aber nur sog. websichere Farben verwenden (die auf allen Plattformen und in allen Browsern etwa gleich angezeigt werden), das sind alle Farben bei denen für RGB jeweils die gleichen Zeichen stehen, also z.B. 3399BB oder 00DDAA). Den Rest machen dann später die Webeditoren, aber vielleicht haben Sie das Prinzip für Farben nun in etwa verstanden. Sie sehen, auch hier sind die Farbanweisungen nur in ascii-code ausgedrückt. Diese werden dann vom Browser umgesetzt
- Ganz wichtig: Attributparameter (= Attributwerte) (also in unserem Fall die Zahl 4 für die Fontgröße oder die Farbe ff0000 für Rot müssen unbedingt in Gänsefüßchen " " stehen, im Fall der Farbe muss auch noch # vor der Zahl stehen.
- Es gibt auch noch viele andere tags, die noch Attribute und Parameter beinhalten, dazu kommen wir gleich.
So, noch zwei Beispiele für html in Handarbeit, bevor wir uns mit dem Webeditor helfen lassen.
Bislang haben Sie je nach Ihrer Browservoreinstellung entweder ein Grau oder ein Weiß als Hintergrundfarbe für Ihr Dokument gesehen. Dies wollen wir in ein schmutziges Gelb ändern. Außerdem fügen wir noch eine kleine Auflistung sowie als Anhang eine Tabelle aus zwei Reihen und zwei Zeilen ein. Vor der Tabelle sollte noch ein horizontaler Strich stehen. Außerdem fügen wir noch Kommentare ein, die überhaupt nicht im Webbrowser angezeigt werden, aber uns vielleicht die Arbeit erleichtern, wenn wir später wieder die Seiten ändern. Das ganze sieht dann so aus.
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body bgcolor="#ffcc33">
<h2>Willkommen auf meiner ersten Webseite!</h2>
<p>Sehr <b>schön</b> ist sie noch nicht, aber es ist ein <i>hübscher <b>Anfang.</b></i></p>
<p>Meine Lieblingsessen sind:
<!-- hier beginnt eine sogenannte unordered list -->
<ul>
<li>Schweinebraten</li>
<li>Pfannkuchen</li>
<li>Heuschreckenkrabben</li>
</ul>
<!-- hier endet die Liste --></p>
<p>Gruß
<br>
<font size="4" color="#ff0000">Ihr Webmaster</font></p>
<!-- unten steht das tag für horizontal ruler -->
<hr>
<!-- hier beginnt eine Tabelle -->
<table width="100%" border="1">
<tr>
<td>Dies steht in Zeile 1, Zelle 1</td>
<td>Dies steht in Zeile 1, Zelle 2</td>
</tr>
<tr>
<td>Dies steht in Zeile 2, Zelle 1</td>
<td>Dies steht in Zeile 2, Zelle 2</td>
</tr>
</table>
<!-- hier endet die Tabelle -->
</body>
</html>
Haben Sie es ausprobiert? So sollte es aussehen. Wenn es anders aussieht, haben Sie ziemlich sicher irgendwelche <, " oder / vergessen einzutippen. Das ergibt dann ganz schön Arbeit, den Fehler zu finden.
Wenn alles geklappt hat, wollen wir mal durchsehen, was wir da alles gemacht haben:
- Das innerhalb der (oben der Übersichtlichkeit halber grün dargestellten) <!-- blablabla --> Tags stehende Blabla wird nicht dargestellt. Dies ist der Info- oder Kommentar-Tag, in denen Sie Informationen eintippen können, die Ihnen vielleicht für die Seitenerstellung helfen. Im Browser ist davon nichts zu sehen. Der Übersichtlichkeit halber habe ich auch einige Leerzeilen eingefügt, auch diese werden im Browser nicht dargestellt (ich hätte sie dafür mit <br> oder <p></p> angeben müssen.
- Die Hintergrundfarbe haben wir durch entsprechendes Attribut (bgcolor für Backgroundcolor) und dazugehörigen Parameter "#ffcc33" in den Bodytag eingegeben.
- Die sog. unordered List beginnt mit dem tag <ul>, danach kommen die jeweiligen (beliebig häufigen) Listeneinträge, die zwischen <li> und </li> stehen. Am Schluss wird die Liste wieder durch </ul> abgeschlossen. Eine Liste beginnt und endet immer mit einem neuen Paragraph. <br> oder <p>-Tags müssen deshalb nicht eingegeben werden. Dies gilt übrigens auch für Tabellen, siehe unten. Die Aufzählung, die Sie gerade lesen, ist, wie Sie sicher schon gemerkt haben, auch eine unordered List.
- Übung: Hier einige Knobelfragen zu Listen:
- Knobelfrage 1: Es gibt auch sogenannte ordered lists, die dann mit <ol> und </ol> beginnen bzw. anfangen. Der Rest ist wie bei den unordered lists. Probieren Sie doch mal aus, was da herauskommt.
- Knobelfrage 2: Wie könnte man die Listen verschachteln, so wie das auch hier passiert ist?
- Knobelfrage 3: Wie könnte man zwischen den Listeneinträgen eine Leerzeile einfügen, so wie das auch zwischen den ersten 4 Listeneinträgen oben passiert ist?
- Haben Sie es herausbekommen? Hier sind die Antworten zur Kontrolle.
- Haben Sie noch Mumm für den Endspurt zu diesem Übungsschritt? Die Tabelle ist doch eigentlich ziemlich selbsterklärend.
- Sie wird geöffnet und geschlossen durch <table> bzw. </table>. Das Table-Tag kann viele Attribute mit den zugehörigen Parametern bzw. Werten aufnehmen. Wir haben zwei eingebaut. size="100%" heißt, dass die Tabelle sich über 100% des Browserfensters erstreckt. Probieren Sie doch mal 80% oder ähnliches. Wenn Sie das Prozentzeichen weglassen, wäre die Tabelle nur 100 Pixel breit (oder was auch immer Sie dort eingeben). border="1" bedeutet, dass unsere Tabelle nur dünne Rahmen hat. Probieren Sie mal 0, 2, 3 etc.
- Die erste Reihe bzw. Zeile der Tabelle wird durch <tr> geöffnet, was table row bedeutet. Danach kommen zwei Zellen, die jeweils mit <td> geöffnet und </td> geschlossen werden (table data). Am Ende der Zeile steht </tr>
- Die zweite Reihe wird genauso erstellt. Sie könnten auch weitere Reihen erstellen. Achtung: wenn Sie in der ersten Reihe z.B. zwei Zellen definieren, in der zweiten Reihe aber 3 gibt es bei der Browserdarstellung eine Fehlermeldung oder der Browser stürzt gleich komplett ab.
- Tabellen sind eines der wesentlichsten Gestaltungsmerkmale für Webseiten. Näheres zu Gestaltung mit Tabellen erarbeiten wir uns später.
Total erschöpft? Verständlich, aber Sie wollen doch sicher noch wissen, wie Sie Links und Bilder auf Ihre Seiten einbauen? Na also, danach machen wir aber Pause.
Wir vereinfachen deshalb unser html-Dokument auf folgende Weise:
<html>
<head>
<title>Meine zweite Webseite</title>
</head>
<body><h2>Willkommen auf meiner zweiten Webseite mit Bild und Link!</h2>
<p>Das untenstehende Bild hab ich selbst bei meinem letzten Urlaub aufgenommen</p>
<p><img src="dornenkrone.jpg" width="300" height="203"></p>
<p>Außerdem geht's hier zu meiner dritten Webseite. <a href="versuch3.html">Bitte hier klicken</a>.</p>
<p>Gruß
<br>
Ihr Webmaster</p>
</body>
</html>
Was haben wir hier gemacht?
- Einbau des Bildes: tag <img> mit notwendigem Attribut src (steht für source). Als Parameter/Wert wird hier der Namen der Bilddatei angegeben, hier dornenkrone.jpg. Es gibt keinen Endtag. Das Bild muss in diesem Fall im selben Ordner liegen wie unser html-Dokument. Zu anderen Möglichkeiten (Ansprache eines Bildes über Pfadangabe) kommen wir später.Das Bild wird also einfach "eingebunden", es muss als extra Datei auf dem Webserver vorliegen und bestimmte Formate haben. Sie können ein beliebiges Bild im .jpg oder .gif-Format mit 72 dpi Auflösung verwenden (näheres dazu später), Natürlich müssen Sie dann den entsprechenden Bilddateinamen eingeben. Außerdem sollten Sie in zwei weiteren Attributen die Breite und Höhe eingeben (mit Angabe von Pixeln in den Parametern). So wird die Seite bedeutend schneller im Browser aufgebaut.
- Der Text "Bitte hier klicken" wird auf der Seite als Link dargestellt. Wenn Sie darauf klicken, wird die Seite "Versuch3.html aufgerufen, sofern wir eine derartige html-Seite in unserem Ordner haben. Sehen wir uns die Linksyntax an. Sie beginnt mit dem Tag <a> mit dem notwendigen Attribut href, dessen Parameter die zu verlinkende Datei angibt. So wie wir es hier gelöst haben, müssen Ausgangsdatei und verlinkte Datei im gleichen Ordner liegen. Zu anderen Möglichkeiten (Einbindung über Pfadangaben) kommen wir später. Nach dem anzuklickenden Text muss der Endtag </a> stehen.
Übung: Speichern Sie die in Ihrem Texteditor wie oben erstellte Datei unter dem Namen "versuch2.html" (natürlich ohne Gänsefüßchen). Erstellen Sie dann unten stehende Datei und speichern Sie sie als "versuch3.html". Legen Sie beide Dateien zusammen mit der Bilddatei in einen Ordner auf Ihrem Rechner (oder direkt auf den Desktop).
Der Code von "versuch3.html" sollte z.B. so aussehen:
<html>
<head>
<title>Meine dritte Webseite</title>
</head>
<body><h2>Dies ist meine dritte Webseite </h2>
<p>Leider gibt es hier nicht mehr zu sehenm also lieber wieder zurück.</p>
<p><a href="versuch2.html"><img src="arrow.gif" width="96" height="71"></a></p>
</body>
</html>
Wir haben also hier ein anderes Bild mit Namen arrow.gif und Breite/Höhe 96/71 Pixel eingebaut. Sie können natürlich ein anderes Bild nehmen und die Eintragungen entsprechend anpassen. Was haben wir noch gemacht? Richtig, es scheint so zu sein, dass das Bild als Link anklickbar ist, denn es steht zwischen einem <a> tag (mit den notwendigen href-Attribut) und einem zugehörigen </a>-Endtag. Probieren Sie es einfach aus. Hat es geklappt? Wenn ja, herzlichen Glückwunsch! Zur Kontrolle können Sie hier mal spicken, wie dies aussehen sollte. (danach wieder Fenster schließen).
Links mit Anker: Nun zielen manche Links aber nicht nur auf den Aufruf einer bestimmten html-Seite, sondern springen in der Seite noch eine ganz bestimmte Stelle an. Hierzu verwendet man sogenannte Ankermarken (auch Sprungmarken oder beim Netscape Composer etwas missverständlich Ziel genannt). Wie funktioniert dies? Nun, ganz einfach:
1. Einfügen eines Ankers auf der zu verlinkenden Seite.
Geben Sie an der Stelle, an der der LInk in der zu verlinkenden Seite landen soll eine Ankermarke ein. Dies ist wiederum ein A tag, diesmal allerdings mit dem Attribute name. Der A-Tag muss wiederum durch einen Endtag geschlossen werden. Dabei ist es egal, ob Text dazwischen steht oder nicht. Die Ankermarke wird im Browser nicht angezeigt.
also z.B. so (Ausschnitt aus einem html-Quellcode):
<p>dies ist das Ende des vorhergehenden Abschnitts</p>
<p><a name="kapitel_B"></a>Hier beginnt Kapitel B</p>
Der Anker ist hier zur Erläuterung grün markiert. Er benötigt einen beliebigen Namen, der html-verträglich sein muss (d.h. keine Leer- und sonderzeichen sowie keine Punkte enthalten sollte). Nehmen wir an, obiges Beispiel würde einer Datei mit Name kapitel.html entstammen.
2. Linkgestaltung auf Anker
Von einer Datei mit Namen inhalt.html soll direkt auf den Beginn des Kapitel B verlinkt werden, also genau zur oben eingefügten Ankermarke (der Einfachheit halber nehmen wir an, dass beide Dateien in einem Ordner liegen).
Der entsprechende Quellcode-Abschnitt mit dem entsprechenden Link in Datei inhalt.html könnte z.B. so aussehen:<p><A href="kapitel.html">zu Kapitel A</a></p>
<p><a href="kapitel.html#kapitel_B"></a>zu Kapitel B</a></p>Der erste Link im obigen Beispiel (braun) ruft die Seite kapitel.html ganz normal auf, d.h. der Beginn dieser Kapitelseite liegt am oberen Browserrand.
Der zweite LInk (grün) ruft ebenfals die Seite kapitel.html auf, springt aber sofort zu der mit dem Anker markierten Textstelle. Die Zeile "zu Kapitel B", die vielleicht erst in der zweiten Hälfte der gesamten Seite erscheint, wird im Browser ganz oben dargestellt (man kann also auch mit dem Scrollbalken nach oben scrollen.
Auch innerhalb einer Seite kann man andere Stellen anspringen, ohne dass dazu die Seite gewechselt wird. Nehmen wir an, wir befinden uns auf Siete kapitel.html. Dort könnte ganz oben ein Link zu Kapitel B stehen. Die Seite muss dazu nicht gewechselt werden. Der Link sieht deshalb folgendermaßen aus:
<p><a href="#kapitel_B"></a>zu Kapitel B</a></p>
Es wird also nur der Ankerteil des Links angegeben.
Tipp: Anker machen nur auf relativ langen html-Seiten Sinn. Ist unter einem anzuspringenden Anker nur noch wenig Seiteninhalt vorhanden, wird der Anker nicht direkt angesprungen, da die Seite "zu kurz" ist. Will man dennoch einen Anker verwenden, müssen nach der letzten Inhaltszeile noch leere Zeilen (z.B. durch Aneinanderreihung mehrerer <br>-Tags eingefügt werden.
Tipp: Um Ankerseiten auszuprobieren, brauchen Sie nur mal unten zu klicken. Ich habe weiter oben zwei Anker eingebaut, die Sie mit den folgenden drei Links anspringen können. Das ganze funktioniert also auch nach oben. Scrollen Sie hinterher wieder zurück.
zu Übungsschritt 4 | zu Übungsschritt 5 | zum AnkerkapitelNun aber erst mal Schluss, oder?