x

HTML Grundkurs: Links & Verlinkungen erstellen

In diesem Tutorial zeigen wir dir, wie du Links zu anderen Seiten und Verlinkungen innerhalb eines Dokumentes erstellst.

Play Video

Das A-Tag

Für Links benutzen wir im HTML das A-Tag. Das A-Tag besitzt ein öffnendes und ein schließendes Tag. Mithilfe des Attributs „href“ können wir das Ziel angeben, auf das dann das A-Tag verweist. Zwischen das öffnende und das schließende A-Tag können wir dann zum Beispiel ein Text schreiben oder ein Bild einfügen.

Einen Link erstellen

Zuerst einmal möchten wir dir zeigen, wie du Links zu anderen Seiten erstellst. Danach zeigen wir dir, wie du Verlinkungen innerhalb eines Dokumentes erstellst.

Öffne als erstes deine index.html Datei. Tippe dann ein A-Tag hinein und füge ihm das Attribut „href“ hinzu.

Als Ziel geben wir bei diesem Link die YouTube URL an und schreiben anschließend YouTube zwischen die beiden A-Tags.

Nun haben wir einen Link erstellt der zu YouTube führt.

<a href="https://www.youtube.com/">YouTube</a>

Eine Verlinkung erstellen

Jetzt zeigen wir dir, wie du Verlinkungen innerhalb eines Dokumentes erstellst.
Wir werden dazu im Header ein Link erstellen, der dann auf unser Katzenfoto weiter unten in der HTML-Datei verweist.

Tippe ein A-Tag in den Header deiner HTML-Datei ein und füge im das Attribut „href“ hinzu. Trage als Ziel dann ein Hashtag ein und schreibe ein beliebiges Wort dahinter. Da ich auf mein Katzenfoto verlinken möchte schreibe ich „katze“ dahinter.

Danach musst du dann dem Objekt, das du verlinken möchtest, das Attribut „Id“ vergeben.

Wir gehen dazu zu dem Img-Tag unseres Katzenfotos und geben ihm eine Id mit dem Namen „katze“.

Nachdem du dem Objekt, auf das du verlinken möchtest eine Id vergeben hast, speichere deine HTML-Datei ab und öffne Sie in einem Browser.

<a href="#katze">Link zum Katzenfoto</a> <img id="katze" src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze">

Target="_blank"

Zu Schluss möchten wir dir noch einen kleinen Tipp verraten.

Wenn du nicht möchtest, dass sich das Ziel eines Links im selben Tab öffnet, sondern in einem neuen Tab, dann musst du diesem Link einfach das Attribut „target=”_blank”“ hinzufügen.

<a href="https://www.youtube.com/" target="_blank">YouTube</a>


Im nächsten Tutorial des HTML Grundkurs zeigen wir dir wie du Listen erstellst.

Die index.html Datei:

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> <header> <a href="#katze">Link zum Katzenfoto</a> </header> <div> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p> b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br> <img id="katze" src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze"> <br><br> <img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg" alt="Thumbnail HTML Grundkurs Video 03"><br><br> <a href="https://www.youtube.com/">YouTube</a> </div> <footer></footer> </body> </html>

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: