In der zweiten Lektion lernen Sie, wie Hyperlinks erstellt werden und wie Sie die Inhalte auf Ihrer Webseite strukturieren können. Schließlich werden Sie in der Lage sein, eine eigene HTML-Seite zu erstellen, auf der die Überschrift „Hallo Welt“ und zwei weitere Absätze mit Blindtext stehen. Darin werden zwei Hyperlinks eingefügt, ein Link, der zu einer anderen Webseite führt und ein Link innerhalb der eigenen Webseite.
Inhalt
| 02.1 | Texte strukturieren in Absätze mit Überschriften
| 02.2 | Hyperlinks mit HTML erstellen
| 02.2.1 | Links innerhalb einer HTML-Seite (interne Links)
| 02.2.2 | Links zu anderen HTML-Seiten (externe Links)
| 02.3 | Praktische Übung
| 02.1 | Texte strukturieren in Absätze mit Überschriften
Um Texte zu strukturieren werden Überschriften (en: headings) und Absätze (en: paragraphs) verwendet . Es gibt sechs Heading-Tags, die einen Text umschließen und diesen als Haupt- oder Zwischenüberschrift kennzeichnen. Sie werden mit den HTML Tags <h1> bis <h6> beschrieben, die hinter dem Überschriftentext immer durch die jeweiligen End-Tags abgeschlossen werden. Ein Textabsatz wird von Paragraph-Tags <p></p> umschlossen. Der End-Tag </p> ist optional, d.h. nicht unbedingt notwendig, da die Browser beim Parsen das schließende Tag ergänzen. Allerdings nicht immer dort, wo vom Autor gewünscht. Nur wenn Sie ihre Absätze mit einem End-Tag beenden, können Sie sicher sein, das die Formatierung korrekt dargestellt wird. Mit folgendem Code wird der Text „Hallo Welt“ als Hauptüberschrift 1 (en: Heading one) ausgezeichnet und danach ein Absatz mit einem Text hinzu gefügt.
<h1> Hallo Welt </h1> <p> Dieser Text hat ein eigenes kleines Thema.</p>
Testen Sie ihr Wissen
| 02.2 | Hyperlinks mit HTML erstellen
Hyperlinks (de: Verknüpfungen, Verweise) sind ein grundlegender Bestandteil des World Wide Web und werden als Links bezeichnet. Diese Querverweise in Hypertexten ermöglichen die Vernetzung von Informationen, indem man über diese Links zu anderen Inhalten im World Wide Web springt. Standardmäßig werden Hyperlinks im World Wide Web in blauer Farbe und unterstrichen dargestellt. Eine weit verbreitete Konvention, da sich die Links so deutlich vom Text abheben und Benutzer leichter erkennen, dass sie auf etwas klicken können. Später lernen Sie, wie Sie die Farbe und den Stil der Hyperlinks mithilfe von CSS ändern können.
Um einen Text als Hyperlink zu markieren werden die HTML-Anker-Tags <a> und </a> verwendet. Das Schreiben des Start-Tags <a> und des End-Tags </a> ist unbedingt notwendig. Mit dem HTML-Attribut „href“ (Hypertext Reference) wird der Ziel-URL-Pfad angegeben, zu dem der Link führt. Wenn keine weiteren Angaben gemacht werden, öffnet sich die gewünschte Seite im selben Browserfenster und ersetzt die dort angezeigte Webseite. Da das nicht immer gewollt ist, kann man mit dem HTML-Attribut „target“ (de: Ziel) festlegen, wie das Ziel geöffnet werden soll. Durch die Zuweisung des Wertes „_blank“ wird der Standardwert „_self“ überschrieben und die gewünschte URL in einem neuen Fenster (Browsertab) geöffnet. Mit folgendem Code wird der Text „Linktext“ als ein Text-Hyperlink markiert, der auf die Ziel-URL „http://www.example.net/infotext.html“ verweist und diese Seite in einem neuen Browserfenster öffnet. Wenn der komplette Datei-Pfad angegeben wird, bezeichnet man dies im Fachjargon als absolute Verlinkung.
<a href="http://www.example.net/infotext.html" target="_blank">Linktext</a>
Testen Sie ihr Wissen
| 02.2.1 | Links innerhalb einer HTML-Seite (interne Links)
Interne Links verweisen nur auf HTML-Seiten, die zur eigenen Webseite gehören. Bei der internen Verlinkung muss nicht, wie bei der absoluten Verlinkung, die komplette URL, angegeben werden. Hier können relative URL´s verwenden werden, die sich alle auf dieselbe Domain beziehen.
Verweise innerhalb eines HTML-Dokumenten werden als Anker bezeichnet, anhand derer man zu einer bestimmten Stelle im selben Dokument springen kann. Mit dem Attribut „name“ des <a>-Tags vergibt man einen beliebigen Namen, den Bezeichner. Folgender Code markiert den Verweistext als Anker mit dem Namen „Anker1“
<a name="Anker1">Verweistext</a>
Möchte man auf diese Zeile springen, gibt man den Namen des Ankers mit vorangestellter Raute, dem Zeichen #, dem Attribut „href“ als Wert.
<a href="#Anker1">zum Verweistext</a>
| 02.2.2 | Links zu anderen HTML-Seiten (externe Links)
Externe Links verweisen auf HTML-Seiten, die nicht zur eigenen Domain gehören. Bei einer externen Verlinkung muss immer der komplette Pfad angegeben werden. Hyperlinks, die von einer Webseite zu einer anderen führen, werden auch als Backlinks (de: Rückverweise) bezeichnet. Diese sind vor allem für kommerzielle Webseitenbetreiber von Bedeutung, die Suchmaschinenoptimierung (SEO) betreiben. Eine Webseite mit vielen Backlinks erhöht die Platzierung bei den Suchergebnissen einer Internet-Suche.
Ein weiterer Aspekt ist der Datenschutz. Aktuell ist man (noch) nicht für die Inhalte der externen Webseite, auf die verlinkt wird, verantwortlich. Wenn Sie auf Ihrer Webseite externe Links verwenden, beachten Sie das Telekommunikation-Telemedien-Datenschutz-Gesetz (TTDSG). Laut § 19 Abs. 3 des TTDSG muss man dem Nutzer die Weitervermittlung zu einer anderen Webseite anzeigen. Hierfür kann das Attribut „title“ verwendet werden. Mit folgendem Code wird bei Mouseover über dem Linktext ein Tooltip angezeigt, der den Nutzer darauf hinweist, das er bei Klick auf den Link auf die externe URL „http://www.example.net/infotext.html“ weitergeleitet wird, die in in einem neuen Browserfenster geöffnet wird.
<a href="http://www.example.net/infotext.html" title="Verweis auf die externe Webseite http://www.example.net/infotext.html" target="_blank">Linktext</a>
Testen Sie ihr Wissen
| 02.3 | Praktische Übung
Schreiben Sie einen HTML-Code, der eine Webseite mit der Überschrift „Hallo Welt“ und zwei Textabsätzen anzeigt. (Blindtexte können Sie sich von der Webseite „blindtextgenerator“ kopieren). Fügen Sie vor dem ersten Absatz einen Anker mit dem Namen „Anker1“ ein und verlinken Sie das letzte Wort im ersten Absatz mit der Webseite „http://www.example.net/infotext.html“. Verwenden Sie die Attribute „target“ und „title“, damit die Seite in einem neuen Fenster geöffnet wird und bei Mouseover über dem Linktext der Tooltip „zur Webseite http://www.example.net/infotext.html“ angezeigt wird. Verlinken Sie das letzte Wort im zweiten Absatz zum Anker1.
Für Ihre ersten Programmierschritte können Sie HTML Instant verwenden, einen kostenlosen HTML-Editor mit Live-Vorschau. Wenn Sie Ihren Code in das rechte Fenster tippen, können Sie im linken Fenster sehen, wie der Browser die Webseite (also Ihre Programmieranweisungen) darstellt.
Für professionelles Webdesign empfehle ich Ihnen einen Code-Editor, der die Arbeit sehr vereinfacht, vor allem durch eine farbliche Syntaxhervorhebung. Persönlich verwende ich den kostenlosen Editor Visual Studio Code von Microsoft.